Cara Buat Kolom Add Gadget / Widget di Bawah / di Atas Postingan Blogspot

PCara membuat kolom add gadget / widget di bawah / di atas postingan blogspot, pernahkah sobat merasa kekurangan kolom add gadget / widget pada blog sobat? biasanya blog yang mempunyai kategori yang banyak dan kompleks akan sangat membutuhkan extra kolom gadget atau widget, seperti widget recent posts, widget recent comments ataupun widget yang lainnya dan untuk mempercantik blog agar tampilan gadget atau widget lebih elegan dengan menempatkan gadget (widget) yang sesuai dengan template. Disini saya akan mencoba untuk mengupas cara buat 2(dua) kolom add gadget / widget di atas /dibawah postingan blogspot yang saya ketahui, dan apabila ada kesalahan mohon di koreksi ya sob..!  :)

Sebelum kita membuat extra kolom add gadget ada baik-nya sobat melihat dulu design template sobat, apakah cocok extra kolom gadget di-pasang di atas atau di bawah postingan, agar nantinya sesuai dengan keinginan sobat, atau mungkin sobat ingin memasang dua-duanya (di atas / dibawah postingan). Disini saya akan membahas dua-duanya dan sobat bisa pilih sesuai dengan keinginan.

Ok, pertama silahkan login di Blogger

• Klik Design
• Klik Edit Html ( jangan lupa download template ya sob! buat jaga-jaga kalo ada kesalahan )
• Centang Expand Widget Templates

Saya akan memberikan 2 cara untuk membuat kolom add gadget :
1. Kolom add gadget untuk di bawah atau di atas postingan (silahkan pilih salah satu ya)

Tambahkan kode dibawah ini diatas kode ]]></b:skin>

#magazine-column-container h2{color:#111;font:bold 13px/13px Verdana,sans-serif;margin-bottom:5px;border-bottom:1px solid silver;padding:0 0 5px;text-transform:uppercase;}
#magazine-column-container ul{list-style-type:circle;margin:10px;padding:10px}
#magazine-column-container ul li{border-bottom:1px solid silver;line-height:1.5em;text-align:left;list-style-type:auto;margin:0;padding:2px 0}
.magazine-column {padding: 4px 10px;}
#magazine-left{margin-top:10px;float:left;}
#magazine-right{margin-top:10px;float:right;}

Kemudian cari kode yang seperti di bawah ini

<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
      </div>

Copy  kode dibawah ini

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='magazine-column-container'>
<div id='magazine-left' style='width: 48%; float: left; margin:0; text-align: left;'>
<b:section class='magazine-column' id='col31' preferred='yes' style='float:left;'/>
</div>
<div id='magazine-right' style='width: 48%; float: right; margin:0; text-align: left;'>
<b:section class='magazine-column' id='col32' preferred='yes' style='float:left;'/>
</div>
</div>

<div style='clear: both;'/>
</b:if>

Kemudian taruh tepat dibawah <div id='main-wrapper'> kalo ingin membuat kolom diatas postingan, atau taruh tepat di atas </div> kalau sobat ingin membuat kolom di bawah postingan (biasanya </div> terletak jauh di bawah kalau sobat sudah pernah nulis artikel, cari dengan sabar ya.. hehehe)

2. Kolom add gadget di bawah dan di atas postingan ( dua-dua nya)

Tambahkan kode dibawah ini diatas kode ]]></b:skin>

#magazine-column-container h2{color:#111;font:bold 13px/13px Verdana,sans-serif;margin-bottom:5px;border-bottom:1px solid silver;padding:0 0 5px;text-transform:uppercase;}
#magazine-column-container ul{list-style-type:circle;margin:10px;padding:10px}
#magazine-column-container ul li{border-bottom:1px solid silver;line-height:1.5em;text-align:left;list-style-type:auto;margin:0;padding:2px 0}
.magazine-column {padding: 4px 10px;}
#magazine-left{margin-top:10px;float:left;}
#magazine-right{margin-top:10px;float:right;}

#magazine-column-container1 h2{color:#111;font:bold 13px/13px Verdana,sans-serif;margin-bottom:5px;border-bottom:1px solid silver;padding:0 0 5px;text-transform:uppercase;}
#magazine-column-container1 ul{list-style-type:circle;margin:10px;padding:10px}
#magazine-column-container1 ul li{border-bottom:1px solid silver;line-height:1.5em;text-align:left;list-style-type:auto;margin:0;padding:2px 0}
.magazine-column1 {padding: 4px 10px;}
#magazine-left1{margin-top:10px;float:left;}
#magazine-right1{margin-top:10px;float:right;}

Kemudian cari kode yang seperti di bawah ini

<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
      </div>

Copy kode dibawah ini dan letakkan tepat dibawah kode <div id='main-wrapper'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='magazine-column-container'>
<div id='magazine-left' style='width: 48%; float: left; margin:0; text-align: left;'>
<b:section class='magazine-column' id='col31' preferred='yes' style='float:left;'/>
</div>
<div id='magazine-right' style='width: 48%; float: right; margin:0; text-align: left;'>
<b:section class='magazine-column' id='col32' preferred='yes' style='float:left;'/>
</div>
</div>

<div style='clear: both;'/>
</b:if>

Dan copy kode dibawah ini dan letakkan di atas </div>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='magazine-column-container1'>
<div id='magazine-left1' style='width: 48%; float: left; margin:0; text-align: left;'>
<b:section class='magazine-column1' id='col33' preferred='yes' style='float:left;'/>
</div>
<div id='magazine-right1' style='width: 48%; float: right; margin:0; text-align: left;'>
<b:section class='magazine-column1' id='col34' preferred='yes' style='float:left;'/>
</div>
</div>

<div style='clear: both;'/>
</b:if>

Terakhir simpan template sobat dan segera lihat hasilnya