How to add custom facebook like box to blogger |add custom facebook like box

Hello guys how are you I hope you are fine..So Today we are going to learn How to add custom facebook like box to blogger. Facebook is a biggest social network in the world so if you want share your content with world then you should use facebook. i am going to teach you how to add custom facebook like box to blogger. its just like a rectangular facebook banner on your blog with facebook like option so if your reader want to follow you on facebook then they can directly join your page from your blog. this box also show number of facebook like on the banner. so just follow me to add custom facebook like box to blogger.

Step 1. Login to Blogger account

Step 2. Go to Blogger Dashboard

Step 3. Click on Layout in left side of Dashboard as you can see in picture below

Step 4. Click on Add a Gadget. When you click on add a gadget a popup will appear like this..

Step 5. There is a list of gadget you need to select "HTML/JavaScript" Gadget from the list. After selecting the gadget you need to copy the code of any one style from below and paste it into to the box and you are done.

STYLE 1:
<div style="background: rgb(255, 123, 73);background: -moz-linear-gradient(90deg, rgb(255, 123, 73) 14%, rgb(232, 129, 116) 69%);background: -webkit-linear-gradient(90deg, rgb(255, 123, 73) 14%, rgb(232, 129, 116) 69%);background: -o-linear gradient(90deg, rgb(255, 123, 73) 14%, rgb(232, 129, 116) 69%);background: -ms-linear-gradient(90deg, rgb(255, 123, 73) 14%, rgb(232, 129, 116) 69%);background: linear-gradient(90deg, rgb(255, 123, 73) 14%, rgb(232, 129, 116) 69%);width:250px;padding:0 0px;margin:10px 0;border:solid 1px #c7c7c7;"><div style="height: 250px; overflow: hidden;"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fibloggertraffic&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe></div></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://www.ibloggertraffic.blogspot.com/2013/11/add-cute-custom-facebook-like-box-to-blogger.html" target="_blank" title="Like Box Widget">Like Box Widget</a> <a href="http://www.ibloggertraffic.blogspot.com/" target="_blank">Blogger widgets</a></div>
STYLE 2:
<div style="background-color:#D6E0FF;width:250px;padding:10px 0 10px 10px;height:250px;border:1px solid #66F;border-radius:10px;box-shadow:4px 4px 0 rgba(0,0,255,0.45);"><div style="height: 250px; overflow: hidden;"><a href="http://www.ibloggertraffic.blogspotcom" rel="dofollow" target="_blank" title="Blogger Tips"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fibloggertraffic&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe></div></div><div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://www.ibloggertraffic.blogspot.com/2013/11/add-cute-custom-facebook-like-box-to-blogger.html" target="_blank" title="Like Box Widget">Like Box Widget</a> <a href="http://www.ibloggertraffic.blogspot.com/" target="_blank">Blogger tips</a></div>
STYLE 3:
<div style="background: rgb(0, 255, 0);background: -moz-linear-gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);background: -webkit-linear-gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);background: -o-linear gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);background: -ms-linear-gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);background: linear-gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);width:250px;padding:0 0px;margin:10px 0;border:solid 1px #c7c7c7;"><div style="height: 250px; overflow: hidden;"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fibloggertraffic&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe></div></div><div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://www.ibloggertraffic.blogspot.com/2013/11/add-cute-custom-facebook-like-box-to-blogger.html" target="_blank" title="Like Box Widget">Like Box Widget</a> <a href="http://www.ibloggertraffic.blogspotcom/" target="_blank">Blogger tricks</a></div>
STYLE 4:
<div style="background:#f4f4f4;width:250px;padding:0 0px;margin:10px 0;border:solid 6px #e9e8e8;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;"><div style="height: 250px; overflow: hidden;"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fibloggertraffic&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe></div></div><div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://www.ibloggertraffic.blogspot.com/2013/11/add-cute-custom-facebook-like-box-to-blogger.html" target="_blank" title="Like Box Widget">Like Box Widget</a> <a href="http://www.ibloggertraffic.blogspot.com/" target="_blank">Blogger widgets</a></div>

You need to do one more thing just replace ibloggertraffic by your facebook page name...thats it..
if this post is helpfull for you then please comment because your comment is my motivational tool for next post..thanx...