Saturday, February 21, 2009

Membuat Footer Bar Melayang

15 comments

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

Comments
15 comments
Do you have any suggestions? Add your comment. Please don't spam!
Subscribe to post feed
gus said...

ijin ngebookmark sharenya Suhu....

HumorBendol said...

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

HumorBendol said...

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

alhakim said...

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

Anonymous said...

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

hmcahyo said...

sori yang tadi aku yang kirimmm...

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

http://hmcahyo.wordpress.com

Masciput said...

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

semar said...

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

Trima kasih buat infonya dan salam kenal :)

Anonymous said...

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

Thx.

Chandra  said...

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

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

Benazer said...

kalo dipasang tombol share bisa ndak

Bayu Lukman Yusuf said...

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

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

estilosweb said...

ok, keren banget lah tutorialnya..

Adsense Maker said...

Mampir blog walking gan....

Jasa Pembuatan Akun Adsense

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

Teknolines.co.cc said...

bagus juga gan...

Silahkan memberi komentar :

SubscribeSubscribe via RSS

SubscribeArsip blog

SubscribeGoogle Connect

SubscribePopuler

SubscribeYang tak terlupakan

SubscribeHot Links