Today I share the widget of blogger.Here is Floating Fb Like box.This widget is best for web/blog because social media is most important to promote your blog.customize this widget e.g You Can Chang it's Position.This widget Make your blog more Beautiful.Maybe you Like this post.If you want to adding this widget in blogger.please follow these steps.See pic Example of Floatind facebook like box.
How to Add Floating Facebook Like box to blog?
Follow steps and add this widget.
- Go to Blogger > Layout > Add a Gadget > Select HTML/JavaScript Gadget
- Add an HTML/JavaScript Widget and paste below codes in Gadget box.
<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/AVvXsEieTuhkhK1ciInXz_tNTbQHc-ZHbYNWgdCwFxQKoqdZUPIvXKDl83lFuUn46U4GeT7B8vGX6eCtOzhHnh5C2iDNYLtsOpLlX5Pde-oeh8gs3ZbkWbYuCmdXHqsptdX_rFId-WZXHH7uB-wc/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%2FMr.Mehedi&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>
Save the widget.
After adding above code now find this tag </head> (use:Ctrl =f) in your Template >> HTML >> Proceed and Paste the below codes just above/before the </head> tag.