Menambah Gaget 2 Kolom di Bawah Postingan

Setelah sebelumnya aku posting bagaimana menambah 3 kolom pada footer, kali ini aku mau bahas bagaimana cara menambah 2 kolom lagi diatas atau dibawah tubuh posting. Coba sobat perhatikan gambar disamping tersebut, disitu ada dua kolom baru dibawah kolom posting. Dengan menambahkan dua kolom dibawah posting seperti pada gambar tersebut, sobat bisa menyimpan gadget/widget dibawah posting, misalkan untuk artikel berkaitan, iklan ataupun gadget/widget yang lainnya.
Kalo sobat tertarik membuatnya di template BLOG sobat, ikuti langkah berikut :
1. Masuk ke menu Layout/Tata Letak
2. Pilih Edit HTML lalu backup terlebih dahulu template sobat.
3. Cari kode ]]></b:skin>, gunakan CTRL+F untuk memudahkan pencarian.
4. Kalo udah ketemu, paste kode dibawah ini tepat diatas kode ]]></b:skin>

/*Under Post
-----------------------------*/
#underpost h2{
font-size:13px;
font-weight:bold;
color:#B8002E;
border-bottom:2px solid #000000;
padding-left:5px;
}
#underpost{
width:480px;
}
#underleft{
width:230px; /*lebar kolom kiri*/
float:left;
margin:5px;
}
#underright{
width:230px; /*lebar kolom kanan*/
float:right;
margin:5px;
}

Perhatikan kode yang berwarna merah width:480px, itu merupakan lebar dari kolom posting BLOG. Sesuaikan saja dengan lebar pada template sobat, biasanya untuk mengetahui lebar/width kolom posting, kita cari kode seperti ini :

#main-wrapper {
width: 480px;

Misalkan saja lebar/width kolom posting seperti contoh diatas yaitu 480px, maka bagi lebar tersebut menjadi dua, karena kita akan membuat dua kolom dibagian kiri dan kanan, sisakan nilainya untuk margin dan padding untuk memberi jarak antara gadget yang lain dengan gadget yang lain.

5. Kalo sudah, cari kode 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>

- Kalo sobat mau menambahkan dua kolom dibawah posting, sobat paste kode dibawah ini tepat dibawah kode yang berwarna merah tersebut.

<div id='underpost'>
<b:section class='underleft' id='underleft'/>
<b:section class='underright' id='underright'/>
</div>

- Kalo sobat mau menambahkan dua kolom diatas posting, sobat paste kode dibawah ini tepat diatas kode yang berwarna merah tersebut.

Sehingga kurang lebih kodenya akan terlihat seperti ini :
* Untuk dua kolom dibawah posting :

<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='underpost'>
<b:section class='underleft' id='underleft'/>
<b:section class='underright' id='underright'/>
</div>
</div>

* Untuk dua kolom diatas posting :

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

6. Simpan dan perhatikan template sobat pada bagian page elemen, akan ada dua kolom tambahan dibawah post body atau tubuh posting.

Baca Juga: