Mengubah "Footer" Menjadi "Fixed-Footer"

Anda tahu Footer? Footer adalah bagian yang paling bawah dari sebuah blog. (Begini doang mah nggak usah dijelasin hehehe). Footer memang selalu ada di setiap template, tapi pernahkah anda melihat Fixed-Footer? Fixed-Footer tidak terlalu berbeda dengan Footer yang biasa, hanya saja posisi Fixed-Footer akan terus bertumpu tetap pada saat scroll digerakkan dan inilah yg menjadi keistimewaannya Fixed-Footer......Wes...poko'e ngono lah...makin dijelaskan makin pusing aku :p

Saat ini, baru sedikit yang mengganti footer biasa dengan fixed-footer. Yang baru saya ketahui adalah blogmenjerit, anangku, dan blog saya sendiri. Bagi yang sudah kebelet mengikuti tutorialnya, ikuti saya. Bagi yang kebelet kencing, silahkan pipis dulu :D).

1.Msuk ke Dashboard->Layout->Edit-HTML.

2.Sediakan template cadangan apabila tutorial ini gagal dengan cara ketik REG [spasi] template mengklik link Download Template Lengkap.

3.Centangi kotak Expand Template Widget.

4.Cari kode ]]></b:skin>, kalau sudak ketemu tambahkan kode ini atasnya

#fixed-footer p.info {
float: right;
padding-right:40px;
line-height: 1.2;
height: 100%;
vertical-align: bottom;
}
#fixed-footer p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:40px;
vertical-align: bottom;
line-height: 1.2;
}
#fixed-footer a {
color: #333;
}
#fixed-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;
}

5.Cari kode di bawah ini

<div id='footer'>
<b:section class='footer' id='footer'>
</b:section>
</div>



Ganti semua kode yang ditebalkan dengan fixed-footer

Tetapi, bagaimana bila kodenya seperti ini

<div id='footer-wrap1'><div id='footer-wrap2'>
<b:section class='footer' id='footer'>
</b:section>
</div>



Maka, ganti hanya kode yg miring dan bergaris bawah saja.

Simpan template......Selesai...wets..tunggu dulu bro...masih ada satu pekerjaan lagi, yaitu menambahkan elemen halaman. Makanya, trik ini membutuhkan stamina dan fisik yg kuat untuk menyelesaikannya :O.

6.Sekarang, kita berpindah ke submenu Elemen Halaman. Silahkan kik Tambah Elemen Halaman, lalu pilih HTML/Javascript. Copy-paste kode ini lalu masukkan ke elemen halaman blog anda.

<center>Gudang-HTML is Powered by <a href="http://www.blogger.com/">Blogger</a> | Created and Maintained by <a href="mailto:istifajar@o-om.com">Istifajar</a> <a href="ymsgr:sendIM?awe_dunk"> <img src="http://opi.yahoo.com/online?u=awe_dunk&amp;m=g&amp;t=0&amp;l=us"/>
</a> Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</center>


Silahkan anda obrak-abrik sendiri sesuai keinginan.....Lalu simpan dan lihat blog anda sekarang....

Met weekend :)

Sumber:blogmenjerit.blogspot.com


Category Article