7:38:00 AM
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 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;"><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 widgets</a></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 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%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
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%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 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%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 widgets</a></div>
Style 5:
<div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVdwB0C1MPdwWH_TRISbeqy5oaeGCS0_jerf8G4MBUwb37iuhjWzW1Byaj7IJA7l0jrnZ0qvV-ekoUasXd2ATfZHKmAndnbw0eV4hY5QJjqNkHww-gMtjCVRsAYPahZB4JlpW7mfFkOsXU/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%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 tutorial</a></div>
No comments
Post a Comment