Awesome One Time Pop up Facebook Like Box for Blogger

After the busy week, i was returned with a new cool post.I was told you about the importance of facebook in many of my posts.So you already know that facebook is a great source of traffic.your traffic will increase when you get more likes for your facebook page.Iam not explaining more about that.
You already saw that when you opening some blogs,there is a window appearing to like their facebook page or subscribe to their RSS feed etc.That is the pop up window and now I'm sharing how to add such window with facebook like box of your page.check out the screen shot below:

 So lets start the work.Follow the steps and make it easy:
Step 1 : Login to your blog and navigate to Dashboard.
Step 2 : Click Design >> Add a Gadget  >> Choose html/JavaScript(old interface)
                       Layout >> Add a gadget  >> Choose html/JavaScript(new interface)

Step 3 : Add the below code

<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/AVvXsEhgB_xpkc1AG7cITu7k8hh-rCZeWEiU-e83oAr9OOD1SavyiiHwj9aq7p9qG1X1zLmHelYq2ztim3jQRgUOryXvytd03CvUlFmsPeC2Q5AUGFeiD89IKK6CVrfR1t04zpm10gNy2uwMA1SP/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCiHCTgALicoDJAs2U3mw7uD8ZUcMWAlYlJRbb6X54MblW1oxmePah-DVCAaq1ojD8tjTgNjWVq_2z-HREVfRWB3_zqxpOupPK4svPAYYnPKAnNzrf-unkhGKebt6ewHPG85G3sASUTjKw/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgB_xpkc1AG7cITu7k8hh-rCZeWEiU-e83oAr9OOD1SavyiiHwj9aq7p9qG1X1zLmHelYq2ztim3jQRgUOryXvytd03CvUlFmsPeC2Q5AUGFeiD89IKK6CVrfR1t04zpm10gNy2uwMA1SP/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgB_xpkc1AG7cITu7k8hh-rCZeWEiU-e83oAr9OOD1SavyiiHwj9aq7p9qG1X1zLmHelYq2ztim3jQRgUOryXvytd03CvUlFmsPeC2Q5AUGFeiD89IKK6CVrfR1t04zpm10gNy2uwMA1SP/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCiHCTgALicoDJAs2U3mw7uD8ZUcMWAlYlJRbb6X54MblW1oxmePah-DVCAaq1ojD8tjTgNjWVq_2z-HREVfRWB3_zqxpOupPK4svPAYYnPKAnNzrf-unkhGKebt6ewHPG85G3sASUTjKw/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgB_xpkc1AG7cITu7k8hh-rCZeWEiU-e83oAr9OOD1SavyiiHwj9aq7p9qG1X1zLmHelYq2ztim3jQRgUOryXvytd03CvUlFmsPeC2Q5AUGFeiD89IKK6CVrfR1t04zpm10gNy2uwMA1SP/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgB_xpkc1AG7cITu7k8hh-rCZeWEiU-e83oAr9OOD1SavyiiHwj9aq7p9qG1X1zLmHelYq2ztim3jQRgUOryXvytd03CvUlFmsPeC2Q5AUGFeiD89IKK6CVrfR1t04zpm10gNy2uwMA1SP/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgB_xpkc1AG7cITu7k8hh-rCZeWEiU-e83oAr9OOD1SavyiiHwj9aq7p9qG1X1zLmHelYq2ztim3jQRgUOryXvytd03CvUlFmsPeC2Q5AUGFeiD89IKK6CVrfR1t04zpm10gNy2uwMA1SP/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/AVvXsEg16lLgN-McOB5HCR6AwpBI_XxlGakKy6cLmEpmoSqeKt83Q3vKc-f-n4_FVIN52o0bQjfiPVSvMC0YI8g0GBPbgMPaEIWRGBGv9ppEoJSFF55lVMhNnZUxk53GaldXGTjJsh00wB8qsiNc/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoxrIu15-qKQWNMNUuGI5UfwULa0NjadUXyZ4TTaPTYYs5NwMknIz0pFrEJKE5X1qM6WoB6EzD38BwpPfb1ZHZ3Q8kBUKQ6qhKdq5ETYnl7z9JFyz-ohEZKi-7qI7D894rPIfBQztxDgFs/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/AVvXsEhgB_xpkc1AG7cITu7k8hh-rCZeWEiU-e83oAr9OOD1SavyiiHwj9aq7p9qG1X1zLmHelYq2ztim3jQRgUOryXvytd03CvUlFmsPeC2Q5AUGFeiD89IKK6CVrfR1t04zpm10gNy2uwMA1SP/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%2FWelblogs&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.welblogs.blogspot.com">Blog Gadgets</a> Via <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://welblogs.blogspot.com/">Blogger Widgets</a></p>
</div>
</div>

Step 4 : Change Welblogs to your facebook page name.
Step 5 : Save and view your blog.

                   If you had any doubt,please comment below

If You Like This Post. Please Take 5 Seconds To Share It.

Never Lose a Single Update From Us..!!