How To Add Labnol Like Facebook Like Box In Blogger

By
Advertisement

How To Add Labnol Like Facebook Like Box In Blogger

Facbook is the biggest social network . Around millions of people will get engaged in facebook daily . By adding facebook like box to your blog is the best way to get interact or to get viral traffic to your blog .So many css designs available in facebook like but labnol style like is unique and popular . Here is the simple tutorial how to add to your blog .


Live Demo Below : 



Tutorial :  How To Add Labnol Like Facebook Like Box In Blogger

  • Login to blogger dashboard .
  • Now click on Layout tab .
  • navigate to Add a Gadget .
  • Scroll down to Add HTML/Javascript . 
  • Paste the below code .

<style>.mdFB{
width:320px;height:150px;border-radius:3px;position:relative;background-color:#f4f4f4;padding:5px 10px 15px 0;max-width:96%}.mdFB,.mdFB:before,.mdFB:after{background:#f4f4f4;border:1px solid #ccc}.mdFB:before,.mdFB:after{content:"";position:absolute;bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.mdFB:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #ccc}
</style><div class="mdFB"> <div style="height:160px;overflow:hidden"> <fb:like-box href="https://www.facebook.com/bloggerzlab" data-width="340" data-height="189" data-show-faces="true" data-show-border="false" data-stream="false" data-header="false"></fb:like-box> </div></div><div id="fb-root"></div><span style='font-size:11px;position:absolute;'><a href='http://www.bloggerzlab.in/' target='_blank' title='Blogger Widget by Bloggerzlab'>Blogger Widgets</a></span>
<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_GB/all.js#xfbml=1&appId=549510788403215";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Save the Gadget .


Customization :  
  • Change the colored 320 px and 150 px according to your template design . 
  • Change "bloggerzlab" to your blog facebook url .

Like and share articles - Sharing is caring

Have any suggestions feel free to comment below .

0 comments:

Post a Comment