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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji2dYpTLj9KvM4PHdiHLOsnpaEiPS4moAIRWThrDPrkyDm_ysUlA4Zpec150HIabreN2Yr6TItar1xFSnWhoCWEVTJ7HuV0RdZrCIz5MH2TTInAeDXsrRnDmjuPgEGWM8dLf7j02GA5V7x/s1600/oombgbottom.png') 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}

Posted by Unknown

Tweet