Wednesday, 2 April 2014

Add Stylish Floating Facebook Like Box Widget for Blogger

by ItsGhani
Stylish Floating Facebook Like Box
Facebook Like Box Widget for Blogger works as a backbone for any blog. Facebook has become the largest Social Media Website now a days. Facebook have millions of users daily. Every Blogger or a Webmaster wants to drive more and more traffic to his/her blog through Social Media. So, that's why Facebook is one of its top priority. It is the largest site where we can share latest updates to thousands of people daily. I already shared many Facebook Like Box Widgets but today I came with another new, stylish and amazing widget. As the blogs on Blogspot are increasing speedily so getting traffic from social media becomes an important step for every newbie. I already shared a tutorial on Adding J-Query Popup Facebook Like Box With Background Image Widget in Blogger Blog. But toady I am going to share a Blogger Widget of Adding Floating Facebook Like Box. I hope you will love this one.


How to Add Floating Facebook Like Box in Blogger?

STEP-1: Login to Blogger Dashboard.
STEP-2: Goto Layout >> Add a Gadget.
STEP-3: Choose gadget type as HTML/Javascript.
STEP-4: Now Paste the following Code inside it and hit Save button.

<script type="text/javascript">
 /*<![CDATA[*/
 jQuery(document).ready(function() {jQuery(".bbtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
 /*]]>*/
 </script>
 <style type="text/css">
 .bbtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhop2l2XJD7NavfpQxyySQca7U36EmHS2tux7BwqUWa3rGU1-ibVw__eLlsTZkGzluPL4iSoi5oRPCke4MPBPKR-iMtfKEa6KCpuJGaOf_jhAReqaZBO0eOY-SUTi3xHvmJOxPhNwaM4UIx/s1600/FB-sliding-widgets-HTD-100px.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 30px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;}
.bbtlikebox div{ padding: 0; margin-right:-8px; border:3px solid  #3b5998; background:#fafafa;}
.bbtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
 .bbtlikebox span a{color: gray;text-decoration:none;}
 .bbtlikebox span a:hover{text-decoration:underline;}
}
</style>
 <div class="bbtlikebox" style="">
     <div>
     <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FBestBloggerTricks&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><a href="http://www.bestbloggertricks.com/2014/04/add-sliding-floating-facebook-likebox.html" target="_blank">Get This!</a></span>
</div></div>

Editing:

  • Replace BestBloggerTricks with your Facebook username.


Recommended:  Add JQuery Popup Facebook Like Box With Background Image Widget

Adding JQuery Plugin in Blogger Blog


  • Login to Blogger Dashboard
  • Goto Template >> Edit HTML
  • Search for <head> in your Template. (Ctrl+F for Search)
  • Paste the Following Coding just Below it.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

 

From Editors Desk:

You have successfully added Floating Facebook Like Box to your Blog. I am sure this will increase your Facebook Fan Page Likes and this will boost up your blog traffic through Social Media. If you want to get more Blogger Widgets about Social Media then Subscribe us or join us on our Facebook Page.
If you have any query about this post or you want to appreciate our work the feel free to comment below!
Stay Blessed and Allah Hafiz till next post.

1 comment: