2 Tips Menambah 3 Elemen dibawah Sidebar

Lama ya H.G.C Syndicate gk posting. :D Soalnya lagi pada sibuk mau ngerayaiin Hari Raya Kuningan Drumah jadi gk sempet Post :). Oke sekarang H.G.C Syndicate akan memposting Tips Menambah 3 Elemen dibawah Sidebar. Penasaran ? gambahnya seperti dibawah ini :

Itu contoh gambar setelah Jadi. Pengen? Oke ikuti tutorial dibawah ini :

Tutorials :

• Login ke Blogger
• Masuk ke Rancangan > Edit HTML
• Centang "Expand Template Widget"
• Jika sudah kemudian cari code sepeti dibawah ini :

#sidebar-wrapper { bla bla bla bla ... }

• Jika anda sudah menemukan code #sidebar-wrapper - penutup } lalu copy code dibawah ini tepat sesudah CSS #sidebar-wrapper { bla bla .. }

#left-col { width:170px; float:left; word-wrap:break-word; overflow:hidden; }
#right-col { width:170px; float:right; word-wrap:break-word; overflow:hidden; }
#bottom-col { width:170px; float:right; word-wrap:break-word; overflow:hidden; } 

• Sekarang buat kode HTML untuk bottom sidebar yang dinamai sebagai "bottom-col" tersebut. Carilah kode ini :

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<b:widget id= dan seterusnya...
<b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>
</div>

• Kemudian pasang code dibawah ini tepat diatas code </div> ( Penutup )

<b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>
<b:section class='sidebar' id='bottom-col' preferred='yes'/>  

• Sehingga keseluruhan akan menjadi sepeti dibawah ini :

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<b:widget id= dan seterusnya....
<b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>
<b:section class='sidebar' id='bottom-col' preferred='yes'/>
</div>

• Sekarang silahkan Save Templates

Notes : 

• Sekarang kalian liat di Tata Letak. Jika berhasil akan muncul 3 Elemen dibawah Sidebar

Baca Selengkapnya :