Awesome jQuery Popup For Facebook Like Box ~ Blogger TrickZz

This widget is a popup facebook like box for your blog visitors. When a user visits your blog he is greeted with this lovely facebook like box. You can even set time for the widget to appear , so that the visitor does not get irritated by this like box.

Live Demo >>

How to add this widget ?

Now go to Blogger Dashboard > Design.
Add a Gadget > HTML/JavaScript.
Paste below code after replacing my username with yours.

<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%; height: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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk0aR_7vkHHxFxy-ICW3ARTEaYvJxLjcb0AL76xKIda1jotwJPXCKeV1pKmnwJb29jsrP9XnY8UVuHKswhIpA3BjYhb-asJQOTvk85_Uei41TQvCUJCWKZxlWvMI4be4AKkVs4OX49CwVX/s1600/overlay.png) repeat 0 0;}
#colorbox{}
#cboxTopLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR6m2WYU1MNA6WoTExVoaqvtIFQ386NrWWcu-xuWdq0SM2c5Xwi3bseNQHlAo6LcmkdhrOgcA_NHncG6MnfjycJOYQkMrdUsOqjgeogMVteDJtJBe7FPSBy8BbtGhQS2uwHfETzoGikq77/s1600/controls.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR6m2WYU1MNA6WoTExVoaqvtIFQ386NrWWcu-xuWdq0SM2c5Xwi3bseNQHlAo6LcmkdhrOgcA_NHncG6MnfjycJOYQkMrdUsOqjgeogMVteDJtJBe7FPSBy8BbtGhQS2uwHfETzoGikq77/s1600/controls.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR6m2WYU1MNA6WoTExVoaqvtIFQ386NrWWcu-xuWdq0SM2c5Xwi3bseNQHlAo6LcmkdhrOgcA_NHncG6MnfjycJOYQkMrdUsOqjgeogMVteDJtJBe7FPSBy8BbtGhQS2uwHfETzoGikq77/s1600/controls.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR6m2WYU1MNA6WoTExVoaqvtIFQ386NrWWcu-xuWdq0SM2c5Xwi3bseNQHlAo6LcmkdhrOgcA_NHncG6MnfjycJOYQkMrdUsOqjgeogMVteDJtJBe7FPSBy8BbtGhQS2uwHfETzoGikq77/s1600/controls.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR6m2WYU1MNA6WoTExVoaqvtIFQ386NrWWcu-xuWdq0SM2c5Xwi3bseNQHlAo6LcmkdhrOgcA_NHncG6MnfjycJOYQkMrdUsOqjgeogMVteDJtJBe7FPSBy8BbtGhQS2uwHfETzoGikq77/s1600/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR6m2WYU1MNA6WoTExVoaqvtIFQ386NrWWcu-xuWdq0SM2c5Xwi3bseNQHlAo6LcmkdhrOgcA_NHncG6MnfjycJOYQkMrdUsOqjgeogMVteDJtJBe7FPSBy8BbtGhQS2uwHfETzoGikq77/s1600/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGU97Stct2X4aOnwqrdkvJyNUySj2ZlnHEIf7dJHhZLAmMT5-56QNPFfg3tUDCUcdsi_NHtTOVNZsMy3I6TNki4CpjzCpFWcXcdt6gqIc7AlRb6ebZbfyeRlEXyxfRuBdIVaj1F7z2Bdk0/s1600/border.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGU97Stct2X4aOnwqrdkvJyNUySj2ZlnHEIf7dJHhZLAmMT5-56QNPFfg3tUDCUcdsi_NHtTOVNZsMy3I6TNki4CpjzCpFWcXcdt6gqIc7AlRb6ebZbfyeRlEXyxfRuBdIVaj1F7z2Bdk0/s1600/border.png) 0 -29px repeat-x;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:28px;}
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR6m2WYU1MNA6WoTExVoaqvtIFQ386NrWWcu-xuWdq0SM2c5Xwi3bseNQHlAo6LcmkdhrOgcA_NHncG6MnfjycJOYQkMrdUsOqjgeogMVteDJtJBe7FPSBy8BbtGhQS2uwHfETzoGikq77/s1600/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR6m2WYU1MNA6WoTExVoaqvtIFQ386NrWWcu-xuWdq0SM2c5Xwi3bseNQHlAo6LcmkdhrOgcA_NHncG6MnfjycJOYQkMrdUsOqjgeogMVteDJtJBe7FPSBy8BbtGhQS2uwHfETzoGikq77/s1600/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1pUlCDLUX9kag_zXHCjSUbMTbrbK1rmR-I6vdv9QCo4PcaKWUa8g0oliUa-8CD7gvHBH0Gr8tfYGWrlbBzVSvOmM-jF6XmXnzwveD7lDls7cTXGV9JptroQ7MHWrcZ-p7nf3bQOOOzsog/h120/loading.gif) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1pUlCDLUX9kag_zXHCjSUbMTbrbK1rmR-I6vdv9QCo4PcaKWUa8g0oliUa-8CD7gvHBH0Gr8tfYGWrlbBzVSvOmM-jF6XmXnzwveD7lDls7cTXGV9JptroQ7MHWrcZ-p7nf3bQOOOzsog/h120/loading.gif) no-repeat center center;}
#cboxClose{position:absolute; bottom:0; right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR6m2WYU1MNA6WoTExVoaqvtIFQ386NrWWcu-xuWdq0SM2c5Xwi3bseNQHlAo6LcmkdhrOgcA_NHncG6MnfjycJOYQkMrdUsOqjgeogMVteDJtJBe7FPSBy8BbtGhQS2uwHfETzoGikq77/s1600/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}
/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}
/*
The following provides PNG transparency support for IE6
Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
*/
.cboxIE6 #cboxTopLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihDFtvZzQ4Rh4vVyS_ES4OS0JOC4Y9sivSviN6_vuYaAqH4HGUdYyzURZoE28oVjX7S8Og_aJikx84HIBKAQKLtNcQJNSd1QCNh1T4gwgc2J0TgrL1jxxoOpxo8Sn0_M-SbbWck0Q6eEnm/s1600/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpAaIGeRyeog4XPloLxpo7rKzCunYz3piTnS4z41k7dL8lSbSuoieZLk2ihmAQeBxd8lSwXAuQ1X7clG37Q2Q7iZnVPhTXLb-qP9s9Y0Drf2B1lSVs85MI0__eKj_45cPeBoApnvrx1Hxx/s1600/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe5qZlIqS3s2r9S8lf-9rYx57pn03CrPnY0i6Dx_mmTvrnocvcGCmmuViIY_WDcUiTBMxpqjjkrOxdhpoHSt_WgyRGOjPW9Plv2gViUxlg9omU6uSIU9jtWzIBgMMVhg69E9C3jb0hIRID/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe5qZlIqS3s2r9S8lf-9rYx57pn03CrPnY0i6Dx_mmTvrnocvcGCmmuViIY_WDcUiTBMxpqjjkrOxdhpoHSt_WgyRGOjPW9Plv2gViUxlg9omU6uSIU9jtWzIBgMMVhg69E9C3jb0hIRID/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHrc4YSYTumkDntQOuFV-KxPtCvdBJ72qw-tLBpU-2V_gvb1BVD1FdR4FGwlZGsVyeKgECyKnOLth6sS6wzg4-xHhQaY3eXmrq5pemhlqxtjfpUZqVzkLbswWnD9hmq4pwi1pdYpc3SaNI/s1600/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtcrOk22sNdgGHhLBhXXhJizDujuC61qC_uisLTCU7V21Ye4MGSwJQwW7L1pjlwPUw5zQsFNCWUmtrGssXheqUwr0EIPBciSBCyzGFYvZ8q41BRCb5xRPDFuQrxwfmt0AxenO5kWly-MKo/s1600/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEyY3prLD-kQ-lPQNfyItDsChDdE7cL3JaXyP70X3KT0NceJZxqiU3w9wdBWY8oYk5o4EESlYRz_pStYxTorXA0_xSTy6jJKW0icQ56wnTqx5inTRFpMr_R4Dg3THVFxJDz3QxLOFLDS2r/s1600/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjztrrObSj72PyHgWtsTHZ8fVVexPIsJAjZGwoNh5M8O1GsaCWR50Y-aptR54tZH4vf9ufHAM9S_7GA-hfDaUn83561yagMNBi55qD3qlvkRHtXl_rNVYh9Nzk837aZOR6K0nDkkoweRjAu/s1600/borderMiddleRight.png);}
.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
_behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger By Blogger TricksZz
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.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.7.1/jquery.min.js'></script>
<script src="http://helperblogger.webs.com/files/jquery.colorbox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>

<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJKjog6SjS7bk0Mv7nUbNz99sF7gmvVdgN3uZKr4RdQnvKDZ5LdGufmkIgFKXJNmIl6ze6vedacaB8pYnrL7efaJqyng8j0gfX01v7GLwdNp35ZRRT6AYDcRYrFAtjf9BiTHuQE9oB5q_y/s1600/LikeUsOnFacebook.png" width:300px; height:150px;"/></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggertricks&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&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:45px; font-size:4px;" ><a style=" font-size:8px; color:#3B78CD; text-decoration:none;" href="goo.gl/yu486 ">Grab This Gadget »</a> </p></div></div>

Now replace btsnts with your facebook fan page username.(Highlighted in red color)

Customizations (Optional)

I have set the cookie refresh time to 7 days that means this popup will appear only once in 7 days to that specific visitor.If you want to appear this gadget daily the simply change the *7 value to *1 in above code.(Highlighted in Yellow color)

I have kept the installation extremely easy,if still you have any queries or questions about customizing this gadget then feel free ask me.I will solve your query as soon as time allows.

And please do SHARE this page

Follow @shipsocker

Stay Connected With Free Updates

Subscribe via Email

Thursday, 24 May 2012