How to add Sliding Floating Facebook Like box in Blogger

How to Add Sliding Floating Facebook Like Box in Blogger 

Hello fans, we are including more tutorial which are 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 there blogs so attractive and stylish so they always add something new and more beautiful widget in there blogs, Fb like button also popular in developers. There are many Facebook like 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 sharing with something new like button which called Sliding Facebook Like Box or Floating Facebook Like Box

You May Like How To Add facebook Comment system in Blogger

Watch Live Demo

 

Add Sliding Floating Facebook Like Box in Blogger

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

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.

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


Now second Step For add 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 There.

-  Leave The Title Empty.

-  Click on  Save, Now Its 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/AVvXsEimxp7R5XclkcV49SYgachgaOei0jTXznNyVpX1cqRXnlCwUv0E5_MUNfhDp0uoaA1Pfn1i3oTeJJ20xUczHoQJgEt1u4kLnnk8nGqRGNmH0MzzQ7snqCGGtGV5yx96DhH6zl0r0pivNh8/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://fbtipsntricknew.blogspot.com/"> New Fb Tricks Tips</a></span> </div></div>

Save It

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

If your template look is better when you set left side, Than you must use in Left side, If you wanna show this in Right side than 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 left you wanna this floating Sliding in Right side than, Set  side Right,. Just Set Float Right.

Final words

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