Facebook Like Popup Box widget for Blogger

Facebook Popup is a great tricks for increase fan in Facebook page. When more visitor is like your Facebook fan page your blog traffic increase. Here may be some steps for nice and light weight popup.

First Step - Log in into Blogger Dashboard

Second Step - Go to Template than click on edit HTML button. Follow the image.



Third Step - Find 

</body>

code in Edit HTML page by type CTRL+F

Fourth Step - Copy and paste below code before 

</body>

<style type='text/css'>
#onlinecgblogFBpop {
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;
}
#onlinecgblogFBpop a.onlinecgblogclose {
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;#onlinecgblogFBpop&#39;).animate({top:&quot;150px&quot;}, 1000);
// Widget by www.onlinecg.in
$(&#39;a.onlinecgblogclose&#39;).click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='onlinecgblogFBpop'>

<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%2Fonlinecgblog&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>

<a class='onlinecgblogclose' 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.onlinecg.in" rel="dofollow" target="_blank" title="blogger tips"></center>
</div> 


Fifth Step - Change onlinecgBlog to your Facebook Page Name. Click On Save Button And Enjoy.


Comments

  1. Great post very helping, Thanks for the wonderful blog through your blog I am able to learn a lot Go forward like this and give some valuable pieces of information in the future. look in to this blog for top mobile applications of the year

    ReplyDelete

Post a Comment