Thursday, June 1, 2017

Tutorial Cara Menambah Dua Kolom Widget di Bawah atau Atas Post Body

Salam blogger
Salah satu trik untuk menambah asesoris blog anda yang terasa kelihatan monoton, kini anda dapat membuat kolom widget yant berada di bawah atau di atas body. Sudah banyak tutorial tengan Cara Menambah Dua Kolom Widget di Bawah atau Atas Post Body yang saya baca untuk panduan ini. Namun, rupanya hanya trik ini yang cocok dengan template blog saya. 

Bagi anda yang berminat dan cocok dengan template blog, bisa anda coba untuk mendapatkan Cara Menambah Dua Kolom Widget di Bawah atau Atas Post Body .

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:
#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! 
Tahap pertama selesai. 
Tahap berikutnya sebagai berikut:

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'>
<b:section class='Spiceleft' id='Spiceleft'/>
<b:section class='Spiceright' id='Spiceright'/>
</div>

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:
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:
<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'>
<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.
Cara Menambah Dua Kolom Widget di Bawah atau Atas Post Body

Demikian cara Cara Menambah Dua Kolom Widget di Bawah atau Atas Post Body
Previous Post
Next Post

0 komentar: