Membuat 2 Widget Berjajar Diatas Postingan Hanya di Homepage

Blogger Script Note - Kali ini akan Membuat 2 Widget Berjajar Diatas Postingan Hanya di Homepage. Caranya sangat mudah sebagaimana langkah-langkah berikut ini.

Cari kode ]]></b:skin> dan letakkan kode di bawah ini di atasnya

#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;}

Cari kode <div id='main-wrapper'> dan letakkan kode di bawah ini di bawahnya dibagian mana anda suka, kalau ada banyak widget silahkan di sisipkan di salah satunya

<!-- Widget di atas postingan 2 kolom start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
</b:if></b:if>
<!-- Widget di atas postingan 2 kolom end -->

Kode tersebut saya letakkan tepat di atas kode ini  <b:section class='main' id='main' showaddelement='no'> karena di atasnya sudah ada 2 widget lainnya.

Simpan dan lihat hasilnya.

Tweet