Working Custom Facebook Like Box To Blogger 2016
Add Cute Custom Facebook Like Box To Blogger
This tutorial will give you how to Add Cute Custom Facebook Like Box To Blogger with different style. Choose your stylish design for Add facebook like box on your blog. Facebook Like Box is very important social widget to show your facebook fan page likes on your blog. Facebook like Box widget show and increase likes on facebook fan page. You need just copy paste below code into your blog to add this like box and need some small changes to add your page.
How To Add Custom Facebook Like Box to Your Blog
Please follow below steps to add a Custom Facebook like Box to Your blog:
Step 1
Login into your blogger account and go to blogger dashboard. Click on Layout tab at left side in your blogger dashboard and click on Add a Gadget Link. See Below picture for Help.
Step 2
After you click on Add a Gadget link A popup window will open and show you list of available gadget. Choose HTML/JavaScript from the list. See below picture for help.
Step 3
After Select HTML/JavaScript, Add your stylish code from given below:
Note: Replace Seobackbones with your Facebook User Name
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%2FSeobackbones&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://seobackbone.blogspot.com/2016/02/working-custom-facebook-like-box-to.html" target="_blank" title="Like Box Widget">Like Box Widget</a> <a href="http://seobackbone.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.haakblog.com" rel="dofollow" target="_blank" title="Blogger Tips"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FSeobackbones&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://seobackbone.blogspot.com/2016/02/working-custom-facebook-like-box-to.html" target="_blank" title="Like Box Widget">Like Box Widget</a> <a href="http://seobackbone.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%2FSeobackbones&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://seobackbone.blogspot.com/2016/02/working-custom-facebook-like-box-to.html" target="_blank" title="Like Box Widget">Like Box Widget</a> <a href="http://seobackbone.blogspot.com/" 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%2FSeobackbones&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://seobackbone.blogspot.com/2016/02/working-custom-facebook-like-box-to.html" target="_blank" title="Like Box Widget">Like Box Widget</a> <a href="http://seobackbone.blogspot.com/" target="_blank">Blogger widgets</a></div>
Style 5:
<div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTa1A22fJ0zO2h203f3iw0-8DG54tVifiTWdlkNflFUT8VL1wOhyo9c0AGn7K-AQrfbSkW1D3XCBPvBRfD8A0mfBBK1-vImv12IotKiyj-REq_6zkSFXKApGfz0iUUht8kc58R0HJr4WNK/s1600/fan-02-pic.png');overflow:hidden;border-radius: 110px;.height:250px;width: 238px;border-radius: 0px 13px 0px 0px;overflow: hidden;"><div style="height: 250px; overflow: hidden;"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FSeobackbones&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://seobackbone.blogspot.com/2016/02/working-custom-facebook-like-box-to.html" target="_blank" title="Like Box Widget">Like Box Widget</a> <a href="http://seobackbone.blogspot.com/" target="_blank">Blogger tutorial</a></div>
Post a Comment