How To Add Stylish Facebook Like Box Below Blogger Posts?

This Tutorial will tell you "How To Add Stylish Facebook Like Box Below Blogger Posts".Facebook is a number one social networking site in the world. Through the Facebook you can get a lot of traffic for your blog or website. Facebook has a lot of social plugins:- Like, Fan Box, Share This, Comments etc.

We are talking about the Stylish Facebook Like Box. This Fan box allow your your visitors to like the page & share the post on Facebook profile.This will help you to increase the likes for your blog. Add this awesome Facebook Fan Box to your blog and see the amazing results.

Follow the steps given below for adding this stylish fan box to your blog:-

Note:- Backup Your Blogger Template First

• First Step :- Log In To Your Blogger Dashboard - Go To Design - Edit HTML - Expand Widgets
• Second Step :- Search The Following Code In Your Blog

]]></b:skin>

• Third Step :- Just Above This Line Paste The Following CSS 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: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/AVvXsEizvx3Jl_SVpYU97apbljc4MP12bcaiRMNJv5MOQGfZuhN5ynhAqthy7I0xR0B2GKZyPq_F0WIx_lTaUiFSyn0OhRYD9QPa-Pk6VvCalQxPWdHdlccStPNzm6tnVmhKPS5jn3iNAlerS-o/s1600/Facebook_Likebox_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/AVvXsEjjPnOdt8WvAaJ-KsCiHmY-uxhHUA0vxe02P3FrhbkCCzn6m7gjEJlSURsIP3L7W6TxY9doNPkdDsPTIsTiT8FaAtIiYrv7PfcPpmw7LVvFOI8TQ9fDOizDtnzu2jig7PhRCtEU2lulfNc/s1600/Become+a+Fan_Logo.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;
}

• Fourth Step :- Now Search The Following Code

<data:post.body/>

• Fifth Step :- 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb_like_box'>
<div class='fb_like_top'><a rel='nofollow' href='Facebook Fan Page 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>

Note :- This is almost done, But replace the Blue Line ( Facebook Fan Page URL ) with your Facebook Fan Page URL.

• Sixth Step :- Save Your Blogger Template & Its Done.

If you need any help regarding this tutorial then contact us or just leave a comment below in comment box. Enjoy..!!! Keep In Touch For More Tutorials