Onetime Facebook Like Popup Box Widget for Blogger
Popup box widgets really annoy your visitors when they appear again and again, but they help you in developing your blog well when you use them properly. Facebook is a major source of traffic which can send your blog a good traffic flow when you have enough fans on your Facebook page. To expand your Facebook network and to increase your Facebook page's fans, I have brought a very stylish Onetime Facebook Like Popup Widget (watch demo here) for your Blogger blog which will appear onetime only and thus it will increase your Facebook fans dramatically without annoying your visitors.
How it Works?
Facebook Like Onetime Popup Blogger Widget saves a cookie in your visitor's browser in his/her first visit and then never popups again after first popup when your visitor navigates to another page or visits back later. In such a way, this widget never irritates your visitors and perform its task gently.
How to Add Onetime Facebook Like Popup Box to Your Blogger Blog
1. Login to Blogger dashboard, select your blog, go to layout and add a new gadget
2. Select HTML/Java script for adding the gadget and paste the below code in it
<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/AVvXsEgR2YS5TMzPW4LNGggJmP4WguMQ3dICq-CGVxy4It4TikO8T4GvIyE-lzkVdlwKHZgz7D1y8mcPbZMZ-SjzCsl92_7SzXwqTUrhjK-7aXhGBMbf_jDtr0JZA1R_tfhY2fjA_nwd-eiqYVQZ/h120/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7fnd0k3zgPSRH2ja7PCjqrn_6POgQS_t7V1fAgDzuBxbgdkwNkFyyEF-3CKxsyyAW8SLIpQoDfVdMyENP2SPWQSw5fVOUkpnwHXjFeuEZuRQbP9ObhJgBGvkqyinSPtgIeEAY3a6Fq2Q/h120/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR2YS5TMzPW4LNGggJmP4WguMQ3dICq-CGVxy4It4TikO8T4GvIyE-lzkVdlwKHZgz7D1y8mcPbZMZ-SjzCsl92_7SzXwqTUrhjK-7aXhGBMbf_jDtr0JZA1R_tfhY2fjA_nwd-eiqYVQZ/h120/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR2YS5TMzPW4LNGggJmP4WguMQ3dICq-CGVxy4It4TikO8T4GvIyE-lzkVdlwKHZgz7D1y8mcPbZMZ-SjzCsl92_7SzXwqTUrhjK-7aXhGBMbf_jDtr0JZA1R_tfhY2fjA_nwd-eiqYVQZ/h120/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7fnd0k3zgPSRH2ja7PCjqrn_6POgQS_t7V1fAgDzuBxbgdkwNkFyyEF-3CKxsyyAW8SLIpQoDfVdMyENP2SPWQSw5fVOUkpnwHXjFeuEZuRQbP9ObhJgBGvkqyinSPtgIeEAY3a6Fq2Q/h120/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR2YS5TMzPW4LNGggJmP4WguMQ3dICq-CGVxy4It4TikO8T4GvIyE-lzkVdlwKHZgz7D1y8mcPbZMZ-SjzCsl92_7SzXwqTUrhjK-7aXhGBMbf_jDtr0JZA1R_tfhY2fjA_nwd-eiqYVQZ/h120/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR2YS5TMzPW4LNGggJmP4WguMQ3dICq-CGVxy4It4TikO8T4GvIyE-lzkVdlwKHZgz7D1y8mcPbZMZ-SjzCsl92_7SzXwqTUrhjK-7aXhGBMbf_jDtr0JZA1R_tfhY2fjA_nwd-eiqYVQZ/h120/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR2YS5TMzPW4LNGggJmP4WguMQ3dICq-CGVxy4It4TikO8T4GvIyE-lzkVdlwKHZgz7D1y8mcPbZMZ-SjzCsl92_7SzXwqTUrhjK-7aXhGBMbf_jDtr0JZA1R_tfhY2fjA_nwd-eiqYVQZ/h120/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/AVvXsEjZ1S2W_9Q7gOnnGd4I0qW7LLR6eYxty78Mk8X5lS969H-eoPYHbQQcyTK6LqsxWWKBroBNfkSLZ57QGZAUgVxYD878A1wf8_Dis1VfSGz2qwE8lBl2bG65J2Urw1oDcRtPBvhY6FQ7wIY/h120/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMU6vuylm0dvod4MbwNrKaO5w7UGkuFVNUt-bkVRWIBeRTkafl2vUTER9irnxa3CDy9BbZOE3sKBBCSx45qWUz14FyiM7uXYEms3qjXOfzecInVPcgr9yALm-iYNsBJzX9u-ItxTxP-N9M/h120/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/AVvXsEgR2YS5TMzPW4LNGggJmP4WguMQ3dICq-CGVxy4It4TikO8T4GvIyE-lzkVdlwKHZgz7D1y8mcPbZMZ-SjzCsl92_7SzXwqTUrhjK-7aXhGBMbf_jDtr0JZA1R_tfhY2fjA_nwd-eiqYVQZ/h120/controls.pngno-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 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" align="center">Receive all updates via Facebook. Just Click the Like Button Below<p style="line-height:3px;" >▼</p></center></h3>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fitcongress&width=350&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=330" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:330px;" allowtransparency="true"></iframe>
</center>
</div>
</div>
/*
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/AVvXsEgR2YS5TMzPW4LNGggJmP4WguMQ3dICq-CGVxy4It4TikO8T4GvIyE-lzkVdlwKHZgz7D1y8mcPbZMZ-SjzCsl92_7SzXwqTUrhjK-7aXhGBMbf_jDtr0JZA1R_tfhY2fjA_nwd-eiqYVQZ/h120/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7fnd0k3zgPSRH2ja7PCjqrn_6POgQS_t7V1fAgDzuBxbgdkwNkFyyEF-3CKxsyyAW8SLIpQoDfVdMyENP2SPWQSw5fVOUkpnwHXjFeuEZuRQbP9ObhJgBGvkqyinSPtgIeEAY3a6Fq2Q/h120/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR2YS5TMzPW4LNGggJmP4WguMQ3dICq-CGVxy4It4TikO8T4GvIyE-lzkVdlwKHZgz7D1y8mcPbZMZ-SjzCsl92_7SzXwqTUrhjK-7aXhGBMbf_jDtr0JZA1R_tfhY2fjA_nwd-eiqYVQZ/h120/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR2YS5TMzPW4LNGggJmP4WguMQ3dICq-CGVxy4It4TikO8T4GvIyE-lzkVdlwKHZgz7D1y8mcPbZMZ-SjzCsl92_7SzXwqTUrhjK-7aXhGBMbf_jDtr0JZA1R_tfhY2fjA_nwd-eiqYVQZ/h120/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7fnd0k3zgPSRH2ja7PCjqrn_6POgQS_t7V1fAgDzuBxbgdkwNkFyyEF-3CKxsyyAW8SLIpQoDfVdMyENP2SPWQSw5fVOUkpnwHXjFeuEZuRQbP9ObhJgBGvkqyinSPtgIeEAY3a6Fq2Q/h120/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR2YS5TMzPW4LNGggJmP4WguMQ3dICq-CGVxy4It4TikO8T4GvIyE-lzkVdlwKHZgz7D1y8mcPbZMZ-SjzCsl92_7SzXwqTUrhjK-7aXhGBMbf_jDtr0JZA1R_tfhY2fjA_nwd-eiqYVQZ/h120/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR2YS5TMzPW4LNGggJmP4WguMQ3dICq-CGVxy4It4TikO8T4GvIyE-lzkVdlwKHZgz7D1y8mcPbZMZ-SjzCsl92_7SzXwqTUrhjK-7aXhGBMbf_jDtr0JZA1R_tfhY2fjA_nwd-eiqYVQZ/h120/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR2YS5TMzPW4LNGggJmP4WguMQ3dICq-CGVxy4It4TikO8T4GvIyE-lzkVdlwKHZgz7D1y8mcPbZMZ-SjzCsl92_7SzXwqTUrhjK-7aXhGBMbf_jDtr0JZA1R_tfhY2fjA_nwd-eiqYVQZ/h120/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/AVvXsEjZ1S2W_9Q7gOnnGd4I0qW7LLR6eYxty78Mk8X5lS969H-eoPYHbQQcyTK6LqsxWWKBroBNfkSLZ57QGZAUgVxYD878A1wf8_Dis1VfSGz2qwE8lBl2bG65J2Urw1oDcRtPBvhY6FQ7wIY/h120/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMU6vuylm0dvod4MbwNrKaO5w7UGkuFVNUt-bkVRWIBeRTkafl2vUTER9irnxa3CDy9BbZOE3sKBBCSx45qWUz14FyiM7uXYEms3qjXOfzecInVPcgr9yALm-iYNsBJzX9u-ItxTxP-N9M/h120/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/AVvXsEgR2YS5TMzPW4LNGggJmP4WguMQ3dICq-CGVxy4It4TikO8T4GvIyE-lzkVdlwKHZgz7D1y8mcPbZMZ-SjzCsl92_7SzXwqTUrhjK-7aXhGBMbf_jDtr0JZA1R_tfhY2fjA_nwd-eiqYVQZ/h120/controls.pngno-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://supportivehandsjs.googlecode.com/files/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" align="center">Receive all updates via Facebook. Just Click the Like Button Below<p style="line-height:3px;" >▼</p></center></h3>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fitcongress&width=350&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=330" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:330px;" allowtransparency="true"></iframe>
</center>
</div>
</div>
3. Change the blue highlighted text with your Facebook page username and then save your gadget
4. Save the arrangement and then visit your blog. You will see Facebook Like Box popping-up on it!!!
Note: If the box doesn't popup, then it means that you have already added the Ajax JQuery Script to your template. To fix it, remove the read highlighted line in above code.
You may also like to read 3 Cool Widgets for Your Blogger Blog
You may also like to read 3 Cool Widgets for Your Blogger Blog