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

Add This To Del.icio.us Tweet/ReTweet This Share on Facebook StumbleUpon This Add to Technorati Digg This

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

Tweet

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