Add Sliding Twitter Followers Box To Your Blogger Blogspot

0
Many tutorial gives you How To Add Floating Facebook, Twitter, Google +1 Share Buttons. Now I come up with new tutorial How To Add Sliding Twitter like Box for your Blogger Blogspot.

This is a great way which requires almost no space and it looks more attractive than that of simply keeping the Facebook Likebox, it will float on your blogger blog, and when the visitors Mouse Over it will animate by sliding of left. So lets add this cool sliding Twitter likebox or follower box to your blogger blogs.

twitter likebox, twitter follower box, how to add floating likebox



STEP 1. Adding JQuery Pluging To Your Blogger Blogspot

1. Go To your Dashboard > Design > Edit HTML
2. Search for </head> before it paste the following JQuery Code.
3. (Ignore this step if you have already added JQuery Plugin yo your blog).
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
4. Save your template


STEP 2. Add Sliding Twitter Like Box To Your Blogger Blogspot

1. Go To Blogger > Design > Page Elements
2. Click on "ADD A GADGET"
3. Choose HTML/Javascript Widget
4. Paste the Following Code inside 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("http://2.bp.blogspot.com/-vurRhxn0aJA/TvCvyxkOm_I/AAAAAAAAA0k/3stDSZYMdVg/s1600/twitterbox.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("blogger4ever");</script></div><div style="font-size:10px;">
<a href="http:http://www.blogger4ever.com/2011/12/sliding-twitter-followers-box-for-blogs.html" target="_blank">Get This Widget</a>
</div></div>
5. Replace Blogger4ever with your Twitter Username. Save your template.
Visit your blog to see Sliding Twitter Like Box at right side of your webpage.

You might also like: Add Floating Facebook Likebox To Your Blogger Blogspot
Add Floating Share Buttons To Your Blogger Sidebar
Tags

Post a Comment

0 Comments
Post a Comment (0)
To Top