Tutorial to Add Stylish Facebook Like Box below Blogger Posts

This beautiful Facebook Like Box allow your Readers to Share the Post and also become a fan of your FanPage. This will increase facebook Likes to your blog. Have Good Content and this Widget below your post, then Watch likes flow.


Follow these 3 Steps to Add Facebook Like Box to all your Blogger Posts.

Backup Your Template First


Step 1: Login to Blogger > Design > Edit HTML > Expand Widgets

Step 2: Search for the following Code
]]></b:skin>
Step 3: Above it, Paste the following CSS
.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:560px;
}
.fb_like_top {
overflow:visible;
padding:0;margin:0 0 5px;
width:349px;
height:24px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOBoHXwJXNJQ0Owr9PMlkzJ4-TJazNZKuXXcZm8g8K5P_1POpxz7jduWYBsvqOqOiqQr4GFuU7evyqzounzoBEW7a7VbT1FC0zJWydLRKp8vhfiGs6H4wAAetTKmhVq1nFeQZj_LRaiuA/s1600/Facebook_logo.jpg") no-repeat scroll left top transparent;
}
.fb_like_top a {
height:24px;
width:114px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3qLtVkuRUt3QWN13-DCAIs3pQcwIE_fUJdwcL12KVH6JMUBKa_0x-Qd3lfOChWEpj38hRpXJfPjX0zOePFPx-_iH7wI9e7woxqU0vjkgDA8JhoDVnLifQoDPMV-zM-DZCrahacFiWG_c/s1600/Become+a+Fan.jpg") no-repeat scroll left top transparent;
display:block;
margin-left:445px;
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:535px;
height:42px;
}
Step 3: Now Search for
<data:post.body/>
Step 4: Below it , add 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='Facebook fanpage URL '>Become 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>
Replace Red Line with your Facebook fan page url.

Step 5: Save Template. That's it.

If you have any trouble making it work, drop in your comments.