Membuat Footer Bar Melayang

Apa itu footer bar! anda bisa melihatnya diblog ini! letaknya dibagian bawah dan tidak bisa bergerak letaknya. Dapat berisi mengenai informasi blog, penulis blog atau sesuatu mengenai blog itu sendiri. Cara membuatnya sangat gampang. Berikut ini step-stepnya, pertama tambahkan kode css berikut, letakkan tepat diatas tag ]]></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;
}
Jika sudah selesai langkah kedua, masuk ke Menu Layout – Edit Html – dan tidak usah klik expand templater widget. Setelah copy kode berikut di atas tag </body>, Berikut kodenya:

<div id=’footer’>

<p><img border=’0′ src=’http://3.bp.blogspot.com/_2Tct7sNIoiM/SX0T5b0OO0I/AAAAAAAAAMM/Q_vyYX7VafI/S28/ciprut.jpg’/>&#160;&#160;<a href=’http://cipstuff.blogspot.com/index.html’>Ciput Mardianto&#39;s Blog</a>&#160;&#169;&#160;2008-2009&#160; </p>

<p class=’info’>Powered by <a href=’http://www.blogger.com’>Blogger</a> | Created and Maintained by <a href=’http://www.friendster.com/masciput’ target=’_blank’>Ciput</a><br/>Best viewed in K-Meleon, SeaMonkey, Qonqueror.
</p>

</div>

Keterangan kode diatas <p> dan </p> yang pertama adalah tulisan yang tampil di kiri. Sementara yang diantara <p class=’info’> dan </p> merupakan tulisan yang ada di kanan. Anda bisa mengganti tulisan yang berada didalam tag tersebut sesuai dengan selera anda. Nah selamat mencoba.

And I won’t put my hands up and surrender
There will be no white flag above my door

0 thoughts on “Membuat Footer Bar Melayang

  1. Nice tutor bro…
    sekarang blognya tambah cakep aja 🙂 eh.. kenapa ganti URL? bukannya dulu masciput.blogspot.com ya?

  2. @alhakim : kenapa saya ganti dari masciput.blogspot.com, karena saya merasa risih ada kata mas! enggak enak gitu!
    @Pak Cahyo: banyak kok tutorial mengenai blogger! klo bapak sedikit punya waktu, coba kutak-kutik bloggernya!

Leave a Reply to Anonymous Cancel reply

Your email address will not be published. Required fields are marked *