This widget remains easiest way of increase facebook likes for your blog. this widget in a fixed position on right hand side of your blog. when you hover over the widget , the widget has animated with the Help of Jquery Simple when you take your mouse cursor on facebook widget,the like box and button appear.and its work Jquery.
Facebook pop up like box now a days used by many bloggers and webmaster to increase their Facebook fan page traffics in short period of time. Facebook pop up like box gain popularity day by day and it becomes a well known Facebook widget in past. in you might have observed that now a days every one every webmaster and bloggers promote theirs blog website in different ways and styles. Many of them use this widget and it will surely increase your facebook fan page traffics.
How To Add This In Blogger?
- Go To Blogger Dashboard>>Layout>>Add Gadget
- Select HTML/JavaScript Gadget
- And Paste the Following Below code in your HTML/JavaScript Gadget
<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/AVvXsEi6NR0U-bW_ygoGgDH-d-72gmStOIZT-6ogx-7gSj3t8XRI6JUCZ7mJ6gv_3EtuLQZ29BxoSxgCHoHAvVQLet8NkWPcKNqZaRbpkhD5SBlT0TOYQ67vowckNNHNgACZYGUSduFoawQYFN-b/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 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%3A%2F%2Ffacebook.com%2Fnextbloggertricks&width=245&colorscheme=light&show_faces=true& connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div></div>
- Replace nextbloggertricks With your Facebook Username.
- Replace float: right Position with desired position left or right
- Last Paste this Jquery code in template <head> section.
- See an example.
<head><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/></head>
- After Save your Template.
- Finish.
So friends this is our today's tutorial if you have any problem so please leave your comments and give the good feed back. Please like our Facebook fan page for our latest tutorial directly in your home page. also share this post with your friends on social networking sites.
Happy Blogging!
Nice widget... Thanks For Sharing
ReplyDeleteFacebook Auto Poster
Thanks bro Keep Visiting
Delete