Monday, January 14, 2013

Attractive Facebook Like Box Style For Blogger

In this  post  im    gonna   explain  how  to  add new style facebook like box  for  your  blog.  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 get social media post with similar widgets.

Attractive+Facebook+Like+Box+Style+For+Blogger

Demo

1. Log in to blogger  Design > Page Element.

2. Click Add Gadget and select 'HTML/Javascript

3.Now Paste Below code.

 <style>.blogtrixfb {
width: 280px;
height: 150px;
border-radius: 3px;
position: relative;
background-color:#f4f4f4;
padding:5px 10px 15px 0;
}
.blogtrixfb, .blogtrixfb:before, .blogtrixfb:after {
background: #f4f4f4;
border: 1px solid #ccc;
}
.blogtrixfb:before, .blogtrixfb:after {
content: "";
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.blogtrixfb:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #ccc;
}
</style>
<div class="blogtrixfb">
<div style="height:155px;overflow:hidden">
<fb:like-box href="https://www.facebook.com/bloggertrix" 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>


After paste above code
* Replace bloggertrix with your facebook username

4. Now save your HTML/Javascript'.

    You are done...

5 comments:

  1. This is what I'm looking for! thanks a lot for this awesome facebook like box

    ReplyDelete
  2. wow working for me.great tutorial sir.keep it up

    ReplyDelete
  3. Nice style, I have subscribed for your blog and whenever you post any article, I come to read here. In my views, you love to play with css.

    Well, On my blog: Best Way Of Using Sticky Post Option In Wordpress

    ReplyDelete
  4. Thought this type of commenting style can't be brought into blog due to the copy rights issue and there were no plug-ins available. Anyway thanks a lot for sharing this technique with us.

    ReplyDelete
  5. Handy little trick, thanks for sharing

    ReplyDelete