Add Floating Facebook Like Box Widget for Blogger

Share On Google+Add This To DeliciousTweet/ReTweet ThisShare on FacebookStumbleUpon ThisDigg This

I have recently tested out another great looking social media widget for Facebook Slide out Like box widget and have indeed shoot up our subscription rate fast. Equipping your blog with social media has been one of the most important audience building strategies and surely it works wonders. The more fans we would gather, the more long term traffic source we could achieve.

And that what we all aim for and not just waiting for search engines to determine out future with algorithms updates. So lets see how can we add this amazing widget to our blogger blogs.

Live Demo

1. Go to Blogger > Design > Add a  Gadget .
2. Paste in the code.

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcQWF8FIUtyiUBN8yFJS5w9bqsLsZjksf1kMG-PhN9RX-GchyXhXo0ilQGXKDOCePmefPydsiNRN87cY7rUbhEYdwtAvkiDRP9n_WpewUp6Rv4ElrXUvoQzYPulZa4n-iTyEYee9AFoPM/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abtlikebox span a{color: gray;text-decoration:none;} .abtlikebox span a:hover{text-decoration:underline;} } </style> <div class="abtlikebox" style=""> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fcooldoodtricks&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>Widget by :<a href="http://www.cooldoodtricks.blogspot.in"> Cool Dood Tricks</a></span> </div> </div>

         
      3. Click on Save button.

• Change CoolDoodTricks with your facebook user name     

     4. Now Simply Go to Edit HTML section of your blog and find the following code:<head>

     5. Now Place below code just before <head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

    

 6. Click Save.Done...

• Facebook Like Box JQuery Popup with Timer

Kindly Bookmark this Post using your favorite Bookmarking service: