Cara Membuat Widget 3 Kolom Di Footer Blog

Cara Membuat Widget 3 Kolom Di Footer Blog

Widget 3 kolom yang saya maksud adalah kolom yang berada dibawah,jadi jika Anda pengen meletakkan widget anda yang pasti footer ini akan sangat berguna, contohnya pada Widget 3 Kolom Di Footer Blog ini.

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

1. login ke blog anda.
2. Klik Tata Letak.
3. Edit Html.
4. Cari code yang mirip dengan code berikut :
#footer-wrapper {
....
....
.... }

5. 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;}

/* Fotter 4-5 kolom tambahkan code css style disini */

#footer1 .widget-content {margin:0 .5em 0 ;}
#footer2 .widget-content {margin:0 .5em 0 ;}
#footer3 .widget-content {margin:0 .5em 0 ;}

/* Fotter 4-5 kolom tambahkan code css disini */

#footer a { color: #3D81EE; text-decoration: none; }
#footer a:hover { color: #cc0000; text-decoration: none; }
#footer a:visited { color: #3D81EE; text-decoration: none;}

6. Kemudian cari kode yang mirip dengan kode diwah ini :
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

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

/* Fotter 4-5 kolom tambahkan code html disini */

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

8. Simpan template, dan lihat hasilnya.

Update :
Karena banyak temen yang menanyakan gimana kalau buat 4-5 kolom, kita tinggal menambahkan kode :

code css style :
#footerNOMOR URUT {width:320px;float:left;background:#FFFFFF; padding: 0px;border: 1px solid #cccccc;}

code css :
#footerNOMOR URUT .widget-content {margin:0 .5em 0 ;}

code html :
<b:section class='footer' id='footerNOMOR URUT' preferred='yes'>
</b:section>

ganti tulisan NOMOR URUT dengan urutan nomornya, dan rubah width/lebar kolom tersebut agar cocok dengan template Anda.

Note :
Agar sesui pada blog anda sebaiknya anda ukur dulu lebar pada blog kamu, sesuaikan juga warna pada kode css seperti yang anda inginkan.

+ komentar + 9 komentar

10 Maret 2012 00.02

wahhhhh ini nih... code yang di tunggu2 akhirnya datang juga.... izin COPAS ye sobat sejati

10 Maret 2012 00.06

Balasan untuk : @zhey five
Silahkan kang, tapi udah tau aturannya kan !

ingat : cantumkan link dari sumbernya, ok !

10 Maret 2012 00.49

Terima kasih tutorialnya :)

10 Maret 2012 12.20

kalau mau dibuat 4 gimana bang
kan kalau 3 bawaan blogger nya juga ada

10 Maret 2012 17.49

saya tunggu yang 4 kolomnya ya, sambil Absen Nih

11 Maret 2012 17.22

ini dia yg ane cari

13 Maret 2012 14.24

menarik sekali dan banyak menbantu, thx sahabat sudah berbagi

23 Maret 2012 14.50

bikin 3 kolom di paling bawah blog gmna gan..?
kaya agan yg d bawah ini...

2 Mei 2012 09.33

wah menarik juga yah ^^ manjur nih thanks berat ^^

Posting Komentar

 
Copyright © 2011. TSC - All Rights Reserved

Distributed By Free Blogger Templates | Lyrics | Songs.pk | Download Ringtones | HD Wallpapers For Mobile

Proudly powered by Blogger