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'>Tips: Change Blog to your Facebook Page Name
#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%2Fblog&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 tips"><img src="https://bitly.com/haakblog" alt="blogger tips" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://www.haakblog.com/2014/02/download-best-blogger-templates-of-2014.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://www.haakblog.com/2013/10/add-facebook-like-popup-box-for-blogger.html' style='font-size:xx-small; color:#3B78CD; text-decoration:none;' target='_blank'>Widget</a></center>
</div>
Step 5
Click on Save Button.
No comments
Posted at 03:53 | by
Unknown
