How to add Static Facebook Like widget for Blogger - New Blogger Widgets

How to add Facebook Like Blogger Widgets

Every blogger like to get more and more fans for his/her blog as the #1 social networking site has massive potential to drive in traffic.Thats the reason everyone looking for best ways of implementing social share widgets on blogs / websites.

There are thousands of plugins out there for wordpress bloggers eleminating manual headaches,but for blogger blogs we have to do things manually.

So here is the awesome Floating Facebook like widget for blogger made by Harish of way2blogging.


How to add Static Facebook Like Float widget on blogger?
Its just simple as you think,Follow the steps

1.Goto Blogger > Design > Add Gadget > Add HTML

2. Paste the below codes.

<script type="text/javascript">

/*<![CDATA[*/

jQuery(document).ready(function() {jQuery(".w2bslikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});

/*]]>*/

</script>

<style type="text/css">

.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHd4BALKMlNHfURkEgZ5fnPhWjNS6_hR4O14sXiNXj_HeCDMhxD5xQoBdWbvN9ZVuOMr89QDyWbc_y8kPT7Q2W1o8d1p45vnuZu_t3OSKLrXqNdV_7jUrcPoBe3qccJKutkaKBtIbMNaIM/s150/w2b_facebookbadge.png") 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: 7px;text-align: right;z-index: 99999;}

.w2bslikebox span a{color: gray;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%2Fstudentscrunch&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><span><a href="http://www.way2blogging.org"rel="nofollow">by Way2Blogging</a></span>

    </div>

</div>

Replace StudentsCrunch with your Facebook fan page.

3. Save it ! Now you will have your Facebook static pop-up Like widget on your blog.

4.If you want to make this widget appear on left or right ,you can change it from float:right or float:left

5.You can also adjust the width ,height parameters to meet your need.

Thats it! See more Blogger Widgets below on Related Posts!
If you like it ,do share it on facebook,twitter..tags:facebook like widgets,blogger widgets,static facebook widget for blogger,facebook static like box