Cara Membuat Footer 3 Kolom di Blog

Caralukman - membuat Footer 3 kolom ini sebetulnya bagus untuk blog anda yang membutuhkan slot Widget yang banyak, ntah untuk iklan,widget yang lainnya dll. membuatnya cukup mudah hanya menambahkan b:section pada element yang disebut dengan footer 3 kolom ini. Sebelumnya anda harus membuat sebuah pembungkus ketiga footer tersebut. Berikan saja nama #footer-kaki. Maka anda harus meletakkan kodenya tepat di atas. oke kita masuk tutorialnya

Berikut Cara Membuat Footer 3 Kolom di Blog


1.) Pertama cari kode </div></body> jika ada <div id='credit'> letakan diatas kode tersebut
2.) Kedua Letakan kode berikut tepat diatasnya </div>

<aside id='footer-kaki'>
isi cara ke3
</aside>

3.)  Ketiga, letakan kode ini tulisan isi cara ke3

<b:section class='footer' id='footer1'/>
<b:section class='footer' id='footer2'/>
<b:section class='footer' id='footer3'/>

4.) Ke4, Masukan CSS dibawah lalu letakan di ]]></b:skin> atau </sytle> 

#footer-kaki{width:100%;overflow:hidden;background:#242424;clear:both;
margin:0 auto;padding: 10px 0;border-top:1px solid #333;}
#footer-kaki a:link {
color:#006699;
text-decoration:none;
}
#footer-kaki a:hover {
color:#c06000;
text-decoration:underline;
}
#footer-kakir a:visited {
color:#045FB4;
text-decoration:none;
}
#footer-kaki h2 {
padding:10px;
margin:0 0 10px 0;
border-bottom:1px dotted #cccccc;
font-size:12px;
color:#fff;
font-weight:bold;
line-height:1.4em;
text-transform:uppercase;
text-align:center;
}
#footer-kaki ul {
padding:0;
margin:0;
color:#333;
}
#footer-kaki ul li {
list-style-type:none;
border-bottom:1px dotted #333;
padding-left:17px;
margin-top:2px;
}
#footer1 {float:left;width:31%;overflow:hidden;}
#footer2 {float:left;width:32%;overflow:hidden;padding-left:12px}
#footer3 {float:right;width:34%;overflow:hidden;}


5.) Save atau Simpan

tidak usah banyak fikir langsung Praktekan Sob, dan jika ada yang membingungkan silahkan berkomentar,,
Selamat Mencoba :D

UPDATE! 

 membuat footer 3 kolom seperti Caralukman - anda tinggal copas dan caranya seperti tutorial diatas.
 1.) kode untuk HTMLnya.

<div id='kaki'>
<div class='kaki-footer'>
<b:section class='kaki' id='footer1' preferred='yes'>
<b:section class='kaki' id='footer2' preferred='yes'>
<b:section class='kaki' id='footer3' preferred='yes'>
</div>
</div>
 2.) kode untuk CSSnya.
/* KAKI */

#kaki{background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji2dYpTLj9KvM4PHdiHLOsnpaEiPS4moAIRWThrDPrkyDm_ysUlA4Zpec150HIabreN2Yr6TItar1xFSnWhoCWEVTJ7HuV0RdZrCIz5MH2TTInAeDXsrRnDmjuPgEGWM8dLf7j02GA5V7x/s1600/oombgbottom.png&#39;) no-repeat scroll left top #292929;border-top:4px solid #117AC9;width:100%;padding:0;position:relative;clear:both;overflow:hidden;}
.kaki-footer{color:#fff;font-size:14px;line-height:15px;overflow:hidden;padding:0;}
.kaki{float:left;width:30.5%;margin:10px;}
.kaki .widget{margin-bottom:30px}
.kaki h2{font-size:20px;padding-bottom:8px;margin-bottom:8px;line-height:1.3em;color:#fff;font-weight:normal}
.kaki .widget-content{line-height:17px}
.kaki ul{list-style:none;color:#666;margin:0;padding:0}
.kaki li{text-indent:0;line-height:1.4em;margin:0;padding:2px 0 3px 0px;font-size:14px;text-shadow:0 -1px 0px #000}
.kaki a:link,.footer li a:visited{color:#239189;text-decoration:none}
.kaki li a:hover{color:#999}

19 Responses to "Cara Membuat Footer 3 Kolom di Blog"

  1. keren gan :D
    tapi kalo dipasang di template ane kayaknya berantakan deg ntar hahah :v

    ReplyDelete
    Replies
    1. Emang bener sob, coba taronya di skin deh, cuman gak masuk cssnya tapi rapi..

      Coba aja pake div id

      Delete
    2. Mau share bagai mana cara sadap ANDROID, BB dan IPHONE dan SYMBIAN juga berbagai macam ponsel.


      kunjungi : WWW.PENYADAPPHONE.COM

      Info lengkap tentang fiturnya dibawah ini:

      1.Sadap BBM
      2.Sadap SMS
      3.Sadap PANGGILAN SUARA
      4.Sadap FOTO DAN VIDEO DI GALERY
      5.Sadap LOKASI [MELALUI SATELIT]
      6.Sadap WHATSAPP
      7.Sadap FACEBOOK
      8.Sadap BEETALK
      9.Sadap SKYPE
      10.Sadap Email/ YAHOO GMAIL DAN HOTMAIL
      11.Sadap SUARA SEKITAR
      12.Sadap KONTAK NAMA
      13.Sadap HISTORY BROWSER
      14.Sadap KAKAO TALK, PATH

      Dan masih banyak lainnya...

      SADAP SEMUA RAHASIA DI PONSEL DIA SECARA JARAK JAUH, PASANGAN SUAMI/ISTRI ANDA YANG SEDANG SELINGKUH ATAU MELINDUNGI ANAK REMAJA ANDA DARI PERGAULAN BEBAS.

      KETENTUAN/ KEBIJAKAN PENGGUNAAN BERLAKU.


      Info lengkap, Silahkan
      Kunjungi Website : WWW.SADAP.COM

      Delete
  2. nah ini dia yang gue cari-cari bro :D heheh thanks for sharing yaa bro :D

    ReplyDelete
  3. berarti untuk menambahkan kolom sampai 4 atau 5 bisa dengan cara ini gan? yang jadi masalah itu biasanya mengatur jaraknya sob :( asli pusing

    ReplyDelete
    Replies
    1. Lihat dulu sob berapa luas wrappernya, lalu dibagi 3 dan jangan pas banget, soalnya ada yang buat padding..

      Delete
  4. Punya ane malah udah ada 4 gan :)) hahaha,

    ReplyDelete
  5. Mantap nih..bisa nambah space difooter..ijin nyoba sob..

    ReplyDelete
  6. Nice Artikel Gan. Ijin coba.. :D

    ReplyDelete
  7. kalau di pasang di template yang download bisa gan, dan kalo bisa, berat gak

    ReplyDelete
  8. Mudah + gampang banget buat dipelajari ^_^

    ReplyDelete
  9. terimakasih banyak sob, sangat bermanfaat, sebenarnya sih 2 kolom juga udah oke..

    ReplyDelete
  10. Terimakasih banyak gan, sangat bermanfaat sekali tutorialnya...salam sukses buat admin.

    ReplyDelete

/**************** READ ME ****************/

---> Blog ini menggunakan Sistem DoFollow, jadi manfaatkan kesempatan ini untuk komentar menggunakan Anonymous atau Name/URL <---

-----------------------------
NB: Selama Bukan Mengandung Pornografi/Unsur Kekerasan
-----------------------------