Add One Time Facebook Like Pop-Up Box In Blogger Blog

Hello friends first of all sorry because from a long time i am not able to update this blog because of several reasons, forget it so now i am here with a new and great gadget for your blogger blog, Have you noticed that in October i post an article on How To Add One Time Pop-up Email Subscription Form in blogger blog which will become featured article on this blog and i'll also get lots of requests from readers for making a pop-up form same for Facebook like box, so after a long research i completed and come here for serving you a Facebook Like box with one time Pop-up.The Gadget will only appear on the first visit so your readers or you won't have to see it every time.

For this i changed some things in the Pop-up form which you surly like it if you really want to see then check out the demo and screen shot below.

Before moving towards the tutorial first backup your blog's template (and remember to backup your blog template every time when you edit anything in your blog).

How To Add The Pop-up Facebook Like Box In Blogger Blog??

Step1.) First go to your blogger blog dashboard.

Step2.) Now select your blog and and on your blog's Dashboard > Click On design > Choose a Gadget.

Step3.) After that choose HTML/Javascript gadget.

Step4.) Now copy the below code and paste it in the HTML/Javascript gadget which you choose in the step3.

Note: There is a lot of coding so make sure you copy all the coding correctly.

<style>


/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*




User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuvmH4p7FtnzDkJdlf6blQF4yzxOD5U4hBSbzkmYvrt83FxPikN20YN0uX1J3704mtq47QfcEtDuurzyt7KNr2ucwNvENzi-DXHS6i8FdvIHMSXQSHUpjxVx4YN7DPqGglMBnuB4sIN27c/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirVTzIn7_P9hnagrGgkafiouImecC5GRyg2ywSIQ1ALoh7Yl1vbBLMTqkIi1cdwMXZy29vNyTkVvoqxpJWcuDTii3vtqldQpcOCJYPXeHvxYlIDsrXbKUrYa9CxRw7W_o7sqBE0__WLbsI/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuvmH4p7FtnzDkJdlf6blQF4yzxOD5U4hBSbzkmYvrt83FxPikN20YN0uX1J3704mtq47QfcEtDuurzyt7KNr2ucwNvENzi-DXHS6i8FdvIHMSXQSHUpjxVx4YN7DPqGglMBnuB4sIN27c/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuvmH4p7FtnzDkJdlf6blQF4yzxOD5U4hBSbzkmYvrt83FxPikN20YN0uX1J3704mtq47QfcEtDuurzyt7KNr2ucwNvENzi-DXHS6i8FdvIHMSXQSHUpjxVx4YN7DPqGglMBnuB4sIN27c/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirVTzIn7_P9hnagrGgkafiouImecC5GRyg2ywSIQ1ALoh7Yl1vbBLMTqkIi1cdwMXZy29vNyTkVvoqxpJWcuDTii3vtqldQpcOCJYPXeHvxYlIDsrXbKUrYa9CxRw7W_o7sqBE0__WLbsI/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuvmH4p7FtnzDkJdlf6blQF4yzxOD5U4hBSbzkmYvrt83FxPikN20YN0uX1J3704mtq47QfcEtDuurzyt7KNr2ucwNvENzi-DXHS6i8FdvIHMSXQSHUpjxVx4YN7DPqGglMBnuB4sIN27c/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuvmH4p7FtnzDkJdlf6blQF4yzxOD5U4hBSbzkmYvrt83FxPikN20YN0uX1J3704mtq47QfcEtDuurzyt7KNr2ucwNvENzi-DXHS6i8FdvIHMSXQSHUpjxVx4YN7DPqGglMBnuB4sIN27c/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuvmH4p7FtnzDkJdlf6blQF4yzxOD5U4hBSbzkmYvrt83FxPikN20YN0uX1J3704mtq47QfcEtDuurzyt7KNr2ucwNvENzi-DXHS6i8FdvIHMSXQSHUpjxVx4YN7DPqGglMBnuB4sIN27c/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjM1M32ICHPdTIzUcBTx14jpXOjPaAerUwtf2x0I2BTBCYNAUP9Mkvkf5IGzIUGYOHNVKWg1jcBTdyz8t3NnzeLJB0gMLfRykqgMz32fbsVbFFBkZW7l3eknno7GDLPmiHxFBFtQ7Cd_bF/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1L2Pwb2EVSS8NZpXYIAbBsjgiGj11ZZdGUT-HNkEoG-q4YUXdnHQUgyES9LRD_fImPZdEN-K9L0ejCmCv0zwsO0CKoGzJIZ_Zssmz6hSJKdv1c4Rv70pqbenj5CT4MuXaOXHZIsyB3Ekc/s1600/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuvmH4p7FtnzDkJdlf6blQF4yzxOD5U4hBSbzkmYvrt83FxPikN20YN0uX1J3704mtq47QfcEtDuurzyt7KNr2ucwNvENzi-DXHS6i8FdvIHMSXQSHUpjxVx4YN7DPqGglMBnuB4sIN27c/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #3B5998;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->


<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3> 
<center>


<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftechleisureblog&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>


</center>
<p style=" float:right; margin-right:35px; font-size:9px;" >Powered By | <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.tekleisure.com">Blog Gadgets</a> Via <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.tekleisure.com">Blogger Widgets</a></p>
</div>
</div>

Important: You have two ways to get this gadget work on your blog.First change the Techleisureblog highlighted in yellow color with your Facebook Page username, or if you don't have a Facebook page then check how to create a facebook page, and the second is if you don't know the Username of your page id then create a page by clicking here and and replace the whole code in bold above with the code you get.

That is the cool Facebook pop-up widget which surly increase your Facebook fan count.If you face any problems and difficulties in this form kindly drop your mail and i will reply as soon as possible.