How to make dynamic floating social bookmark
1. Log in to blogger account and Go to Design >Edit HTML
2. Put checked marked in Expand Widget Templates
3. Find this tag by using Ctrl+F </head>
4. Paste below code after </head> tag
5. After Find this tagby using Ctrl+F ]]></b:skin>
6. Paste below code before ]]></b:skin> tag
5. After Find this tagby using Ctrl+F </body>
6. Paste below code before </body> tag
Note: Replace http://twitter.com/bloggertrix with your Twitter profile link
Replace http://www.facebook.com/pages/Blogger-Trix/110888928990749
with facebook fan page link.
7.Your are done.
1. Log in to blogger account and Go to Design >Edit HTML
2. Put checked marked in Expand Widget Templates
3. Find this tag by using Ctrl+F </head>
4. Paste below code after </head> tag
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script language='javascript'>
var name = "#floatMenu";
var menuYloc = null;
$(document).ready(function(){
menuYloc =
parseInt($(name).css("top").substring(0,$(name).css
("top").indexOf("px")))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:1000,queue:false});
});
});
</script>
5. After Find this tagby using Ctrl+F ]]></b:skin>
6. Paste below code before ]]></b:skin> tag
#floatMenu { position:absolute; top:150px; float:left; width:45px;} #floatMenu ul { list-style: none;} #floatMenu ul li a { -webkit-transform:scale(0.6); -moz-transform:scale(0.6); -o-transform:scale(0.6); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; opacity: 0.8;} #floatMenu ul li a:hover { -webkit-transform:scale(1); -moz-transform:scale(1); -o-transform:scale(1); opacity: 1;}
5. After Find this tagby using Ctrl+F </body>
6. Paste below code before </body> tag
<div id='floatMenu'> <ul> <li><a href='http://www.facebook.com/pages/Blogger-Trix/110888928990749' rel='nofollow' target='_blank'><img border='0' src='http://lh3.ggpht.com/_-kiN_mt1trA/TRGYfxUq9LI/AAAAAAAAACs/tzNEyscBX_I/btn_f.png' style='margin-bottom: 3px;' title='Follow Me On Facebook'/></a></li> <li><a href='http://twitter.com/bloggertrix' rel='nofollow' target='_blank'><img border='0' src='http://lh5.ggpht.com/_-kiN_mt1trA/TRGYf-CYBHI/AAAAAAAAACw/tuuYnz20Lx0/btn_t.png' style='margin-bottom: 3px;' title='Follow Me On Twitter'/></a></li> </ul> </div>
Note: Replace http://twitter.com/bloggertrix with your Twitter profile link
Replace http://www.facebook.com/pages/Blogger-Trix/110888928990749
with facebook fan page link.
7.Your are done.
0 comments:
Post a Comment