21 February 2009

Membuat Footer Bar Melayang

Tag
19 comments
Informasi
  • 21 February 2009
  • Ciput Mardianto

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIWN50kAsjHJ7XXZdqf9_m2dVz9_-yi6ctNN4F74oXbUorSaBae_V45x-nCDgqQ4D_3VAZ-u1T_CWvdjmGUBcZUmqgQ15zLk2aQyPxPafNCavRW2EPbmXyEjsZTER1ydH8Sk8ZTBURDESU/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. AnonymousFebruary 21, 2009 at 7:46 PM

    ijin ngebookmark sharenya Suhu....

    ReplyDelete
  2. AnonymousFebruary 21, 2009 at 10:11 PM

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

    ReplyDelete
  3. AnonymousFebruary 21, 2009 at 10:34 PM

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

    ReplyDelete
  4. AnonymousFebruary 23, 2009 at 8:37 AM

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

    ReplyDelete
  5. AnonymousFebruary 23, 2009 at 10:05 AM

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

    ReplyDelete
  6. AnonymousFebruary 23, 2009 at 10:07 AM

    sori yang tadi aku yang kirimmm...

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

    http://hmcahyo.wordpress.com

    ReplyDelete
  7. Ciput MardiantoFebruary 23, 2009 at 12:23 PM

    @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. semarApril 7, 2009 at 10:50 AM

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

    Trima kasih buat infonya dan salam kenal :)

    ReplyDelete
  9. AnonymousSeptember 19, 2010 at 2:53 AM

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

    Thx.

    ReplyDelete
  10. AnonymousJanuary 18, 2011 at 10:55 PM

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

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

    ReplyDelete
  11. BenazerFebruary 10, 2011 at 8:19 PM

    kalo dipasang tombol share bisa ndak

    ReplyDelete
  12. Bayu Lukman YusufFebruary 17, 2011 at 2:32 AM

    sip..................

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

    ReplyDelete
  13. estiloswebMarch 22, 2011 at 5:38 PM

    ok, keren banget lah tutorialnya..

    ReplyDelete
  14. Adsense MakerMarch 24, 2011 at 3:13 PM

    Mampir blog walking gan....

    Jasa Pembuatan Akun Adsense

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

    ReplyDelete
  15. UnknownMay 16, 2011 at 1:35 PM

    bagus juga gan...

    ReplyDelete
  16. Jual Promo FashionJuly 19, 2013 at 6:45 AM

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

    ReplyDelete
  17. UnknownOctober 1, 2013 at 8:34 PM

    mengecilkannya gmna guys, nih bodynya besar..

    ReplyDelete
  18. UnknownOctober 1, 2013 at 8:39 PM

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

    ReplyDelete

Subscribe to: Post Comments (Atom)
Recent Posts