Cara Buat Floating Button (Facebook, Twitter ect)

Tuesday, December 28, 2010

Assalamualaikum..

baeklah, hari ni nak share dengan korang semua macamane nak buat floating button macam yang saya buat untuk button FB dan Twitter tu..

again, yang ini pon mudah jugak, same je macam nak pasang widget baru kat blog..ehhe..saya memang suka buat tutorial yang senang-senang gini, yang kena edit kat html tu, takot korang tak faham pulak..pasal saya pon, try n error je kot..ekehke

oke baeklah, mari mulakan ya..

1. Design > Add and Arrange Page Elements > Add a gadget > HTML/JavaScript

2. copy (ctrl+c) code ni, dan paste (ctrl+v) pada kotak 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:240px; right:-12px;'>

<a class='linkopacity' href='http://facebook.com/akaun facebook anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiINVc7C3rDgYgalp_XBslI93h0-1PQU-PRKGEFRFd5dZEY8917bjDQrb6Cszf6WTfMFvxasTTjm_-z6FT9PaJNPxp74OraHL8EZwvyRDoAdXv7Qau9mIOk1wsggvGxV53FS5LEKe-dGeqe/s320/facebook.png" /></a><br />

<a class='linkopacity' href='http://twitter.com/akaun twitter anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEtPe6Ep1yDbrln28Xd3ONctmpy9XBEZOtVfra6Dd1gtjtvqtJcKWZPL8BM4fncfDpqg2xZ5AhzoI2VJsKHWXd7-iBRLIW4JpoMl0IwBZx_PteYOwPDeVB6_7FGiAnCYTIpAuyXN3mFylH/s320/twitter.png" /></a><br />

<a class='linkopacity' href='http://flickr.com/akaun flickr anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='flickr'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYiiqvmiCI2fb5sh0JAt1MhJsCp51fkb6yOKyFH4sbIPLJ80ZqIlIoq7_7nFHPi6IcwXpOrF0TFai00rKlIVxpyJWVrEEynSUH2hbaYJoWtpfEoUHl_r7-Vt_ZIzCTwuB-pxLOA_2cHDh2/s320/flickr.png" /></a><br />

</div>

3. klik save, then save lagi kat bahagian atas dan view blog..

yang 240px tu, untuk ketinggian button, lagi tinggi nombor tu, lagi rendah kedudukan button tu.

korang bole ubah, sama ada nak button ada kat right (kanan) or left (kiri).

masukkan url akaun kat tempat kaler kuning

dan url image untuk button tu kat tempat kaler ungu

korang bole cari icon tu kat http://www.iconspedia.com

nak tahu url image tu, korang bole tengok tutorial ini okee

yeah da siap..ehehee..

selamat mencuba uols..

~wassalam~