How to Add Facebook Like Popup Box for Blogger

Today we provide you new blogger tips to add facebook like popup box for blogger. Some time ago we discussed about how to add like box widget in your sidebar now we provide you full step by step guide to add popup like box widget for blogger to increase more facebook likes of your facebook fan page. This facebook like box appear after your site or page load.

Add Facebook Like Popup Box widget for Blogger

Follow below steps to Add Facebook Like Popup Box widget for Blogger:

Step 1

Log in into Blogger Dashboard.

Step 2

Go to Template and Click on Edit HTML Button as shown in below picture.

Step 3

Find below Code With the help of CTRL+F

</body>

Step 4

Copy and Paste below code before </body>:

<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(&quot;load&quot;, function() {
// Animate Top
$(&#39;#haakblogFBpop&#39;).animate({top:&quot;150px&quot;}, 1000);
// Widget by http://expertbloggertricks.blogspot.in $(&#39;a.haakblogclose&#39;).click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='haakblogFBpop'>
<center>
<b>Don&#39;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%2Frechargetips4u&amp;width=300&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false&amp;appId=196282097100252' style='border:none; overflow:hidden; width:300px; height:258px;'/>
</center>
<a class='haakblogclose' href='#'>&#215;</a>
<center style='float:right; margin-right:10px;'>
<span style='font-size:xx-small; color:#000; text-decoration:none;'></span>
<a href="http://expertbloggertricks.blogspot.in/" rel="dofollow" target="_blank" title="blogger tips"><img src="https://bitly.com/haakblog" alt="blogger tips tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://expertbloggertricks.blogspot.in/2014/07/how-to-get-free-automatic-backlinks-to.html" rel="dofollow" target="_blank" title="blogger templates"><img src="https://bitly.com/haakblog" alt="blogger templates" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href='http://expertbloggertricks.blogspot.in/2014/07/how-to-add-facebook-like-popup-box-for.html' style='font-size:xx-small; color:#3B78CD; text-decoration:none;' target='_blank'>Widget</a></center>
</div>

Change rechargetips4u to your Facebook Page Name

Step 5

Click on Save Button.