Cara Membuat Footer Menjadi 3 Kolom

Wrote by 5 Comments

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...

Tags:

Share:

5 comments

  1. Anonymous13 November 2012 at 19:57

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

    ReplyDelete
  2. Unknown13 November 2012 at 23:33

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

    ReplyDelete
  3. ricky16 January 2013 at 11:38

    makasih gan tipsnya, sangat berguna nih

    ReplyDelete
  4. Unknown16 January 2013 at 13:52

    @rickyyupz, makasih juga da berkunjung :f

    ReplyDelete
  5. 91 Blog19 April 2013 at 15:27

    Hmm, kalo yg 4 kolom ada ga gan ?

    ReplyDelete