Put A Lovely Facebook Like Box Below Each Post For Blogger

Put A Lovely Facebook Like Box Below Each Post For Blogger

This gadget has a nice lovely designed box with a Facebook like and share button and also a link to your Facebook fan page for boosting your blog/website fans; what else you want?

Get ready to see the awesome elegance in action which will develop your blog/website. Let’s move to the tutorial.

How to Install the Facebook Like Box Below Each Post to Blogger?

STEP #1: Log on to Blogger

STEP #2: Go to Dashboard>Template

STEP #3: Click on Edit HTML>Proceed

STEP #4: Tick on Expanded Template Widget check box

STEP #5: Take a Backup your template

STEP #6: Find (Ctrl + f) for the code below

]]></b:skin>

STEP #7:  Just above that paste the following code.

.fb_like_box {

margin-top:10px;

-moz-border-radius:10px 10px 10px 10px;

border-radius:10px;

background-color:#3B5999;

border:3px solid #2B2B2B;

margin-bottom:10px;

padding:10px 7px;

width:600px;

}

.fb_like_top {

overflow:visible;

padding:0;margin:0 0 5px;

width:349px;

height:24px;

background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOGn7vnkjYYCE2n5mF6ngx2zISvDluCaq3DoeFEQSzm4HmX1n91i8m3TusUGWNMFUw9LA4cCqT7gQwxQy5zAaOuKMHCrH0CKRNzy4q62P3x-Qo8MyjKv97v3nSaBlldGR9H7EwMUvU5Ok/") no-repeat scroll left top transparent;

}

.fb_like_top a {

height:24px;

width:114px;

background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsdWDB_b63a6Znu26gK_pqCCCHPa0NrRA_TkCHhhWYyCIfCdzLvm-LayIqgNMxYEr9cSLpdbU1BUbkMap_6iNUMNiLzMs72BA9TqlpH676bnKT2CN4jqY53yz5j8OFHJFbL8Ok5eRhNA/") no-repeat scroll left top transparent;

display:block;

margin-left:485px;

text-indent:-5000px;

}.fb_like_button_holder {

-moz-border-radius:10px 10px 10px 10px;

border-radius:10px;

background:none repeat scroll 0 0 #FFFFFF;

padding:12px 12px 0 12px;

width:575px;

height:42px;

}

How to Customize?

• You can change/adjust the width value 600px according to your blog.

STEP #8: Now find (Ctrl + f) for the code below

<data:post.body/>

STEP #9: You may find this code 2 or 3 times but you just need to concentrate on the first one in your template. Just below that code paste the following code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='fb_like_box'>

<div class='fb_like_top'><a rel='nofollow' href='http://www.facebook.com/WARSI.LOG.5'>Be a Fan</a></div>

<div class='fb_like_button_holder'>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px;height:30px;'/>

</div>

</div>

</b:if>

How to Customize?

• Replace WARSI.LOG.5 with your Facebook username.

STEP #10: Now click on Save and it’s done.

So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.