Cara 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
1. Kolom add gadget untuk di bawah atau di atas postingan (silahkan pilih salah satu ya)
Tambahkan kode dibawah ini diatas kode ]]></b:skin>
Kemudian cari kode yang seperti di bawah ini :
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
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;}
<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>
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><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 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>Letakan Tulisan / Kode HTML Sobat Disini
<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>Letakan Tulisan / Kode HTML Sobat Disini
Terakhir simpan template sobat dan segera lihat hasilnya
Kalau merasa kesulitan silahkan bertanya melalui komentar, semoga saya bisa menjawabnya :)
0 komentar:
Posting Komentar