Cara Menambah Dua Kolom Widget di Bawah atau Atas Post Body
August 13, 2014
Cara Menambah Dua Kolom Widget di Bawah atau di Atas Post Body Halaman Depan Blog
JIKA halaman depan (homepage) blog Anda terasa "monton", maka jadikan ia menarik dengan menambah dua kolom widget baru di bawah atau di atas blog posts (daftar posting terbaru) halaman depan.
Dua kolom itu bisa diisi posting terbaru per label (kategori), posting terpopuler, gambar, atau apa saja sebagamana halnya widget/gadget blog.
Ini caranya:
1. Template > Edit HTML
2. Cari (Ctrl + F) kode ]]></b:skin>
#Spicy Column h2{
font-size:13px;
font-weight:bold;
color:#B8002E;
border-bottom:2px solid #000000;
padding-left:5px;
}
#Spicy Column{
width:600px; /*Change width */
}
#Spiceleft{
width:295px; /*width of the left column*/
float:left;
margin:4px;
}
#Spiceright{
width:295px; /*width of the right column*/
float:right;
margin:4px;
}
Save Template!
JIKA halaman depan (homepage) blog Anda terasa "monton", maka jadikan ia menarik dengan menambah dua kolom widget baru di bawah atau di atas blog posts (daftar posting terbaru) halaman depan.
Dua kolom itu bisa diisi posting terbaru per label (kategori), posting terpopuler, gambar, atau apa saja sebagamana halnya widget/gadget blog.
Ini caranya:
1. Template > Edit HTML
2. Cari (Ctrl + F) kode ]]></b:skin>
3. Copy + Paste kode berikut ini di atas kode ]]></b:skin> tadi:
font-size:13px;
font-weight:bold;
color:#B8002E;
border-bottom:2px solid #000000;
padding-left:5px;
}
#Spicy Column{
width:600px; /*Change width */
}
#Spiceleft{
width:295px; /*width of the left column*/
float:left;
margin:4px;
}
#Spiceright{
width:295px; /*width of the right column*/
float:right;
margin:4px;
}
Save Template!
Tahap pertama selesai.
Tahap berikutnya sebagai berikut:
<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>
2. Tambahkan kode berikut ini sebelum kode setelah kode </b:section> atau sebelum </div>
<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 id='Spicy Column'>
Untuk menambah 2 kolom DI ATAS Post Body:
1. Cari (Ctrl + F) kode <div id='main-wrapper'>
2. Copy + Paste kode berikut ini di atas kode <div id='main-wrapper'>
<div id='Spicy Column'>
1. Cari (Ctrl + F) kode <div id='main-wrapper'>
2. Copy + Paste kode berikut ini di atas kode <div id='main-wrapper'>
<div id='Spicy Column'>
<b:section class='Spiceleft' id='Spiceleft'/>
<b:section class='Spiceright' id='Spiceright'/>
</div>
3. Save!
3. Save!
4. Klik "Layout" dan Tekan F5 (Refresh) untuk melihat ada dua kolom baru di atas Blog Posts.
Untuk menambah 2 kolom DI BAWAH Post Body:
Untuk menambah 2 kolom DI BAWAH Post Body:
1. Cari (Ctrl + F) kode 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>
2. Tambahkan kode berikut ini sebelum kode setelah kode </b:section> atau sebelum </div>
<div id='Spicy Column'>
<b:section class='Spiceleft' id='Spiceleft'/>
<b:section class='Spiceright' id='Spiceright'/>
</div>
Hasilnya akan seperti ini:
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<div id='Spicy Column'>
<b:section class='Spiceleft' id='Spiceleft'/>
<b:section class='Spiceright' id='Spiceright'/></div>
</div>
Save Template!
Kini mestinya dua widget tambahan sudah muncul di atas atau di bawah Blog Posts. Anda tinggal menambahkan (Add Gadget) di sana untuk mengisinya dengan apa saja yang bisa dimunculkan di sidebar widget.
Demikian cara Cara Menambah Dua Kolom Widget di Bawah atau Atas Post Body. Good Luck and Happy Blogging!
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
nah ini yang saya cari mas, tapi berlaku untuk template new jhony wuss nggak mas soalnya saya mau coba tambahin di bawah post body. thanks
ReplyDeletekode main wrapper nya nggak ketemu di template johny wuss v2 mas
ReplyDeletecari lebih teliti.... gunakan Ctrl+F
DeleteKalo gak ada main-wrapper mana mungkin bener tuh tampilan blog :)
kalo div id main wrapper gak ada mas, yang ada div class main wrapper, itu sama aja ya ? atau beda?
ReplyDeleteya benar, sama saja... yang penting main-wrapper :)
DeleteSampai di tahap pertama itu yang muncul apa aja min?
ReplyDeletesaya sudah berhasil tapi kenapa dia tidak menyamping,, tapi atas bawah mas..
ReplyDeleteatur ukuran lebarnya, kecilin, 600, 290 kecilin jadi berapa gitu biar pas....
DeleteThis comment has been removed by the author.
ReplyDeletemas kalo bikin daftar menu di atas untuk privacy, disclaimer dll. gimana caranya mas?
ReplyDeletehttp://contohblognih.blogspot.com/2015/08/cara-membuat-menu-about-sitemap-blogger.html
Deleteterima kasih sangat informasinya gan ... semoga dapat memberikan manfaat
ReplyDeletegan ane udah coba masukin "spicy columnnya" ane pilih yg dibawah, tapi kenapa jadi nya diatas main layout ya?
ReplyDeleteterima kasih untuk informasinya gan.
ReplyDeleteTerimakasih Infonya Sangat Bermanfaat
ReplyDeleteterima kasih banyak ilmunya, salam semangat selalu berkarya.
ReplyDelete