Place Your Ads Here 460x68 ads

How to make dynamic floating social bookmark

How to make dynamic floating social bookmark 


Bookmark,Facebook,twitter,floating
1. Log in to your 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 = &quot;#floatMenu&quot;;
var menuYloc = null;
$(document).ready(function(){
menuYloc =
parseInt($(name).css(&quot;top&quot;).substring(0,$(name).css
(&quot;top&quot;).indexOf(&quot;px&quot;)))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+&quot;px&quot;;
$(name).animate({top:offset},{duration:1000,queue:false});
});
});
</script>

5. After Find this tagby using Ctrl+F    ]]></b:skin>

#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;}


6. Paste below code before  ]]></b:skin>  tag


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/Bloggercodes/
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/bloggercodes'
 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/bloggercodes with your Twitter profile link
          Replace http://www.facebook.com/pages/BloggerCodes/353508957993648          with facebook fan page link.

7.Your are done.



Sameera ChathurangaAbout Author Shoyab Khan

Blogger, MAC user, Apple Fan, Online Content Writer, Designer, Gamer, Programmer and Jovial Guy!. Like my Facebook Fan Page. Catch me on Twitter and Google+. Read more about Me and Www. Only4Everyone.Blogspot.com. Download Free Games,Download Free Software,Download Movies and Watch Online,Blogger Wordpress and Website Tips , Tricks ,Widgets,Templets, and many other Sources and Health Tips,Photo Gallery contact me

Thank You

0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...