Membuat footer 3 kolom dibawah posting

Membuat footer 3 kolom dibawah postinganFooter 3 kolom yang saya maksud adalah kolom yang berada dibawah,jadi jika kamu pengen meletakkan widget anda yang pasti footer ini akan sangat berguna juga,saya juga baru menambahkan footer 3 kolom pada template saya ini, lhatlah keren gak ya ha ha ha…..Footer wraper dari template klasik hanya mempunyai satu widget, begitu pula template – template minima hasil design para master web.

Bagi anda yang ingin mengganti footer – nya menjadi 3,4,atau 5 kolom, anda bisa menggati kodenya dengan kode dibawah ini,caranya :

>>>login ke blog anda
>>>Klik Tata Letak
>>>Edit Html
>>>Cari kode #footer-wrapper atau yang mirip seperti itu, kalo sudah ketemu hapus kode tersebut dan ganti dengan kode dibawah ini:



/* —– FOOTER —– */

#footer-wrapper {
clear: both;width: 100%;
word-wrap: break-word;
overflow: hidden;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: #0000FF;
border: 1px solid $bordercolor;
}
#footer {
margin: 0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
text-align: left;width: 960px;
color: #000000;
font: $footerTextFont;
line-height: 1.6em;
}
#footer h2 {
margin: 10px 0px 0px 0px;
padding: 3px 0px 3px 0px;
color: #cc0000;
font: $footerTextFont;
}
#footer1 {width:320px;float:left;background:#FFFFFF; padding: 0px;border: 1px solid #cccccc;}
#footer2 {width:320px;float:right;background:#FFFFFF; padding: 0px;border: 1px solid #cccccc;}
#footer3 {width:320px;float:left;background:#FFFFFF; padding: 0px;border: 1px solid #cccccc;}
#footer1 .widget-content {margin:0 .5em 0 ;}
#footer2 .widget-content {margin:0 .5em 0 ;}
#footer3 .widget-content {margin:0 .5em 0 ;}
#footer a { color: #3D81EE; text-decoration: none; }
#footer a:hover { color: #cc0000; text-decoration: none; }
#footer a:visited { color: #3D81EE; text-decoration: none;}



>>Kemudian cari kode yang mirip dengan kode diwah ini:

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

>>>setalah menemukan code diatas selanjutnya ganti dengan code dibawah ini:

<div id=’footer-wrapper’>
<div id=’footer’>

<b:section class=’footer’ id=’footer1′ preferred=’yes’>
</b:section>

<b:section class=’footer’ id=’footer2′ preferred=’yes’>
</b:section>

<b:section class=’footer’ id=’footer3′ preferred=’yes’>
</b:section>

</div>
<div style=’clear:both;’/>
</div><!– end footer-wrapper –>

>>>Simpan template
>>>Selesai,Kode di atas untuk membuat footer 3 kolom

NB:agar sesui pada blog anda sebaiknya anda ukur dulu lebar pada blog kamu, sesuaikan juga warna pada kode css seperti yang anda inginkan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: