Monday, 7 April 2014

Add Mini Sliding Facebook Like Box For Blogger Bog

by ItsGhani
Mini Floating Facebook Likebox
Are you searching a method to boost up your Facebook Fan Page Likes? Today  I am giving you a unique widget to Increase Your Facebook Likes. Add a Mini floating Facebook like box to your blog or website.  The widget remains in a fixed position on the right-hand side of your site.  When you hover over the blue Facebook image, the like box will then slide and reveal itself using jquery. As you know Social Media Back linking is necessary to increase page rank and to maintain site health. So keeping in mind I developed this widget and I am sure this will Increase your Facebook Likes.  I already shared a Floating Facebook Like Box and Popup Facebook Like Box Widgets for Blogger Bog but toady I am sharing a Mini Version of Floating Facebook Like box. I am sure you will like it!

How to Add Floating Facebook Like Box in Blogger?

PART-1:
  1. Login to Blogger Account.
  2. Go to Layout Tab.
  3. Click on Add a Gadget.
  4. Then scroll down and select widget type as HTML /JavaScript.
  5. Paste the following Code inside it.
  6. Hit Save button and View your Blog. :)
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".bbtmini").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.bbtmini{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;display: block;float: right;height: 100px;padding: 0 5px 0 30px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.bbtmini div{border:none;position:relative;display:block;}
.bbtmini span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.bbtmini span a{color: #808080;text-decoration:none;}
.bbtmini span a:hover{text-decoration:underline;}
</style>
<div class="bbtmini" style="right: -250px;">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FBestBloggerTricks&amp;width=230&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=100" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 100px; width: 230px;background:#fff;"></iframe>
</div>
</div>

PART-2:
(Note: Ignore this step if your blog is showing this widget without applying this step.)
  1. Login to Blogger Dashboard. 
  2. Go to Template >> Edit HTML. 
  3. Search for <head> inside your Template.
  4. Paste the following Code just below it.
  5. Hit Save Template and Enjoy!

Customization:

  • Just replace BestBloggerTricks with your Facebook username.

 Congratulations: You have successfully added Mini Sliding Facebook Like Box in your Blog. I am sure this will help you alot to boost up your Facebook Likes. We also shared many Widgets about Facebook Like Boxes you can also check them. If you have any query about this post then feel free to comment below. We will answer your query as soon as possible. Happy Blogging and Stay Blessed :) 
Allah Hafiz till next post!

0 comments:

Post a Comment