Membuat Fixed Footer

Fixed-Footer, itu adalah salah satu trik yang saya gunakan untuk template khusus ini. Nah, untuk demonya ya silahkan saja lihat blog saya (*dengan catatan tanggal 10 November 2010). Atau untuk gambarnya, silahkan saja lihat gambar dibawah ini dan klik pada gambar untuk Zoom.

Bagamana? Bagus bukan? Cara membuatnya?  Gampang kok.. Silahkan saja lihat caranya dibawah ini
1. Login ke blog anda --> Design --> Edit HTML
2. Cari ]]></b:skin>.
3. Letakkan CSS berikut di atas kode yang tadi anda cari

#footer-fix {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 5px solid #6f6f6f;
background-color: #6f6f6f;
width: 100%;
height: 20px;
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;
}

#footer-fix a {
color: $linkcolor;
}
#footer-fix p.right {
float: right;
padding-right:38px;
line-height: 1.3;
height: 100%;
color: white;
vertical-align: bottom;
}
#footer-fix p {
float: left;
margin: 0px;
padding-top:6px;
padding-left:30px;
color: white;
vertical-align: bottom;
line-height: 1.2;
}

4. Nah, kemudian beralih ke sini. Letakkan kode berikut di atas kode </body>.

<div id='footer-fix'>
<p><a href='http://kukuhcdh.blogspot.com/'>Kukuh Cakra Darma</a>&#160;Indonesia&#160;</div></p>
<p class='right'>Optimized for 1024x768&#160;|&#160;All Browser&#160;</p>

5. Save dan lihat hasilnya!

Sekian semoga membantu! "Fixed-Footer"

Tweet

Artikel Terkait: