A blog about Download free games, Download free software and movies. Learn everything about blogging. Watch live T.V. Send free SMS and much more

Sunday, 13 January 2013

How to add a Floating Facebook Like box in Blogger?


Facebook like box for blogger  .This widget is very easy to use and very help full widget for those who want to make his blog attractive. Lots of websites share this 
 widget and we also re-sharing this widget with you this widget is only appears when some one hover it. other wise widget looking shrink. This widget also help you to get more likes on your facebook page................

How to Add Floating Facebook Like box to blog?

1, Go to blogger >> login to your dashboard >> Layout >> add a gadget >>select html/javascript
2, Paste the below code in javascript
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYAuAH1dAbockwnLxvBXWNWAvvV_WumR_e8oIhNxaJ8aBh8yMLU4XWfXqQdlq3ppnXPPeB96yYv0aFhidoHwMFkhtcQBhdUKYeg9TgpzR0-TELGqJittus22lA2K09Z-YJWu4FkmET0YhV/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 220px 5px 90px 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/A-best-Blog-name-of-Rockingaseel-rockingaseelblogspotcom/129752063852630?fref=ts#&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div></div>
 
 3,Change http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/A-best-Blog-name-of-Rockingaseel-rockingaseelblogspotcom/129752063852630 with your facebook page url.and if you want this widget to appear at left side then change the property right to left in float:right;
 4, Click to Save.

After adding above code now find this tag </head> in your Template >> HTML >> Proceed and right before it paste below code

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

0 comments

.

Share This Content:

 
© 2011 Rocking Aseel Blog (Have Everything)
Designed by Rocking ASeel Cooperated with Usama Shahid
Released under Creative Commons 3.0 CC BY-NC 3.0
Posts RSSComments RSS
Back to top