Quick Steps to Add Facebook Like Popup Box on Blogger
Facebook like box can be easily found on many blogs and websites. It is commonly used by most of the bloggers. In this post, we are going to show a very quick steps on how to add a Facebook Like box on a popup window in Blogger blog.
So, now without taking much of your time here are the steps:
Step 1: Log in to blogger.com
Step 2: Click on "Template" from left nav and then click "Edit HTML" as shown below
Step 3: Find below code using CTRL+F
Step 5: Click "Save template" button.
If you enjoyed this tutorial of how to add FB like popup box on blogger then please let us know. Also feel free to ask any question regarding this, using the comments section below.
So, now without taking much of your time here are the steps:
Step 1: Log in to blogger.com
Step 2: Click on "Template" from left nav and then click "Edit HTML" as shown below
Step 3: Find below code using CTRL+F
</body>
Step 4: Just Copy and Paste below code before </body>
<style type='text/css'>
#coloredblogFBpop {
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;
}
#coloredblogFBpop a.coloredblogclose {
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
$('#coloredblogFBpop').animate({top:"150px"}, 1000);
// Widget by www.coloredblog.com
$('a.coloredblogclose').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='coloredblogFBpop'>
<!-- Widget by www.coloredblog.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%2Fcoloredblog&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.coloredblog.com End -->
<a class='coloredblogclose' 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.coloredblog.com" rel="dofollow" target="_blank" title="blogger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoeVlWxQkioSA4wOb0SeJsqEUARZ856h3rG8L3t5rGSzKobIf76WmVwtZOnzDFKPUfZ5d90_yinkJ7wCb8WoeO7Tx2uIi3W5uFZAUBTqRtqLe_4RImJFR95zkBRhiawC7imqmhI2IlfIE/s1600/blank.gif" alt="blogger" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href='http://www.coloredblog.com/2014/02/quick-steps-to-add-facebook-like-popup.html' style='font-size:xx-small; color:#3B78CD; text-decoration:none;' target='_blank'>Widget</a></center>
</div>
Change ColoredBlog to your Facebook Page Name in above code#coloredblogFBpop {
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;
}
#coloredblogFBpop a.coloredblogclose {
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
$('#coloredblogFBpop').animate({top:"150px"}, 1000);
// Widget by www.coloredblog.com
$('a.coloredblogclose').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='coloredblogFBpop'>
<!-- Widget by www.coloredblog.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%2Fcoloredblog&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.coloredblog.com End -->
<a class='coloredblogclose' 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.coloredblog.com" rel="dofollow" target="_blank" title="blogger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoeVlWxQkioSA4wOb0SeJsqEUARZ856h3rG8L3t5rGSzKobIf76WmVwtZOnzDFKPUfZ5d90_yinkJ7wCb8WoeO7Tx2uIi3W5uFZAUBTqRtqLe_4RImJFR95zkBRhiawC7imqmhI2IlfIE/s1600/blank.gif" alt="blogger" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href='http://www.coloredblog.com/2014/02/quick-steps-to-add-facebook-like-popup.html' style='font-size:xx-small; color:#3B78CD; text-decoration:none;' target='_blank'>Widget</a></center>
</div>
Step 5: Click "Save template" button.
If you enjoyed this tutorial of how to add FB like popup box on blogger then please let us know. Also feel free to ask any question regarding this, using the comments section below.
Share This:
Vikrant Agarwal
Vikrant Agarwal is a Creative Designer. When he is not working on blog you can find him climbing mountains.
