Cara membuat 3 kolom gadget dibawah header

Pada postingan kali ini kita akan membahas cara menambah 3 kolom Gadget dibawah header, caranya sangat mudah sekali, ikuti langkah - langkah berikut ini :

1. Sign in di blogger
2. Klik Opsi lainnya
3. Klik Templete
4. klik Edit HTML
5. Centang tulisan Expand Widget Templates
6. Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
7. Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin> 


<div id='box3' style='width: 35%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col3' preferred='yes' style='float:left;'/>\


8. Setelah itu cari kode dibawah ini :


1. <div id='main-wrapper'>  atau kode
2. <div id="main-outer"> atau kode
3. <div class='main-outer'>  sesuai dengan versi HTML nya kawan (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)


9. Copy paste kode dibawah ini dan letakan diatas salah satu kode diatas


<div id='box-kolom-widget'>
<div id='box1' style='width: 35%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 35%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col3' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>


10. Kli Pritinjau, siapa tahu ada kesalahan
11. Klik Simpan


Selamat mencoba

Baca juga artikel menarik lainnya :