Cara membuat 3 kolom widget di atas Footer pada blog
Cara membuat 3 kolom widget di atas Footer pada blog
Assalamu'alaikum.wr.wb.
Bagaimana kabar sahabat blogger semua, amin saya punya kabar baik disini :). Alhamdulillah saya dapat merampungkan postingan kali ini, setelah saya kemarin meriview Mau Bikin Website + Hosting Murah AbizZ? Ke Rajawebhost.com aja! .
Kali ini saya akan berbagi mengenai cara menambah 3 kolom widget di atas Footer pada blog kita, yang mungkin belum ada Footernya, seperti pada templete blog saya ini. oke langsung saja.
Kali ini saya akan berbagi mengenai cara menambah 3 kolom widget di atas Footer pada blog kita, yang mungkin belum ada Footernya, seperti pada templete blog saya ini. oke langsung saja.
- Kita masuk ke akun Blogger kita
- Klik Rancangan, kemudian Edit html 'Untuk menghindari kerusakan pada templete kita pada saat mengedit, centang Expand Templete Widget'
- Tekan ctrl+f untuk pencarian cepat, dan ketikan kode ]]></b:skin>
- Kemudian copy dan paste kode dibawah ini tepat di atas ]]></b:skin>
#tiga-kotak-bawah {
clear:both;
border-top:3px double #e6e4e3;
}
.kolom-kotak {
padding:0px 10px 10px 10px;
}
clear:both;
border-top:3px double #e6e4e3;
}
.kolom-kotak {
padding:0px 10px 10px 10px;
}
5. Setelah itu cari kode <div id='footer'>
6. Kita lanjut copy kode dibawah ini, di atas kode <div id='footer'>
<div id='tiga-kotak-bawah'>
<div id='kotak1' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol1' preferred='yes' style='float:left;'/>
</div>
<div id='kotak2' style='width: 34%; float: left; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol2' preferred='yes' style='float:left;'/>
</div>
<div id='kotak3' style='width: 33%; float: right; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
<div id='kotak1' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol1' preferred='yes' style='float:left;'/>
</div>
<div id='kotak2' style='width: 34%; float: left; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol2' preferred='yes' style='float:left;'/>
</div>
<div id='kotak3' style='width: 33%; float: right; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
7. Terakhir kita pertinjau dulu untuk memastikan tiada kesalahan dalam pengeditan kita, kalau tidak ada masalah, klkik Simpan templete.
atau kalau error coba yang ini
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;'/>\
Setelah itu cari kode dibawah ini :
<div id='main-wrapper'> atau kode
<div id="main-outer"> atau kode
<div class='main-outer'> sesuai dengan versi HTML nya kawan (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
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>