Cara Membuat Footer Menjadi 3 Kolom

Hallow sob, pada kesempatan kali ini Kaka-jr akan share sedikit tutorial tentang bagaimana Cara Membuat Footer Menjadi 3 kolom. Mungkin sebagian dari sobat blogger mempunyai atau memakai template yang ga ada kolom footernya. Kenapa sob? Pengen nambahin kolom footer di template kalian? Nah, kebetulan banget sobat mampir kemari karena Kaka-jR punya solusinya buat kalian. okey, langsung aja ke tutorialnya...


Cara Membuat Footer Menjadi 3 kolom. 


Login ke blogger.-->Klik Tata Letak. -->Klik Edit HTML.

Kemudian sobat cari kode ]]></b:skin> 


Biar lebih gampang carinya silakan sobat tekan tombol CTRL+F .

Selanjutnya copy dan paste code di bawah ini tepat di atas kode ]]></b:skin> .

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

Setelah itu sobat cari code dibawah ini .

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

Nah, kalau sudah ketemu hapus code <b:section class='footer' id='footer'/> kemudian ganti bengan code dibawah ini .

<div id='footer-column-divide'>
<div id='footer1' style='width: 30%; 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: 40%; 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: 30%; 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>

Klik Simpan Template .



Jika sudah selesai maka hasilnya akan terlihat seperti gambar di bawah ini .



grey

Selesai sudah, sob..
Gimana mudah kan? Okey sekian dulu tutorial dari Kaka-jR tentang Cara Membuat Footer Menjadi 3 kolom. Selamat mencoba sob...

Share:

5 comments

  1. kok ditempat saya gak ada kode ini b:section class='footer' id='footer'

    ReplyDelete
  2. @Limit Post
    coba cari yang mirip/mendekati sob..
    soalnya tiap template mempunyai code html yg berbeda" sob;l

    ReplyDelete
  3. makasih gan tipsnya, sangat berguna nih

    ReplyDelete
  4. @rickyyupz, makasih juga da berkunjung :f

    ReplyDelete
  5. Hmm, kalo yg 4 kolom ada ga gan ?

    ReplyDelete