How to Add Facebook Like Popup Box for Blogger

How to Add Facebook Like Popup Box for Blogger

In this Post i will teach you Step by step how to add Facebook popup like box in your blogger's blog. In this way you will get more likes. Facebook fan page popup will appear after every page that load. 

Step By Step Guide to Add Facebook Like Popup Box for Blogger

Step 1:  First of all Login into Blogger Dashboard.

Step 2: Go to Blogger "Template" Tab and Click on Edit HTML as Shown in the Image Below.

Step 3: Find the Closing Body Tag </body> With the Search Function By Pressing the Keyboard Shorcuts Ctrl+F.

Step 4: Just Copy the below code and  Paste it before closing the Body Tag </body>.

Step 5: 
<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 www.haakblog.com

$(&#39;a.haakblogclose&#39;).click(function() {

$(this).parent().fadeOut();

return false;

});

});

</script>

<br />

<div id="haakblogFBpop">

<!-- Widget by seoarticles4u.blogspot.com Start -->

<center>

<b>Don't Forget to Like Us On Facebook</b></center>

<center>

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fseoarticles4u&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; height: 258px; overflow: hidden; width: 300px;">

</center>

<!-- Widget by seoarticles4u.blogspot.com End -->

<a class='haakblogclose' href='#'>&#215;</a>

<center style='float:right; margin-right:10px;'>

<span style='font-size:xx-small; color:#000; text-decoration:none;'/> <a href='http://seoarticles4u.blogspot.com/2013/11/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>

</iframe></center>

</div>

Step 6: Now Chande seoarticles4u With your Own Facebook Page. and After that Save Changes. Now you Have Done.