Membuat Footer melayang

sedikit tutorial lagi, saya jalan2 ke blognya sobat ciput dan nemuin tutorial footer melayang, seperti anda liat tiapa ada menscroll maka ada bagian bawah blog yg melayang. lebih jelasnya yg bertuliskan nama samaran saya Zero. ya udah itu sedikit basa-basinya

- kita mulai, pertama-tama tentu kita hrs login terlebih dahulu di blogger
- langsung saja masuki tab edit html
sebaiknya ada download templatenya terlebih dahulu agar tidak tejadi hal-hal yang tidak diinginkan
- cari ]]></b:skin> agar lebih mudah silahkan gunakan ctrl+f, kemudian setelah menemukannya langsung saja letakan kode css dibawah ini tepat diatas ]]></b:skin>

#footer img {<br />/* margin: 0px 0px -8px 0px; */<br />vertical-align: middle;<br />}<br />#footer p.info {<br />float: right;<br />padding-right:40px;<br />line-height: 1.2;<br />height: 100%;<br />vertical-align: bottom;<br />}<br />#footer p {<br />float: left;<br />margin: 0px;<br />padding-top:4px;<br />padding-left:40px;<br />vertical-align: bottom;<br />line-height: 1.2;<br />}<br />#footer a {<br />color: #333;<br />}<br />#footer {<br />align: center;<br />position: fixed;<br />border-top: 1px solid #ddd;<br />border-bottom: 5px solid #f5f5f5;<br />background-color: #f5f5f5;<br />width: 100%;<br />left: 0px;<br />text-align: left;<br />color: #888;<br />font-family: Verdana;<br />font-size: 11px;<br />z-index:10000;<br />opacity: 0.9;<br />filter: alpha(opacity: 90);<br />bottom:0;<br />}

jika sudah selesai maka lanjut ke langkah selanjutnya dengan mencari keyword </body>. setelah itu letakan kode dibawah ini diatas </body>. berikut kodenya :

<div id='footer'><br /><br /><p><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUNr1x8FbusOEfUmi9brwOBQSyIljoHdQWnLBGp0d8Zbdcgw3h0h8lhIT_x_lHaB07DVommN6_g0RuhLX3sevwTDqpWz5_B6fQrp0_N_u3dpCOVdB1cYFbwkx5RpLk5M2PCR0rScegHvo_/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><br /><br /><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.<br /></p><br /><br /></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.

sumber : http://cipstuff.blogspot.com/2009/02/membuat-footer-bar-melayang.html
disampaikan kembali oleh : Zero

Baca Juga Yang Ini