06 January 2009

Tutorial | Floating Button (Facebook, Dashboard, etc.)

Floating Button yang ni dia akan terapung kat left-side of your blog. Dulu blog ni ada, tapi dah buang. Bila tekan, dia akan terus link kepada contohnya, Facebook, atau mana mana label dlm blog yg kita nak. Tapi, yg ni aku dah sediakan gambar dia.

http://i1142.photobucket.com/albums/n604/nurulfasya/Untitled-4.png

http://i1142.photobucket.com/albums/n604/nurulfasya/lirik-2.png

http://i1142.photobucket.com/albums/n604/nurulfasya/tuto-3.png

http://i1142.photobucket.com/albums/n604/nurulfasya/home-4.png

http://i1142.photobucket.com/albums/n604/nurulfasya/tuto-2.png

http://i1142.photobucket.com/albums/n604/nurulfasya/fb-1.png

Okay now.
1.Pergi Design > Page Elements > Add a Gadget > HTML/Javascript.
2.Copy semua code kat bawah ni dan paste di 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:-12px;'>

<a class='linkopacity' href='URL FACEBOOK' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="URL GAMBAR" /></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='blogger home'><img border="0" src="URL GAMBAR (KE DASHBOARD)" /></a><br />

<a class='linkopacity' href='LINK ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='tuto'><img border="0" src="URL GAMBAR" /></a><br />

<a class='linkopacity' href='LINK ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='lyrics'><img border="0" src="URL GAMBAR" /></a><br />

</div>

3. Masukkan segala URL, link, dan URL gambar di tempat yg berkaitan yg berhuruf besar. Link gambar boleh ambik di atas sahaja atau reka sendiri tetapi perlu diupload di photobucket atau mana2 yg boleh dapatkan URL dan amik URL dia :)
4. Save!

#kalau nak tambah lagi, just copy benda kat bawah ni and paste kat bawah code tadi.

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

SIAP! :)
GRACIAS

0 juri jemputan, 1 juri tetap (Comment here):

 

100% Harta Benda dalam Blog ini adalah bukan SelenaGomez punya.