Monday, April 23, 2012

Add Twitter Pop Out Follow Me Fan Box With Jquery Hover Effect


The new twitter follow me Pop out widget with hover effect is so cool widget. When you place your mouse on Twitter Fan Box it splits with awesome hover effect. In the previous session i had a article on 4 in 1 social share widget. It is also same.




Adding To Blogger

  • Go to Blogger Dashboard → Design → Edit HTML

  • Find the following code

  • </head>
  • Now copy and paste the following code Just after it

  • <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    [ It is called Jquery JavaScript Plugin,You have to skip this step if you have already this plugin in your template ]
  • Now save the template



  • Now Go to Page Element → Add A HTML/Javascript Widget

  • Copy and paste the following code in a widget ( position does not matter )


  • <script type="text/javascript">
    //<!--
    $(document).ready(function() {$(".mdslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
    //-->
    </script>
    <style type="text/css">.mdslikebox{background: url("http://2.bp.blogspot.com/-DObNTvCXmwM/T5YwLANZnrI/AAAAAAAAAdA/AhZqNvroYRk/s1600/twitter.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 275px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}.mdslikebox div{border:none;position:relative;display:block;}.mdslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}.mdslikebox span a{color: #808080;text-decoration:none;}.mdslikebox span a:hover{text-decoration:underline;}</style><div class="mdslikebox" style=""><div><div id="twitterfanbox"><script type="text/javascript">fanbox_init("BESTRAFI");</script>
    </div id="twitterfanbox"><span>By <a href="http://www.edutechnology.net/">Edutechnology.Net</a> / <a href="http://www.edutechnology.net/add-twitter-pop-out-follow-me-fan-box-with-jquery-hover-effect/">+Get This!</a></span></div></div>


  • Now save

  • You have to change the twitter username which has been highlighted above


  • Usefulness Of This Gadget
  • It will increase your followers

  • It does not occupy place rather it is a floating gadget with hover effect


  • Please comment here if you enjoy the article. Take only 5 seconds to share with your friends

    1 comment:

    1. realy good tips, I also would lke to share more on my blog http://oyaah.blogspot.in

      ReplyDelete