Tutorial : Membuat Floating Button

Assalamualaikum.
Maaf sangat sebab terlepas pandang untuk membuat tutorial ini.
Ramai yang nak tutorial ni tapi asyik lupa je hehhe..
Di malam hari yang hening ni aku nak ajar cara-cara nak buat floating button. Apakah fungsi floating button ni? Okeh, benda ni memudahkan reader connect dengan korang. Contoh kalau click button Facebook terus boleh tengok facebook profile korang dan sebagainya. Lagipun cara ini dapat ringankan blog korang. Korang dapat kurang berat blog korang. Contoh, kalau korang letak facebook badge, twitter badge atau sekawan dengannya memang memberatkan blog untuk loading tapi kalau korang guna floating button untuk connect dengan reader korang dapat kurangkan ber"kb-kb" berat badan ooppps berat blog korang.
Tampa berlenggah-lenggah lagi mohh aku ajorkan cara nak buat benda alah ni..karang aku merepek sampai berkilo-kilo karang korang juga yang susahkan..
Kalau sesiapa yang masih blur..meh tengok gambar ni..kasi faham sikit.

 

Faham tak wahai kawan-kawan? Kalau tersuka jom ikuti langkah-langkah yang penuh dramatik ini :

1. Sign in blogger > > Design > Add Gadget > Html/Java Script
2. Copy coding di bawah dan paste ke dalam Html/Java Script

<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='http://www.facebook.com/fara.idola' 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/AVvXsEhbJoICMyLGLiGmlk62_HKCP0-D-WydEiv8nI-1Nbzz1E1TSrPDLLZ0eUwBd9ESCgo_AIDXQZen-P4qsAUrxkGwZzhGIpI-ygXXpG69Tu7JqHkyB95KX-5O3me7YN4_Tb5_lwTk6dDrXfc/s1600/facebook1.png" /></a><br />

<a class='linkopacity' href='http://twitter.com/#!/fara_idola' 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/AVvXsEiyOL0q308SLrUvI6DtvCvOul2tV3cYAlI5q7z92rQ3qVNXl3hRjMGjrzMSKWwcUxePlJLCJZdeKiaoJIyN5fCTbuM5VoM8wrTj3zGDAUIMmHULbr_U-Yb22H8Xekvl2_hme5W5jn10pGo/s1600/twett.png" /></a><br />

<a class='linkopacity' href='http://bicarafarah.blogspot.com/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='go to dashboard'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_D19ECbe-s58bnMYXCiZUbhNRnT53ibPamyY-S-SEg9vyDmjL9BRcE61PxeGDsLADX9-RqVU3hnmrX_PRGDdWBzahufKlZ_tX-G3XHEgZXUA9FrEdQHFgcNFHrLJqRzZUSFj0AJruU28/s1600/blogger_64x64.png" /></a><br />

</div>

3. Tulisan warna merah ialah link url korang ( contoh, Facebook, Twitter ), dan link biru link url gambar/icon. Kalau nak tambah lagi button copy tanda ni je sebelum code </div>
left boleh tukar kepada right kalau suka.
# Ubah font warna hijau sekali
4. Faham tak? dan SAVE je.

Kerana mood aku baik dan rajin. Aku edit dan carikan korang icon-icon yang sesuai diletak untuk floating button.  Tapi korang jangan la letak semua benda ni..nanti serabut serabai pula. Letak yang penting je k..

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3rZ3kMK0vcBa7fQjX66oqqCsPqm9R3k774j7pNbPpDbzZ-s8lPEnxrdlggPHpQvSWV_gsdPiOXGKaFgmwoBw3wVkzMlbV7ktFk5U7oAct39Al26iy9yLLFzgu_s_qnG6iHL1On1wgEP0/s1600/blogger-icon-big.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTCtIjzb6QBGfpORXe-IMM6RbDG_Huv_8bzKPeI3s-N8j3dw9QZjHSCF9dPVz7McXjoDZiFPEaSOSTMGYjuVaXOhB8JS1IykyqJxc4AUUJT4VsuwFZHhLefPzFAGOiUAP6_iAH5hTA5Tc/s1600/Facebook-icon.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbL_EtYpGTohfrXX9Zhh4enqdZphmW2aBkU78rgC54y8Mdj8ztnHNsna2tNmSwIbtKJ1RRqab_cSCdkxFHLss_iac4j8VbGU9q5huyk_yHyVAYqsdJ4_ttl4G1ICcZcCDNVXuJXXp94Ds/s1600/TwitterIcon.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnvPQOtwo-YD1iiNVMKJp_oEPtIHfCYbIZu4FD4bm46tC_e3GmrIJ7qCxhMiUGo-ekTpVWMAbC-R6DVGEPhrlHOLFohlGDSNVd6CeACxaDw1sKecQ4WkZsGq_Al-p59rf6q934jQ5XS08/s1600/youtube-icon-PNG.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZKloXI-juCljiu0rUbSKban-8xkpuvMDa3yEWX-sg7gEI3kZib08n9QiwUb-lQIFOJeY58x4V0RDVIfeSugqy6TjMLFKQaqnX5fWrvQdnlMqOegm8zQ0WEL4QFQbnXOIA_aS5LjLhcT8/s1600/Skype.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiftKCNii-7SRj2ZPRwVBT_T3xRRHufeWG1FBt2-J86z1ep83_edWNape8I6h_fGfcesQtFVBCjmXuMBgwQhR4D7abcJOk9IZ3tINwkUypjUXi5vsxhDOodvvOLCfs4o7ec00YLLs_6SfU/s1600/Icon-Gmail.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNPy1fLc_cTLUYfjul5MQDuTHX0jYLmWO56AVRvIA5zXanqJSLpH6Q7hubW5Wcgykd74WkAk_L_bmvX8um61c40QeH2UN1gQEtNpHsl8PDLTE5G5CG-W37sL-NTkJ9i6gljLdRmHhNjKM/s1600/yahoo_icon.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilLMS-x7cJkgmY1bm8Ygq1p2K65Z5sDo5X-CKMa7CvbTIe3_zAQ4hpakmoztGt5rKxtlLVLGduWdeGX5EAAMoJ9PCwrlvs0L0re9WwCsNDs32N6g5zE5NeDeuGJfbNsMBVtJOJ7-_V1b8/s1600/Tumblr.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtInSxzngZUuTJJzZorkrVFqStR8O6Wn9oqnkBb0hholSWCn8R_9VReIqmCrm3TAnSIXtXWJdwVXNj3djgqqfGMUnO6tV7Fd6fnRJXh9OvlP_8Rl9RM5I1LSM9LPOThTGWujcHU99gzPM/s1600/myspace-icon.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2x2kLcB9wTfrjZLMjV7GcbGXGy-kOypvHzArg22KIYt728O6O0UJItRavr1s54nzqr152D1VrtivRIwP3XCUehVENmFPIK4CBAqspCqpDMo98Ut0M5YHwTiMkf-wtEzycS_wdB13gS6E/s1600/formspring.png

Macam mana hasil? suka?..okeh nanti komen ye..
p/s : nak icon lain sila rajin cari sendiri..

Credit to: Cik Nurfarah