Membuat Footer Bar Melayang

footer bar apaan siih?? 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF3xoZGNpveZSQF3yJ22KrbGFC_H63VBqkkV7o7BgLXnGRnoxWGW9YoqDKPVN3ViXNVNJQlaKqJ2KiA1XaDbxyJ5wkOW0bLw-dKaEmycn_963MBTFTxSyOUZwhDbA7tRgmSsqHcb-MMhFk/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.

Tweet