Menambahkan Dua Kolom Di Bawah Sidebar

Sunday, June 6, 2010
Catatan pada halaman ini adalah mengenai cara menambahkan 2 kolom di bawah sidebar, bukan mengenai cara membagi sidebar menjadi 2 kolom.
Jika Anda telah melakukan pengeditan sidebar dengan cara yang ditunjukkan pada halaman ini (Membagi Sidebar Menjadi 2 Kolom),
maka yang harus di lakukan untuk membuat sidebar dengan 1 kolom utama dan 2 kolom dibawahnya hanyalah cukup dengan menambahkan kode berikut ini tepat diantara kode
<div id='sidebar-wrapper'> dan kode <b:section class='sidebar' id='left-side' preferred='yes' showaddelement='yes'>.
Berikut kode yang harus ditambahkan :

<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>

Setelah itu simpan dan lihat pada halaman "Page Element" atau "Elemen Laman".

Tapi jika belum, maka untuk menambahkan 2 kolom di bawah sidebar bisa dilakukan dengan langkah-langkah berikut ini.

Langkah-langkah menambahkan 2 kolom sidebar di bawah kolom utama pada template blogspot :

A. Langkah I

1. Log in ke akun blogger.

2. Setelah masuk ke akun blogger, kemudian klik menu "Rancangan" atau "Design"

3. Klik "Edit HTML" untuk masuk ke halaman pengeditan kode template.

4. Centang kotak kecil yang berada di sebelah kiri kalimat "Expand template widget" kemudian back up (copy paste) seluruh kode template di notepad. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan kode template.

5. Temukan kode berikut ini atau kode yang mirip dengan kode berikut ini di dalam text-area kode html blog :

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

6. Letakkan kode berikut ini tepat dibawah kode tesebut:

#sidecol1{
width:50%;
float:left;
word-wrap:break-word;
overflow:hidden;
margin: 2px;
}



#sidecol2{
width:50%;
float:right;
word-wrap:break-word;
overflow:hidden;
margin:1px;
}

Langkah I selesai. Selanjutnya ikuti Langkah II berikut ini :

1. Temukan kode berikut ini atau yang mirip

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

2. Letakkan kode berikut ini tepat di bawah kode tersebut :
<b:section class='sidebar' id='sidecol1' preferred='yes'>
</b:section>
<b:section class='sidebar' id='sidecol2' preferred='yes'>
</b:section>

3. Simpan Template.
4. Lihat hasilnya pada halaman "Elemen Laman" atau "Page Element"

Selesai !

Comments :

2 komentar ke "Menambahkan Dua Kolom Di Bawah Sidebar"

dion on May 8, 2011 at 9:45 PM said...

bisa gan tapi cuma sebelah aj kalo di tarok yg sebelah lagi dia jadi ada kolom tapi kosong...bisa tolong di bantu gan???

Ari on May 19, 2011 at 1:53 AM said...

Coba masuk ke "Design". Pilh "Page Element", kemudian isi kolom yang kosong dengan widget, kemudian lihat hasilnya.


Post a Comment

Silakan berkomentar sesuka Anda. Namun jangan spam, berbau SARA, kekerasan, porno atau intimidasi terhadap orang lain. Komentar yang melewati batas akan di hapus. Terima kasih.

Get Update

Masukkan alamat e-mail Anda pada kotak di bawah ini untuk mendapatkan update terbaru dan berlangganan catatan dari blog "The Notes Web" via e-mail :


Privacy guaranteed, we will never share your e-mail.

Komentar terbaru

Catatan Terbaru

Komentar Terbaru