Minggu, 01 Desember 2013
Cara Membuat 3 Widget di bawah Footer
Seperti biasa..Kali ini saya mau share tentang bagaimana cara membuat 3 Widget di bawah Footer seperti pada gambar di bawah ini :
Nah, bagi anda yang mau membuatnya silahkan ikuti langkah-langkahnya sebagai berikut :
1. Login ke Akun Blogger
2. Klik Design
3. Klik Edit HTML
4. Cari kode #footer-wrapper
5. Kalau sudah ketemu ganti kode tersebut dengan kode di bawah 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;}
=============================================================================#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;}
6. Kemudian anda cari kode yang mirip dengan:
<div id=footer-wrapper>
<b:section class=footer id=footer/>
</div>
7. Kalau sudah ketemu ganti dengan kode 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 -->
=============================================================================<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 -->
8. Terakhir, Simpan dan lihat hasilnya...anda juga bisa menyesuaikan ukuran widget atau Gadget tersebut sesuai dengan Template anda.
Semoga bermanfaat.....!
Sumber : http://gwe-echa.blogspot.com/
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar