POP-UP Fb Like Box With Timer For Blogger

Hello friends, we all know the importance of social network for any website/blogs. Popular community based sites like Facebook, twitter, and Youtube. and flickr has more than 5 millions page views per day. The use of marketing through these websites has greater potential because of enormous steady traffic in these sites. 

So, Today I'll show you how to add Popup Like box With Timer in your blogger. As Facebook is the one of the biggest website in world. Get the more fans on your web page by adding a facebook like box. Facebook like box is widely used social plugin from Facebook Developers. The importance of Fb like box is tremendous in terms of number of like it brings.

So let's start Our Tutorial.

LIVE DEMO

So, If you want to Add this gadget to your blogger follow this steps.




As this gadget is made using JQuery you have to add JQuery script to your Blogger template.

So Go to Dashboard>>Template>>Edit html and search for </head> tag.
(Use Ctrl+F to search ;) ) . Just above </head> tag paste the below script

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

After installing JQuery plugin to your template, follow this few simple steps. 

1. Go to Blogger.
2. Login to your blog>>click on layout
3. Add a gadget>>click on html/javascript
4. Copy the below script and paste it in the box.

<style type='text/css'>
#makingdifferentpopup{
position: fixed;
top:100px;
z-index:9999;
display:none;
padding:0px;
right:600px;
border:10px solid rgba(82, 82, 82, 0.7);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
-webkit-border-radius:8px 8px 8px 8px;
-moz-border-radius:8px 8px 8px 8px;
border-radius:8px 8px 8px 8px;
width:400px;
height:360px;
overflow:hidden;
}
#makingdifferentpopup span{
font-size:20px !important;
font-weight:bold !important;
}
#makingdifferentpopup h1{
background:#6d84b4 url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfa5HdO7v_jsaPixvxUWd_V5jQIvUzapbER_XWDi9JouYmFYedGA-4w-ebffDW0WjDlv32HMimo9lGq_-Pw3lSJ_ZhcrUeBpe8ubtZkrPMaEA3LULzSErl4GRh-eBKc-3KLiv6Phfs2tBj/s1600/%255Bwww.gj37765.blogspot.com%255Dh1.png) 98% no-repeat;
border:1px solid #3b5998 !important;
color:#FFFFFF !important;
font-size:20px !important;
font-weight:700 !important;
padding:5px !important;
margin:0 !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
overflow:hidden !important;
}
.htmlarea{
font-size:12px !important;
font-weight:normal !important;
height:265px !important;
padding:1px !important;
background:#fff !important;
border-bottom:2px solid #ddd;
overflow:hidden !important;
}
#mdfooter{
text-align:left;
background:#F2F2F2 !important;
height:56px !important;
padding:10px 10px 10px 10px !important;
overflow:hidden !important;
}
#mdclose{
float:right;
background-color:#eee !important;
border:1px solid #ccc !important;
color:#111 !important;
font-weight:bold !important;
padding:5px 8px 5px 8px !important;
text-decoration:none !important;
display:inline-block !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
outline:none !important;
position:relative !important;
font-size:18px !important;
margin:1px !important;
}
#mdclose:active{
top:1px;
left:1px;
}
.grabthis{
bottom:80px;
font:8px "lucida grande",tahoma,verdana,arial,sans-serif;
position:absolute;
right:6px;
text-align:right;
z-index: 99999;
}
.grabthis a{
color: #000;
text-decoration:none;
}
.grabthis a:hover{
text-decoration:underline;
}
</style>
<script type='text/javascript'>
jQuery(document).ready(function() {
function makingdifferent_ppopup()  {
var sec = 10
var timer = setInterval(function() {
   $("#mdfooter span").text(sec--);
   if (sec == 0) {
      $("#makingdifferentpopup").fadeOut("slow");
      clearInterval(timer);
   }
},1000);
  var mdwh = jQuery(window).height();
  var mdpph = jQuery("#makingdifferentpopup").height();
  var mdfromTop = jQuery(window).scrollTop()+50;
 jQuery("#makingdifferentpopup").css({"top":mdfromTop});}
jQuery(window).fadeIn(makingdifferent_ppopup).resize(makingdifferent_ppopup)
 //alert(jQuery.cookie('sreqshown'));
 //var mdww = jQuery(window).width();
 //var mdppw = jQuery("#makingdifferentpopup").width();
 //var mdleftm = (mdww-mdppw)/2;
   var mdleftm = 500;
 //var mdwh = jQuery(window).height();
 //var mdpph = jQuery("#makingdifferentpopup").height();
 //var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;
 jQuery("#makingdifferentpopup").animate({opacity: "1", left: "0" , left:  mdleftm}, 0).show();
     jQuery("#mdclose").click(function() {
jQuery("#makingdifferentpopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});
</script>
<div id="makingdifferentpopup">
<h1>Join us on Facebook</h1>
<div class="htmlarea">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Ftipsn101tricks&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:250px;" allowtransparency="true"></iframe>
<div class="grabthis">
By <a href="http://tip101tricks.blogspot.com/" target="_blank">Tips&101Tricks</a> / <a href="http://tip101tricks.blogspot.com/" target="_blank">+Get This!</a>
</div>
</div>
<div id="mdfooter">
Please wait..<span>10</span> Seconds
<a href="#" id="mdclose" onclick="return false;">Cancel</a>
</div>
</div>
<!-- End popup -->

Changes in the Script before installing:

1. Replace tipsn101tricks in the script with your fb page username
2. You can change the time interval var sec = 10 with your own desired time.
3. If you want change the width and Height of the box, it is 400 and 250 in the script.
4. Change Join Us on Facebook with your desired text.
5. You can remove or change the "cancel" with your desired text.
6. Now copy the script and paste it in the box, click on save.

So, Adding Popup like box will force your readers to like your fan page and it will increase your likes.

Share Your Ideas with Us. And Stay Connected for Latest Trick in Blogging.

And You liked this tutorial give us one like too!!!

Thank You!!