Twitter Pop Out Sliding Follow Us Box For Blogger

 Twitter Pop Out Sliding Follow Us Box For Blogger

In My Older Post I show You How To Make This pop out slider For Facebook And Google Plus,Now only one famous social networking site remains that is twitter.So today I will tell you how to make this slider for twitter.

Demo

Follow Whatever I will tell you in below steps-

• Go to Blogger Dashboard < Design tab > Edit Html
• Search for </head> tag
• Add below code Before </head> tag

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

After Adding the above code Save Template.

Now We Have To Add Widget Code

• Go to Blogger Dashboard < Design tab >Add a gadget.
• Now Add Html/Javascript.
• And Paste Following Code There And Save It.

<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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGEhYj8kBh6ZF55nILCdPuptYid4uHcXZGEtFR1LuLJJvo2k4VZL_PH_YtLx6F9OxwJxW6GgVWF8ULWIyG1q5cSfvDL_wJb77D1Vyxs8a6HAB01aBrebokOAXaOE9dY9LsGmL-JmqihVw/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("Twitter Username");</script></div></div>

Done!!!!!