Awesome Custom Facebook Like Box For Blogger

Cascading Style Sheets (CSS) is a heart of web designers.We can design any thing as our wish with using CSS.We already published four custom like boxes and again we are here with another cool custom facebook like box.For creating this like box we does't use any JavaScript or jQuery, this like box is created with using pure CSS. This widget is extracted from labnol and after making some several changes we managed to create custom facebook like box.I have kept the installation of this widget damn easy you just have to copy and paste the code.You can check our previous versions of facebook custom like boxes.

Previous Versions Of Custom Facebook Like Boxes

1. Custom Facebook Like Box - V1
2. Custom Facebook Like Box - V2
3. Custom Facebook Like Box - V3
4. Custom Facebook Like Box - V4

How To Add Custom Facebook Like Box To Blogger?

1. Go to Blogger Dashboard > Design > Page/Edit Layout. (In new User Interface Dashboard > Layout)
2. Add a Gadget > HTML/JavaScript.
3. Paste below code after changing my username with yours and save it.

<style>.helperbloggerFB {
width: 280px;
height: 150px;
border-radius: 3px;
position: relative;
background-color:#f4f4f4;
padding:5px 10px 15px 0;
}
.helperbloggerFB, .helperbloggerFB:before, .helperbloggerFB:after {
background: #f4f4f4;
border: 1px solid #ccc;
}
.helperbloggerFB:before, .helperbloggerFB:after {
content: "";
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.helperbloggerFB:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #ccc;
}
</style>

<div class="helperbloggerFB">
<div style="height:155px;overflow:hidden">
<fb:like-box href="https://www.facebook.com/Btsnts" data-width="300" data-height="179" data-show-faces="true" data-border-color="#f4f4f4" data-stream="false" data-header="false" class=" fb_iframe_widget "><span><iframe id="f5741c08" name="fdd6ca2ec" scrolling="no" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; overflow-x: hidden; overflow-y: hidden; height: 179px; width: 300px; " class="fb_ltr" src="http://www.facebook.com/plugins/likebox.php?border_color=%23f4f4f4&amp;channel=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df2babfba84%26origin%3Dhttp%253A%252F%252Fwww.btsnts.com%252Ff1ae6f85bc%26relation%3Dparent.parent%26transport%3Dpostmessage&amp;colorscheme=light&amp;header=false&amp;height=179&amp;href=https%3A%2F%2Fwww.facebook.com%2FBtsnts&amp;locale=en_US&amp;sdk=joey&amp;show_faces=true&amp;stream=false&amp;width=300"></iframe></span></fb:like-box>
</div>
</div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Now replace Btsnts two times with your facebook fan page username and save your widget.

If you want to customize this widget then you can edit above CSS properties as you wish.If you want to make changes to this widget use our HTML Editor.

Credits

This widget is totally customized and bloggerized by helperblogger,If you want to share this widget with your readers then kindly link back to this article.

I hope you will surely like this custom facebook like box.Don't forgot to share this with your friends...