Statick popout twitter followers box with hover effect

Static popout twitter followers box with hover effect for your blog




Most of bloggers use twitter to drive more traffic to their blogs/websites.Followers is the key thing thing get more traffic using twitter.Adding follower widget to your blog is  a perfect way to get more number of real followers.If you use this hover effect widget it can easily get the attention of readers.If they interest about your blog definately they will follow you on twitter.Let's see how to add it.


This will also be useful - Static popout facebook fanpage like box with hover effect for your blog


First login to your blogger account and go to design
Press ctrl + f and search for </head>
Paste below code just above it

<link rel="stylesheet" href="https://gj37765.googlecode.com/svn/trunk/[www.gj37765.blogspot.com]multipopoutwidget.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });   });
</script>

Save your template now
Go to design and click on add a gadget
Scroll down and select html/javascript
Paste this code in it.

<div id="on">
  
<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/AVvXsEhwndwSVghjcj7NW8rbsUvOi1ip2EPGQkcewtW-VfkuWtvOWnLQXwmxVHexRnaQsHxv1NQ9BwfqJlZmJ4Nm_UaiQ9Pe1iFsa3QKKAzOyqxWp79Gr4DKnPBbzfqALBxnw_LYWelhLbAeOibB/s1600/%255Bwww.gj37765.blogspot.com%255Dtwitter_right.png" />
            <script type="text/javascript" height="100"
src="http://s.moopz.com/fanbox_init.js"></script><div 
id="twitterfanbox"></div><script 
type="text/javascript">fanbox_init("jhonmlo");</script> 
            <script>
                new TWTR.Widget({
                version: 2,
                type: 'profile',
                rpp: 4,
                interval: 500,
                width: 246,
                height: 100,
                theme: {
                shell: {
                background: '#63BEFD',
                color: '#FFFFFF'
                },
                tweets: {
                background: '#FFFFFF',
                color: '#000000',
                links: '#47a61e'}
                },
                features: {
                loop: false,live: true,
                scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all'                  }
                }).render().setUser('jhonmlo').start();
            </script>
        </div>
    </div>
</div></div>

Replace the red colour letters with your name in twitter and save it.


Check it.you have done.


Share this with your friends.If you got something don't forget to leave a comment.

Posted in: Blogging