Monday 25 April 2011

Floating Button

Cuba tengok kat belah kiri blog ni. Ada macam-macam button kan. Antaranya, fb, myspace, gmail n many more. Haa, itulah floating button.

1. Dashboard > Design > Add Gadget > HTML/JavaScript
2. Copy kod bawah ni

<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:500px; left:-12px;'>
<a class='linkopacity' href='http://www.facebook.com/profile.php?id=100000640510332' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://i668.photobucket.com/albums/vv43/iomallard/facebook-button.gif" /></a><br />
<a class='linkopacity' href='http://www.myyearbook.com/aishah_youtube' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='myyearbook'><img border="0" src="http://i936.photobucket.com/albums/ad209/shadowstorm09/Gaia%20Stuff/commyyearbookm_icon.png" /></a><br />
 </div>
* Yang warna biru tu link website ok.
* Yang warna merah pulak url gambar yang bersesuaian.
* Yang warna ungu pulak tittla. Contohnya website yang kita letakkan Facebook, so tittle dia facebook la.
* Kalu nak tambah lagi just copy yang bawah ni, cuma ubah yang warna biru, purple dan merah tu ja.
 <a class='linkopacity' href='http://www.myyearbook.com/aishah_youtube' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='myyearbook'><img border="0" src="http://i936.photobucket.com/albums/ad209/shadowstorm09/Gaia%20Stuff/commyyearbookm_icon.png" /></a><br />
3. Save Siap.

Kalau tak jadi bagi tau. Takut ada kesilapan dalam tutorial ni.

No comments: