Cara Membuat 2,3 atau 4 Kolom di bawah Postingan blog

Hai sobat Dunia IT...!!
Kali ini saya akan posting bagaimana Cara Membuat Footer 2,3 atau 4 di bawah Postingan Blog..
Gausah Bingung2 ane sudah siapkan script nya :D

Tidak panjang lebar karena bakalan panjang nanti berat lagi loadingnya - langsung saja yah ke pembahasan :

1. Login ke Blogger..
2. Masuk ke template >> Edit HTML 
3. Jangan lupa centang expland template widget 
    Nb: untuk jaga-jaga backup dulu template sobat .
4. Kalau udah, cari kode ]]></b:skin> Dan letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

#footer-column-divide clear:both; } .footer-column { padding: 10px; }

5. Berikutnya, cari kode yang mirip seperti kode dibawah ini:

<div id='footer'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

ATAU 

<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

Note :

Biasanya, setiap template memiliki kode yang berbeda-beda.Dalam hal ini, jika Anda tidak dapat menemukan kode <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' />

6. Yang perlu sobat lakukan adalah copy kode dibawah ini tepat dibawah salah satu kode 

<div id='footer'> atau   <div id='footer-wrapper'>

7. Untuk membuat Footer 2 kolom dibawah postingan:

<div id='footer-column-divide'> <div id='footer1' style='width: 50%; float:left; margin:0; text-align:left;'> <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/> </div> <div id='footer2' style='width: 50%; float: left; margin:0; text-align: left;'> <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/> </div> <div style='clear:both;'/> </div> </div>

8. Untuk Membuat Footer 3 Kolom dibawah postingan:

<div id='footer-column-divide'> <div id='footer1' style='width: 33%; float:left; margin:0; text-align:left;'> <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/> </div> <div id='footer2' style='width: 33%; float: left; margin:0; text-align: left;'> <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/> </div> <div id='footer3' style='width: 33%; float: right; margin:0; text-align: left;'> <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/> </div> <div style='clear:both;'/> </div> </div>

9. Untuk Membuat Footer 3 Kolom dibawah Postingan:

<div id='footer-column-divide'> <div id='footer1' style='width: 25%; float:left; margin:0; text-align:left;'> <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/> </div> <div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'> <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/> </div> <div id='footer3' style='width: 25%; float: right; margin:0; text-align: left;'> <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/> </div> <div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'> <b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/> </div> <div style='clear:both;'/> </div> </div>

10. Lalu simpan template sobat dan lihat hasilnya

--SEMOGA BERHASIL--   Kalau ada masalah silahkan komentarnya, apalagi kalau berhasil hehe.

Share this

Share on FacebookPlus on Google+