Jika sebelum ini saya menjagar bagaimana ingin sorokkan 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/AVvXsEiLnIAOYLpR0pb3bNxdAT0GEBq6-0o8xt_YtWyRZPWhw1KddrRRFXCoFvZ5PvoZuF4tooG7K2uok06ywuk7x8DmuEaoLqwLo7HqUcPFnAtfyOjl4R3M6Z7Mpwl_3e3Pn1ajHbaHv6NQswWn/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/AVvXsEgQyQJa1Jrjf-XGIRmavUNvNzuTTDuumeeDV8KD5sLmJzJGxWLl-00-j14mScOzRaSaWkaKLs2TatH0fpeYISJBJvqp9DOEBu8-oKkfKoCTEoY-p6BChCrG6HlT_B6AhY5mAH-P0XWpDvLt/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/AVvXsEiA2gs2GtIBEMggjuDAAbYSE2rnNDVCcrvIN0SAG_GtKVhPPaQKuVfHPIIWyDTchmiqPXPLA73fX6cnU59Ti5OInJZQIC_gKQUXcQBkhNHxuNdmAtexgKZO1U_RdryfgNw34_0exNm1JoRf/s320/twitter.png" /></a><br />
<a class='linkopacity' href='http://probuatblog.blogspot.com/feed blog' 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/AVvXsEhRCKoMpfZeaN1MUJjTFohRk0BJNY-RgNkm8fykI8k6MfSb6dDT8yG8Jfa_wFh16Zhn6HeAh1bsENeRR5kk3w0d9Z1-K7YnVGPPtJzxZ1iYUUNKfnimRYH1_bcQ2-N6rieE8Uz5lXeINYsM/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/AVvXsEhym_aQe9FVpdXUKasOoBx5zO-xciBFalv1Ii6STjN4I2-R7UN7k-tw6n3QtVIxsl8gZNprqtWFrrQEHaeeVZQbdfY8AzhW8F9hcfUYZEgMaD1txt_0wd5O6Tet4vCzjhfbNOmSk55cRNKo/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/AVvXsEg7vtwUgloXfImmmvZJz2bQfrKl49GJ31N1TP6Ol3fXST0pNOIQu0vIM-FpbLqV-2ve5ZWG6iPogn3J9eyWqI3bkAEc0ERhQr53u_Goue_Pih8UhnsvV6tVAogolFNROLZvI1K321fH8Cyb/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/AVvXsEgqTvM9PzBvaVL2DcpIOr2Y0MHM2lBGiNdcudQBJJr08364SzKX1aBwLksRjCXeUyQCXcEEQ6NwbaKkblWxqG-F10PGSqiiF8I5uWP7fKoH14j9dDdT8JOr7B42FhrYCfw_jZn7R26z8W3M/s320/flickr.png" /></a><br />
</div>
|
nota:
1)kod yg berwarna merah itu adalah posisi kedudukan floating button anda..anda boleh mengubah kedudukan dengan menambah atau mengurangkan nombor tersebut
2)semakin tinggi nilai yg anda letakmaka semakin rendah kedudukan butoon itu..
selamat mencuba
