Tuesday, November 2, 2010

Cara Membuat 3 kolom Gadget Di Bawah Footer

Temen2 mau memodifikasi blog temen2 dengan menambah banyak gadget??
Kaya punya saya.. Temple yang echa miliki sekarang mempunyai banyak kolom yang saya tambahkan sendiri...
yang saya bahas kali ini adalah menambahkan 3 kolom gadget di bawah footer seperti gambar di bawah ini..




Nah.. temen2 juga pengen tambahin kolom gadget seperti gambar di atas kan??
oke.. langsung aja temen2 masuk ke Rancangan --> Edit HTML
Temen2 harus mencari code #footer-wrapper atau yang mirip saja..
Kalau sudah ketemu, hapus code tersebut dan ganti dengan code berikut :
/* ----- 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;}
 Setelah itu temen2 cari code yang mirip dengan :
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>


Kalau sudah ketemu, temen2 ganti dengan code berikut :
<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 dan selesai deh..
Temen2 bisa edit ukuran kolom gadget menurut ukuran temple temen2..
Jadilah sekreatif mungkin untuk merubah2 code2 tersebut..

Hasil nya :





Semoga berhasil^^

0 comments:

Post a Comment

Tulis Komeng atau Kritik Anda Disini :D

 

Copyright © KlikByKlik Design by Septian Wiranata | Blogger Theme by Blogger Template de luxo | Powered by Blogger