Tutorial : Floating social network button

Views


So hello guys. This tutorial is requests by a someone at my shoutmix but I don't know who is she/he so let's start it :face35:


1. Design - Add Gadget - HTML/JavaScript


Copy code below to HTML/JavaScript
<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; left:-12px;'>




<a class='linkopacity' href='http://www.facebook.com/Ohmygodismonsterhere' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://3.bp.blogspot.com/_LZtXSNcp76A/TBIPXEkOOEI/AAAAAAAABFQ/DAPJdek1QbQ/s320/facebook.png" /></a><br />



<a class='linkopacity' href='
http://twitter.com/monstercynthia' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="http://1.bp.blogspot.com/_LZtXSNcp76A/TBIPlDeEV5I/AAAAAAAABFw/5Z4co3O_jpU/s320/twitter.png" /></a><br />



<a class='linkopacity' href='http://www.youtube.com/user/Babyshinkim' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='youtube'><img border="0" src="http://2.bp.blogspot.com/_LZtXSNcp76A/TBIPnxEur8I/AAAAAAAABF4/edEB1NQCdGg/s320/youtube.png" /></a><br />


<a class='linkopacity' href='http://www.myspace.com/493194600' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='myspace'><img border="0" src="http://t1.gstatic.com/images?q=tbn:ANd9GcRFEBCA-kSugZu99OGSFJ-OyzmMxYvBpyY6totPTLA8gILqPXrs" /></a><br />


</a><br />


</div>




The link that I highlight it in blue color change it to your own social network code , Okay done :q:


Easy right :s::face56: