BOB SHARE: Add Cute Custom Facebook Like Box To Blogger

Monday, February 3, 2014

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.

Before we Move, You may Also Liked to Read:

How to Add Facebook Like Popup Box for Blogger
How to Add Facebook Share Button For Blogger
How To Add Facebook Like Box Widget For Blogger
How to Add Facebook Comments Box For Blogger

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 Haakblog 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;"><a href="http://www..com" rel="dofollow" target="_blank" title="Blogger Widget"><img src="https://bitly.com/" alt="Blogger Widget" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F&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..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..com/" target="_blank">Blogger</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..com" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://www..com" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://www..com" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F&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..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..com/" target="_blank">Blogger</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;"><a href="http://www..com" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://www..com" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://www..com" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FHaakblog&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..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..com/" target="_blank">Blogger</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;"><a href="http://www..com" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://www..com" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://www..com" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FHaakblog&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..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..com/" target="_blank">Blogger</a></div>

Style 5:

<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWjXze1mDw2kQ4WyLCVC6RDDFtuN92db6CbYFrsJ-nJxEln_reWrBAF8aONMXnPbb0hSMHzquRRQ1ndu9ok8nDX8eDwAHLJubz0qd3Yx10LstjCaSV_Mk-fi_pp6YbDGpJszL_McIblXUH/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;"><a href="http://www..com" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://www..com" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://www..com" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FHaakblog&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..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..com/" target="_blank">Blogger</a></div>

download
alternative link download

BOB SHARE