Tutorial : Floating Buttons

Hello & salam to all :D

Ini khas untuk Cik Adik Dalilah yang sampai due kali tanye kat shoutbox Sarah ( or should I call myself 'kak'? Oh tuenye! xD haha ), ape die tanye ek?

Oooo, Dalilah tanye camne nak buat bende ni ek?


Bende comel ni ( lagi comel kalau background blog just white & plain ) Kak Sarah belajar buat daripada blog Kak Zana yang menyediakan pelbagai tutorial untuk meng-superb-kan lagi blog kite ni. Daripada situ jugaklah Kak Sarah tau bende ni kite panggil "Floating Buttons" or kalu nak memperkasakan Bahasa Melayu, "Butang Terapung" kot? Ape2 je lah, heheee..

Nak buat bende ni senang je dik, ecey, macam berlagak la plak, takde ah, motivasi tu, taknak bagi jadi malas, ehakz! Haha. Okay2, ikut step ni.

1. Sign in blog then dari Dashboard => Designs => Page Elements => Add a Gadjet

2. Pilih HTML/JavaScript.

3. Copy & paste codes kat bawah ni ye, masuk kat HTML/JavaScript tadi.




<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<div style='display:scroll; position:fixed; top:140px; left:-6px;'>

<a class='linkopacity' href='http://www.facebook.com/uwmaisarah3993' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/232.png" /></a><br />

<a class='linkopacity' href='http://twitter.com/home' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/432.png" /></a><br />

<a class='linkopacity' href='http://www.blogger.com/home' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/blogger_64x64.png" /></a><br />

</div>

4. Nanti! Jangan save dulu! Yang dimerahkan tu, my facebook link so perlu tukar ye?
Yang oren tu plak, masukkanlah link twitter Dalilah, okay?

5. Siap tukar link, baru boleh save :)

Ha, kan dah cakap senang :)
Cepat2lah tengok hasilnye.

Kredit to Kak Zana :D

Updated :

link yang berwarna hijau boleh digantikan dengan URL gambar / icon lain, in case kalau taknak icon yang ber-effect-kan kertas koyak rabak kat tepi tu, ok?