Wednesday, September 7, 2016
New Stylish Facebook Fans Page Popup Like Box for Bloggers
New Stylish Facebook Fans Page Popup Like Box for Bloggers
Here is another wonderful facebook Popup Like Box for blogger. You should follow the step by step guideline for adding the Facebook Like Box widget into your blogger for increasing your facebook Fans page likes.
This box is normally appear after page load on your blog like you see it below.

Now Let us go for the business.
Added Facebook Like Box widget For blogger
Just follow this simple process below to added it now.
Now find the below code by using Ctrl+F
</body>
Now copy and paste this below code before </body> tag.
<style type=text/css>
#haakblogFBpop {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#FEFEFE;font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#haakblogFBpop a.haakblogclose {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#000000;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:25px;
cursor:pointer;
}
</style>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js type=text/javascript/>
<script type=text/javascript>
$(window).bind("load", function() {
// Animate Top
$('#haakblogFBpop').animate({top:"150px"}, 1000);
// Widget by www.haakblog.com
$('a.haakblogclose').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id=haakblogFBpop>
<!-- Widget by www.haakblog.com Start -->
<center>
<b>Don't Forget To Join US Our Community</b></center>
<center>
<iframe allowtransparency=true frameborder=0 scrolling=no src=//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FSymbiangurus&width=300&height=258&show_faces=true&colorscheme=light&stream=false&show_border=false&header=false&appId=196282097100252 style=border:none; overflow:hidden; width:300px; height:258px;/>
</center>
<!-- Widget by www.haakblog.com End -->
<a class=haakblogclose href=#>×</a>
<center style=float:right; margin-right:10px;>
<span style=font-size:xx-small; color:#000; text-decoration:none;></span>
<a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="blogger"><img src="https://bitly.com/haakblog" alt="blogger" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href=hhttp://kudantown.blogspot.com/2014/02/new-stylish-facebook-fans-page-popup.html style=font-size:xx-small; color:#3B78CD; text-decoration:none; target=_blank>Widget</a></center>
</div>
Dont forget to change Symbiangurus to your Facebook Fans page name.
Then Click on Save Template youve Done, now view blog and see it.
Special thanks to Haakblog for giving this tutorial.
Join our Facebook Group discussion for more hot update.
This box is normally appear after page load on your blog like you see it below.

Now Let us go for the business.
Added Facebook Like Box widget For blogger
Just follow this simple process below to added it now.
- Login to your blogger dashboard.
- Scroll down to Template and click on Edit HTML as shown in the picture below.

</body>
Now copy and paste this below code before </body> tag.
<style type=text/css>
#haakblogFBpop {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#FEFEFE;font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#haakblogFBpop a.haakblogclose {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#000000;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:25px;
cursor:pointer;
}
</style>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js type=text/javascript/>
<script type=text/javascript>
$(window).bind("load", function() {
// Animate Top
$('#haakblogFBpop').animate({top:"150px"}, 1000);
// Widget by www.haakblog.com
$('a.haakblogclose').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id=haakblogFBpop>
<!-- Widget by www.haakblog.com Start -->
<center>
<b>Don't Forget To Join US Our Community</b></center>
<center>
<iframe allowtransparency=true frameborder=0 scrolling=no src=//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FSymbiangurus&width=300&height=258&show_faces=true&colorscheme=light&stream=false&show_border=false&header=false&appId=196282097100252 style=border:none; overflow:hidden; width:300px; height:258px;/>
</center>
<!-- Widget by www.haakblog.com End -->
<a class=haakblogclose href=#>×</a>
<center style=float:right; margin-right:10px;>
<span style=font-size:xx-small; color:#000; text-decoration:none;></span>
<a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="blogger"><img src="https://bitly.com/haakblog" alt="blogger" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href=hhttp://kudantown.blogspot.com/2014/02/new-stylish-facebook-fans-page-popup.html style=font-size:xx-small; color:#3B78CD; text-decoration:none; target=_blank>Widget</a></center>
</div>
Dont forget to change Symbiangurus to your Facebook Fans page name.
Then Click on Save Template youve Done, now view blog and see it.
Special thanks to Haakblog for giving this tutorial.
Join our Facebook Group discussion for more hot update.
Go to link download