Cara Membuat 2 Kolom Elemen Di Bawah Header

Farhan Share - selamat siang sobat farhan, selamat berakhir pekan. Pada postingan atau kesempatan kali ini farhan akan tetap fokuskan topik pembicaraan kita tenatng tutorial bl0g, yakni cara membuat dua kolom elemene di bawah header, sebenarnya apasih fungsi dan kelebihan membuat 2 kolom elemen di bawah header seperti ini? ya sobat farhan dengan kita membuat 2 kolom elemen di bawah header akan banyak manfaat yang akan kita peroleh salah satunya adalah, untuk pemasangan iklan dengan seperti ini kita bisa menempatkan iklan yang luasnya 728x90, di bagian kiri, dan di bagian kanan bisa kita isi dengan pengikut atau facebook fanpage yang kecil ukuran widgetnya, sehingga blog kita terlihat lebih dinamis dan juga elegant, baik pastinya sobat farhan sudah penasaran bukan ingin tahu dan menerapkanya, baik farhan mulai saja langkah-langkahnya, di simak baik-baik ya.

1. Login Ke Blogger.

2. Pilih Template.

3. Pilih Download Full Template terlebih dahulu.

4. Pilih Edit HTML.

5. Centang Box "Expand Template Widget".

6. Selanjutnya sobat cari kode ]]></b:skin> menggunakan CTRL+F, selanjutnya sobat letakkan kode di bawah ini persis di atas kode ]]></b:skin>.

#box-kolom-widget { clear:both; } .box-widget { padding:0px 10px 10px 10px; border:1px dotted $bordercolor; }

7. Masih Dalam Posisi Edit HTML, selanjutnya sobat cari kode <div id='main-wrapper'> atau <div id="main-outer">, lalu sobat letakkan kode di bawah ini persis di atas kode <div id='main-wrapper'> atau <div id="main-outer">.

</div> <div id='box-kolom-widget'> <div id='box1' style='width: 50%; 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: 50%; float: left; margin:0; text-align: left;'> <b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/> </div> <div style='clear:both;'/>

Catatan : Kode yang "box 1 width 50 %" dan "box 2 width 50%" bisa sobat ganti dengan ukuran lebar Elemen kiri dan kanan, sesuai dengan keinginan sobat. 

8. Klik "Save" dan Selesai.

Demikian sobat farhan tutorial blog tentang cara membuat 2 kolom elemen di bawah header, semoga bermanfaat, dan selamat mencoba, bila sobat mempunyai pertanyaan seputar tutorial ini, sobat bisa tinggalkan komentar di bawah.