Blogger Stuff

Membuat Footer Bar Melayang

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

0 comments Membuat Footer Bar Melayang

Anonymous says:

ijin ngebookmark sharenya Suhu….

Anonymous says:

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

Anonymous says:

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

Anonymous says:

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

Anonymous says:

mas bikin blog di blogspot yang interaktif gini gimana seh 😀

Anonymous says:

sori yang tadi aku yang kirimmm…

he,he… bikin blog di blogspot yang keren gimana seh 😀

http://hmcahyo.wordpress.com

@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 says:

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

Trima kasih buat infonya dan salam kenal 🙂

Anonymous says:

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

Thx.

Unknown says:

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

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

Benazer says:

kalo dipasang tombol share bisa ndak

sip………………

kunjungi balik ya,………
http://www.study-it.cz.cc

ok, keren banget lah tutorialnya..

Mampir blog walking gan….

Jasa Pembuatan Akun Adsense

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

Unknown says:

bagus juga gan…

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

Unknown says:

mengecilkannya gmna guys, nih bodynya besar..

Unknown says:

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

agak panjang nih caranya

Leave a Reply

Your email address will not be published. Required fields are marked *