February 21, 2009

Membuat Footer Bar Melayang

| February 21, 2009
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

Related Posts

19 comments:

  1. ijin ngebookmark sharenya Suhu....

    ReplyDelete
  2. Wow..tips-nya hebat.
    Bendol sih kagak ngerti. Bisanya yang instant doang.
    Makasih bang...

    ReplyDelete
  3. Eh...dah link Bendol ya?
    Aku link balik ya?
    Makasih...

    ReplyDelete
  4. Nice tutor bro...
    sekarang blognya tambah cakep aja :) eh.. kenapa ganti URL? bukannya dulu masciput.blogspot.com ya?

    ReplyDelete
  5. mas bikin blog di blogspot yang interaktif gini gimana seh :D

    ReplyDelete
  6. sori yang tadi aku yang kirimmm...

    he,he... bikin blog di blogspot yang keren gimana seh :D

    http://hmcahyo.wordpress.com

    ReplyDelete
  7. @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!

    ReplyDelete
  8. weh.. mantav nih infonya... nanti saya pasang di blog saya yaks.

    Trima kasih buat infonya dan salam kenal :)

    ReplyDelete
  9. Thx Mas Tutornya....Kalo buat Float Footernya ada tombol close-nya gimana mas? biar bisa diclose.

    Thx.

    ReplyDelete
  10. kirain yang stikybar yang auto hide, ini hanya menggunakan z-index, position dan float. sip...

    kunjung komen+follow http://www.ch4ndr4.com

    ReplyDelete
  11. kalo dipasang tombol share bisa ndak

    ReplyDelete
  12. sip..................

    kunjungi balik ya,.........
    www.study-it.cz.cc

    ReplyDelete
  13. ok, keren banget lah tutorialnya..

    ReplyDelete
  14. Mampir blog walking gan....

    Jasa Pembuatan Akun Adsense

    http://fast-adsense-maker.blogspot.com/

    ReplyDelete
  15. Thx gan, ctrl-D dulu nanti saya coba, moga aja work buat web jualan tas wanita saya. ^^

    ReplyDelete
  16. mengecilkannya gmna guys, nih bodynya besar..

    ReplyDelete
  17. saya mau tanya, cara mengubah url blogspot menjadi lain bagaimana, mohon tutorialnya.. saya mau mengubah http://xeanerts.blogspot.com/ menjadi dot go.id

    ReplyDelete