Tuesday, April 19, 2011

How to make dynamic floating social bookmark

How to make dynamic floating social bookmark 

Bookmark,Facebook,twitter,floating
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 = &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>

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