Add Advanced Facebook Likebox To Blogger[V1]

Have you noticed Facebook like box in our blog? how it is? i think this is nice :). Now a days every website have facebook like page and they have facebook like box on website or blog. Facebook provides like box with credit link and looking not attractive. But we can customize it using some css tricks. This is just widget.  you can  add  it  to  your blog easily. I think  it will  helps to  make  your  blog  attractive.  Check   below demo  link.(you can see in our blog's Sidebar also)

 DEMO

How to add on blogger?

• Login to blogger > Design >Page element
• Click Add Gadget > 'Html/Javascript'
• Now Copy and Paste below code

<style>.pokharatechfb {
width: 270px;
height: 150px;
border-radius: 3px;
position: relative;
background-color:#f4f4f4;
padding:5px 10px 15px 0;
}
.pokharatechfb, .pokharatechfb:before, .pokharatechfb:after {
background: #f4f4f4;
border: 1px solid #ccc;
}
.pokharatechfb:before, .pokharatechfb:after {
content: "";
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.pokharatechfb:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #ccc;
}
</style>
<div class="pokharatechfb">
<div style="height:155px;overflow:hidden">
<fb:like-box href="https://www.facebook.com/pokharatech" data-width="300" data-height="250" 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: 250px; 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.bloggertrix.com%252Ff1ae6f85bc%26relation%3Dparent.parent%26transport%3Dpostmessage&amp;colorscheme=light&amp;header=false&amp;height=300&amp;href=https%3A%2F%2Fwww.facebook.com%2Fbloggertrix&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>

 

Replacement

Replace pokharatech your facebook username.

• Now Save 'HTML/Javascript'

All done, If you face any problem during this process, feel free to ask in comment. Peace, Happy Blogging !!