Add Cute Custom Facebook Like Box To Blogger ~ Online Hacker

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 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.haakblog.com" rel="dofollow" target="_blank" title="Blogger Widget"><img src="https://bitly.com/haakblog" 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%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.haakblog.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.haakblog.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.haakblog.com" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/haakblog" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/haakblog" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/haakblog" 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.haakblog.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.haakblog.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.haakblog.com" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/haakblog" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/haakblog" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/haakblog" 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.haakblog.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.haakblog.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.haakblog.com" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/haakblog" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/haakblog" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/haakblog" 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.haakblog.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.haakblog.com/" target="_blank">Blogger</a></div>

Style 5:

<div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT7INoD6bE-FCZ_caAoSxjgY4fZEKt_3c13YU5RzcwDcNk1bPADyfqFum5mO79eKiyKb7WDuAQUi8D2qmoIDS09xD_HRVP_b994eSt5gkUqECr5VcKED-d10OWrMyp3Y6LhEAFZNz0UgxE/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.haakblog.com" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/haakblog" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/haakblog" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/haakblog" 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.haakblog.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.haakblog.com/" target="_blank">Blogger</a></div>

About Admin

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.