Add Floating Sliding Facebook LikeBox Widget in Blogger
Simple when you take your mouse on facebook image , like box will then appear.
Add Facebook Floating Like Box Widget in your blogger websites
The process of adding this widget to your blog is simplest. You need just to follow below steps:
1. Open Blogger
2. Go to Layout
3. Add a Gadget
4. Add HTML/JavaScript
5. Copy the below code and Save
<!--Floating Facebook Widget by http://bloggerseotipstraining.blogspot.com/ START-->6. Save Arrangement
<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".blogtipsuk").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .blogtipsuk{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV_GLSCvB6szsxNBkYOIJ4msDilf6gDZ85-GhxyqvUOG7X9uvItmqerQBZnCWLmj1CIZh5WRIphC2ETs0md3spmPNL6OYndTziRDXC0_w0W7m2Zg7cduFKS-Va_61iT-z1moU51GMHmGaq/") 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%;} .blogtipsuk div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .blogtipsuk span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .blogtipsuk span a{color: gray;text-decoration:none;} .blogtipsuk span a:hover{text-decoration:underline;} } </style><!--Brought to you by http://bloggerseotipstraining.blogspot.com/--><div class="blogtipsuk" style="">
<!--http://bloggerseotipstraining.blogspot.com/2014/04/add-stylish-facebook-floating-like-box-widget-to-blogger.html--><div>
<!-- http://bloggerseotipstraining.blogspot.com/2014/04/add-stylish-facebook-floating-like-box-widget-to-blogger.html--> <iframe src="http://www.facebook.com/plugins/likebox.php?href=Write URL of Facebook Page&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;color:000;"><!--Brought to you by www.BlogTipsUK.com--></iframe><!--Brought to you by http://bloggerseotipstraining.blogspot.com/--><span><!--Brought to you by http://bloggerseotipstraining.blogspot.com/--><b:if cond='data:blog.url == data:blog.homepageUrl'><center>
<a style="color:#a8a8a8;font-size:8px;" href="http://www.blogtipsuk.com">New Blogger Tips</a> - <a style="color:#a8a8a8;font-size:8px;" href="http://bloggerseotipstraining.blogspot.com/2014/04/add-stylish-facebook-floating-like-box-widget-to-blogger.html">Floating Facebook LikeBox in website</a></center></b:if>
</span></div>
</div>
<!--Floating Facebook Widget by http://bloggerseotipstraining.blogspot.com/ END-->
Customization
1. The floating is set to right side of your blog, if you want set it for left side of your blog then simply change the bolded float:right property to float:left
2. Change Write URL of Facebook Page with your own facebook page URL.
Note:
2. Change Write URL of Facebook Page with your own facebook page URL.
Note:
If the floating facebook like box widget is not working properly after step 1, then you need to add jquery to your site.
Follow the instructions below.
1. Go to Design>Edit HTML
2. Search for <head> and just below it paste the following JQuery code.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
Categories:
Blogger,
Blogger Tips,
Blogger Widgets,
Social Media Widgets
Liked this post. Share!
Enjoyed the article so far? Recommend it to your friends and peers.
:)
:(
:))
:((
=))
=D>
:D
:P
:-O
:-?
:-SS
:-f
d(
:-*
b-(
h-(
g-)
5-p
y-)
c-)
s-)
d-)
w-)
:-h
:X
I appreciate your Great post and Thanks for sharing this awesone information, so now I wanted share something new instant approved and do follow article site http://povonte.com
ReplyDeleteFantastic! Really! This website is way better then everything I ever saw. This was great! I've learned a lot of cool techniques about your blog and it's very helpful to me Dubai Dedicated servers provider
ReplyDelete
ReplyDeleteThank you for being supportive by sharing your own thoughts and ideas with us. Please keep sharing such information.
Guestpostbloggin
Best Guestpostblogging Service
It work nicely. Thanks for the publisher. You can visit my website it result popup facebook like box
ReplyDeleteNice Post
ReplyDeleteGood reading
ReplyDelete