How to add Sliding Floating Facebook Like box in Blogger

Adding Sliding Floating Facebook Like box in Blogger blog is very useful plugin for making your website more stylish, But it makes your blog some heavy,  If you need this than so today we are including more tutorial which is related to Facebook Plugging that is How to add Sliding Floating Facebook Like box in Blogger, Now blogging is fashion, Mostly had a blogspot account, Every one wanna their blogs so attractive and stylish so they always add something new and more beautiful widget on their blogs, Fb like button also popular with developers. There are many Facebook like a button, We also share many tutorial like Facebook Popup like box with Timer and also a better tutorial How to add Fb Like button in every post, Today we share with something new like button which called Sliding Facebook Like Box or Floating Facebook Like Box, Lets try this and get it with live demo.

Add Sliding Floating Facebook Like Box in Blogger

It's a simple Code, I am giving you two types codes, One you must insert in above </head> Tag in blogger template, and a second one just copy and save it in your new HTML widget,  You can change sides right and left, It depends on your template style, so it's very simple just change your Page name and do it, Than follow our easy steps for this.

You May Like How To Add facebook Comment system in Blogger 

Watch Live Demo

Login to your  www.Blogger.com Dashboard.

Go to on your Template and Edit Html.

Search for </head> tag Using CTRL+F,

Just before ( Above )  </head> tag, paste Below Code.

<<span id="c190b594-89f6-4b8d-82fd-efd7bd70b872" ginger_software_uiphraseguid="df0288aa-9da3-4318-bf0d-8cb52610e907" class="GINGER_SOFTWARE_mark">script</span> src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>


Now second Step For added Second Code in widget.

-  Go To Your www.blogger.com

-  Open Your Desire Blog.

-  Go To "Layout".

-  Click "Add A Gadget" Where You Want To Add It.

-  Now Scroll To "HTML-JAVASCRIPT"

-  Click "+" Icon To Add HTML-JAVASCRIPT It.

-  Now Copy The Below Code And Paste It To Their.

-  Leave The Title Empty.

-  Click on  Save, Now It's Done
.
Note -Replace newfaceboooktipstricks with your own Page name.

<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/AVvXsEgcb1gukhzX7u1VStDm1ezRpfcSAnypUgLXk2cpCYw9P2u4C5Ll8pkgiAuS6exkF92oGf5iUK0Lo8mnzEFucZ42v6KAbuvkx11y6J6ykxfW6IZC28iLpoM8_sfRvg5_J3v0NEgYUuMKaFM/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%2Fnewfaceboooktipstricks&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&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://new-facebook-tipstricks.blogspot.com/"> New Fb Tricks Tips</a></span> </div></div>

- Save It and done.

How to add Sliding Floating Facebook Like Button in Blogger's Lest Side

If your template look is better when you set left side, then you must use in Left side, If you wanna show this in Right side, then you can also set it right side, Just change some words and done

If left you wanna this floating Sliding in left side than, Set  side left. Just Set Float Left.

How to add Sliding Floating Facebook Like box in Blogger's Right Side

If you wanna move it to the right side than just replace float left to float right side, If you have any question about this article, Or you have any issue with completing this tutorial then feel free and ask us, We will try to share your answer as well as soon, Thanks for visit our blog and keep it for more tutorials, You can share this may be your friends also need this.
If left you wanna this floating Sliding in Right side than, Set  side Right,. Just Set Float Right.

Final words

If wanna any help with this tutorial please comment below, we will sure help you, We also Give special Thanks to ExeIdeas.com complete blogger tanning and the Guide and any help, Keep Visiting for latest Facebook Tips and Tricks, If you like this article, Please comment below to say Thanks