Add floating FanPage of Twitter and Facebook to Blogger

Follow these steps to apply floating FB-likebox and Twitter fanpage to your blog.

• Go to Blogger Dashboard --> Design --> Edit HTML.
• Backup your Template before making any changes to your blog.
• Now Expand Widget Templates.
• Find    </head>     using [ctrl+F].
• Now paste the following script above/before closing head tag ie. before </head>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

• Save template and go to your Layout page on blogger interface and click Add a Gadget anywhere in the layout.
• Now add HTML/JavaScript gadget from the list as shown below.

 

• Now paste the below code in that gadget's content.

<link rel="stylesheet" type="text/css" href="http://latesthack.googlecode.com/svn/mywidgets/2in1/2in1.css" />
<script src="http://yourjavascript.com/515208429/2in1Fanpages.js" type="text/javascript"></script>

<script type="text/javascript"> jQuery(document).ready(function(){  jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -240}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -240}, 500); }); }); </script>

<p style="display:none;"> 2 in 1 social sharing by<a href="http://studybytips.blogspot.com">StudyByTips</a></p>

<div id="on">
<div id="facebook_right" style="top: 18%;">
<div id="facebook_div">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCVt4sdL257mE6geVMPTa9L9pjlrb-ykc6uXtJonCiKoFkIhiaK8FUvw_VKxIu_uFSuQGK79-76hli01yBYA_MLSAxfzvJG-oTohAPpF6e_rVcjqsHvWuaDgIaopVU3NqKcIgp-FBEgOU/s1600/%25255Bwww.latesthackdemo.blogspot.com%25255Dfacebook_right.png" alt="" />

<iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fblog.studybytips&amp;locale=en_GB&amp;width=238&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=256"   scrolling="no">
</iframe>
</div>
</div>
</div>
<div id="on">
<div id="twitter_right" style="top: 35%;">
<div id="twitter_div">
<img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4dyy857YIFMzsZ1WputUtkCjKawW1_AZcIko3ej4LapVOItz3Pp-Rjg-COsk6ApBU-TFweHWPFOzWejAvhEHXPyBWZ47i4A5Ne2MZ2jzHvItmFyGK5ZOg7czzbFBH3bxGHKVNUGcbAq4/s1600/%25255Bwww.latesthackdemo.blogspot.com%25255Dtwitter_right.png" />
<div id="twitterfanbox">
</div>
<script type="text/javascript">fanbox_init("StudyByTips");</script>
</div>
</div>
</div>

• Now change the code in bold letters from the above script , ie. Facebook username-blog.studybytips and Twitter username-StudyByTips with your respective usernames.
• Then save the widget and save your layout arrangements.
• That's it.