Cara Membuat Fixed Footer

Buka footer-nya di buat fixed, tapi kita akan menambahkan fixed di bagian footer. Bingung? Ehmm lihat gambar di bawah ini!
Click to preview
Atau untuk demo livenya lihat di blog ini saja! Jika sudah mengerti mari kita bahas bagaimaan cara membuatnya.

1. Login ke blog anda > Design >> Edit HTML
2. Cari kode ]]></b:skin>
3. Copy paste kode ini di bawah kode ]]></b:skin>
#footer img {
/* margin: 0px 0px -8px 0px; */
vertical-align: middle;
}
#footer p.info {
float: right;
padding-right:40px;
line-height: 1.2;
height: 100%;
vertical-align: bottom;
}
#footer p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:40px;
vertical-align: bottom;
line-height: 1.2;
}
#footer a {
color: #333;
}
#footer {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 5px solid #f5f5f5;
background-color: #f5f5f5;
width: 100%;
left: 0px;
text-align: left;
color: #888;
font-family: Verdana;
font-size: 11px;
z-index:10000;
opacity: 0.9;
filter: alpha(opacity: 90);
bottom:0;
}
6. Sekarang copy-paste kode di bawah dan letakan di atas kode </body>
<div id='footer'>

<p><img border='0' src='http://i388.photobucket.com/albums/oo322/arif_bucket/pavatar_large-2.png'/>&#160;&#160;<a href='http://abi-galoga.blogspot.com/'>Dimas Abi Galoga</a>&#160;&#169;&#160;2008-2009&#160; </p>

<p class='info'>Powered by <a href='http://www.blogger.com'>Blogger</a> | Gadget by <a href='http://abi-galoga.blogspot.com' target='_blank'>Abi-galoga</a><br/>Best viewed in Mozilla Firefox.
</p>

</div>
Ganti yang berwarna merah dengan milik anda sendiri

7. Save Templates. 

Jangan cuma baca. Comment juga ya untuk kritik dan saran TERIMA KASIH !

0 komentar:

Post a comment

Kotak Komentar Klasik Klik Di sini

« Prev Next » Home