Add both twitter and facebook jquery static pop out fan box widget?

Earlier i have posted the facebook widget to bloggers ‘Add static facebook pop out like box with smooth jquery hover effect’ now it time to the twitter.Now get this new twitter followers box with the image thumbnails works on the smooth static jquery hover effect
Follow these steps to add this widget successfully to  your blogger

Part1
Jquery plugin
1.Go to blogger –>> Design or Template –>> Edit html
2.Back up your template
3.Search for the code </head> by using shortcut key ctrl+f
4.Add below code just above </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
5.Save template.
Part2
Html code
1.Go to blogger->> Page elements or Layout –>> Add a Gadget->>  Html/java script.
2.Add the below code in the Html/java script box.
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".twitterboxot").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.twitterboxot{background: url("http://2.bp.blogspot.com/-Pbf_Gxpfxn8/TujHvHczKJI/AAAAAAAABLA/aRmd6pIMgDw/s1600/twitterfanbox-OT.png") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 240px;
padding: 0 5px 0 46px;
width: 245px;
z-index: 99999;
position:fixed;
right:-250px; top:20%;}
</style>
<div class="twitterboxot"><div>
<script type="text/javascript"
src="http://script-ot.googlecode.com/svn/twitterbox.js"></script><div
id="twitterfanbox"></div><script
type="text/javascript">fanbox_init("modifymyblogs");</script>
<span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://modifymyblogs.blogspot.com/2012/01/add-both-twitter-and-facebook-jquery.html" target="_blank" >Blogger Widgets »</a></span></div></div>
3.Change modifymyblogs to your twitter username.

5 comments:

  1. i have the two of them and the one is above the other ...how can i put them in different sides of the page???? please help...

    ReplyDelete
  2. Excellent pieces. Keep posting such kind of information on your blog. I really impressed by your blog.
    html5 player| html5 video player

    ReplyDelete

Please comment the message if you like post or any trouble