Cara Pasang Floating Button Sosial Network

Jika sebelum ini saya menjagar bagaimana ingin sembunyikan shoutbox di sisi blog,tutorial kali nie pula saya ingin mengajar bagaimana cara memasang floating button seperti contoh di bawah :

ok untuk membuatnya pertama sekali pergi LOGIN BLOG => DESIGN =>ADD A GADGET => HTML/JAVA SCRIPT

pastu masukkan kod di bawah

<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://gengblogger.com/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='gengblogger'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3uG9y8DE5fdyZ2SDyUqHEPlQ2MODX5ICPIrXuApYlqgtEc1z8n8LCV_vggju4dITe-0r21wa4HX8cQ8DPVTiV1wcBOOYLL5UJVUvxHS2278gHf02V50rhB4iRuaZCHs2TbJClKCNQKHIi/s320/icongb.PNG" /></a><br />
<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/AVvXsEjpsbnBEoHAw6E3s7qopoRnjwzFY-LcSLumvUH7myJTfLf87OwsUOutjRrXulHelt1Sfj0OAPa4naypzPeqGt-yCeqFSw_NLaPN63V1hJ2Se9LOXmA_OLb7lxO5TYipCTuKyA0MiAwaogNU/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/AVvXsEgUWk0KLybP30tWi8F02BILjfdp6-XgLmzFgr5G8vuRuTQr_JqwkDK_3xoO5RKe1MHnga3-QrhJyUfCG6vNrMog_PMsZyP7ut8gIx9_-XeYgrt6sMy4J8p6CgbizFD_Y2NYyqRFWmR7luov/s320/twitter.png" /></a><br />
<a class='linkopacity' href='http://stylishtutorial.blogspot.com/feed blog anda' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUZOTf3kqameEilx-uyyMaBU-M6agWk0F6jx89oxNnrQPQ963n4gysp_MP1YW6iWiSl7pTDNO5V2XVU7tvBzqcS-_18PEvjwz8ZlHtVyEyW4SnVGeTC-JwY9x53N4EqWdVn3VNzf6RpOa5/s320/feedblogger.png" /></a><br />
<a class='linkopacity' href='http://feedburner.com/akaun feedburner anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feedburner'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwqti0h1OhVwQrj-p1Os1gR6Ed64OYL179sqQXx0KiZgt5DIJ1tup2NxzlLXB8x0r5fLI0futRh0V5kSQC0OrY7HRmqxVsx_KBsI-cbY-UoZ2QwxIxGlI7ORxShvUxAIDa2X32wO_LJ5OM/s320/feedburner.png" /></a><br />
<a class='linkopacity' href='http://youtube.com/akaun youtube anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='youtube'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYPKXkoRVrsbUcQlD6qSH5bz7irmFFLv9PQsNTp29hExefAcGek7eSN5qnrRcL66keDOfSKLTV1MiWEaQHdxJQvb98-gxHAl64Wab5mhGUfk8v19vnntjmJ8JV83DGacoiCp3Zbsl5774e/s320/youtube.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/AVvXsEgI3_zqPdfeA0Esud0aPs4JUUKKvMLm1WLC-dqMQRu9cNAdSYIE11DJi_3K54k5wgFOaARrfTlw_hojc6H78e37GGfE2m4nLFV02OyNu7FHxpp7Z8hN3uc0S5nOrR7uxXy5FX5ufpQ3Ofia/s320/flickr.png" /></a><br />
</div>

nota:


1)Kod yang berwarna Merah adalah kod yang perlu ditukar dengan URL anda.
2)kod yg berwarna Hijau itu adalah posisi kedudukan floating button anda..anda boleh mengubah kedudukan dengan menambah atau mengurangkan nombor tersebut
3)semakin tinggi nilai yg anda letakmaka semakin rendah kedudukan butoon itu..


selamat mencuba