Membuat 2 kolom dibawah Postingan II :blog go blog

Membuat 2 kolom dibawah Postingan II, setelah beberapa hari yang lalu saya membuat tutorial Cara Membuat 2 kolom widget dibawah postingan sekarang saya akan berbagi Membuat 2 kolom dibawah Postingan dengan cara yang kedua, pada cara yang kedua ini ada kelebihan dimana pemasangan widgetnya tidak secara langsung di halaman edit HTML melainkan berada di halaman Tata letak sehingga kalau sudah memasang cara ini kita akan secara mudah memasang widgetnya ditambah lagi dengan cara ini kita bisa memasang beberapa widget langsung pada tiap elemennya.biar tidak panjang lebar kita langsung saja ke pokok bahasan saja. berikut langkah-langkahnya ;

Seperti biasa saja login ke blogger
klik rancangan/template jangan lupa setiap mau ngedit HTML download lengkap dulu ya sobat, buat jaga-jaga aja. kalau ada salah tinggal ngembaliin, alasannya.
Klik edit HTML klik lanjutkan kemudian cari kode ]]></b:skin> setelah ketemu letakan kode dibawah ini tepat diatas kode tersebut.

#bawahpost h2{
font-size:13px;
font-weight:bold;
color:#000;
border-bottom:2px solid #000000;
padding-left:5px;
}
#bawahpost{
width:600px;
}
#bawahleft{
width:290px; /*lebar kolom kiri*/
float:left;
margin:4px;
}
#bawahright{
width:290px; /*lebar kolom kanan*/
float:right;
margin:4px;
}

kode berwarna merah itu sesuaikan dengan lebar halaman postingan sobat yang biasanya lebar postingan berada pada kode CSS "main-wrapper" kemudian lihat kode yang berwarna biru itu lebar kolom yang akan dibuat dimana ukurannya yaitu kode yang berwarna merah dibagi 2 setelah dikurangi margin/padding.
Selanjutnya sobat cari kode dibawah ini, biar kodenya akan tampil seperti dibawah ini maka sobat jangan mencentang Expand Template Widget yang ada di atas.

<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>

Setelah ketemu kode seperti diatas sobat tambahkan kode dibawah ini tepat dibawah kode yang berwarna merah.

<div id='bawahpost'>
<b:section class='bawahleft' id='bawahleft' showaddelement='yes'/>
<b:section class='bawahright' id='bawahright' showaddelement='yes'/>
</div>

Dan tampilannya akan seperti dibawah 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='bawahpost'>
<b:section class='bawahleft' id='bawahleft' showaddelement='yes'/>
<b:section class='bawahright' id='bawahright' showaddelement='yes'/>
</div>
</div>

Setelah selesai simpan template sobat.
kemudian sobat buka halaman tata letak maka pada halaman tersebut sudah ada 2 kotak elemen tambah gadget, selanjutnya sobat tinggal memasukan kode widget yang mau dipasang dengan cara seperti biasa waktu menambah widget.

Cara ini bisa sobat gunakan untuk menambah 2 kolom diatas postingan caranya hanya dengan merubah penempatan posisi kode yang berwarna biru tepat menjadi diatas kode yang berwarna merah.

sehingga seperti ini;

<div id='main-wrapper'>
<div id='bawahpost'>
<b:section class='bawahleft' id='bawahleft' showaddelement='yes'/>
<b:section class='bawahright' id='bawahright' showaddelement='yes'/>
</div>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>