HOW TO ADD FLOATING FACEBOOK LIKE BOX TO BLOGGER

Floating Facebook Like Box for Blogger: As by the saying " Sharing is caring"every one needs to share their posts on the social media sites. Sharing your posts to social media not only increases your Blog readers or fans But also it put a good impression on search engines when a specific post you share on those social media sites is liked by peoples. However Facebook and Bloggers have made it simple for you to share your post to those social media sites, one is Social media icons through which you can easily share your posts and the other source of getting Fans is the Facebook Like box For your Blog. But that like box was static.
Today we are here with totally different stuff, we are going to post FloatingFacebook Like Box for Blogger. Actually by adding this widget, a Facebook likebox from the right corner will pop out, which looks very cool. This effect is designed using jQuery. So lets do it!

Floating Facebook Like Box

How To Add Floating Facebook Like Box To Blogger

Adding This widget is very simple just follow the below easy steps with images to embed this Tutorial on your personal Blog.

• First of all Go to Blogger Dashboard.
• Then click on your Blog.
• Now click on the Template tab as shown below.

 

• Now click on the Edit HTML tab 

• Proceed in the HTML coding.
• Now search for the </head> tag in the template coding ( by pressing CTRL+F you can find).
• Now copy the below jQuery script and paste it above the </head> tag.

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

• Now save your template!
• If you do the above steps, then go to Layout tab .
• Click on the Add a Gadget link as shown below.

•  A list of gadget will appears, select the HTML/Javascript gadget from that list as shown below.

 

• A box will appears, Now copy the Below script and paste it in that HTML JavaScript box.

<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/AVvXsEgE23KiHcYhq5ud5hz8InHIP1E2c6Pz-sm_hjjx5D3qLH1tMf1py6Mvqxdpc-5FBRr60GR6yYNjTBR-SZdm3AsMyD0jwXa28mch4b3TAqTADrKiKAgsKZdLuohXUIUevGciUJkJCFWibSM/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=https://www.facebook.com/pages/Computers-tricks/129813577224812&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://computerstricksntips.blogspot.in/2013/12/how-to-add-floating-facebook-like-box.html"> computers tricks</a></span>     </div> </div>

Customization Before Saving

- All you have to do is, change the text in red to the Facebook page address of your page.

- Now that's it! Click on the save Button.

- If you have any problem while adding this widget to your Blog simply share your problem with us through the comment box, it will not spoil up! We are always here to solve your problems!