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.



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/AVvXsEghYkT4BPYrCBm817hyphenhyphen_ZuAv8wuLXvsr_ixwSULrspnXYmWa9IE9YhEHy4QWWuCpcCdd6oUlMrQWDZ-6lGiwNUXj5sA1Q-T9jLwiPncxDjvuX65mcMLQ9alLvvp5ztEuN5WhXpT0WViH0k/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!!!!!
 
Top