Facebook page promoter lightbox for Blogger !

By Sofindia

This Facebook page promoter lightbox widget pops up a jQuery window containing Facebook likebox as soon as a new visitor arrives.

I have saw this wedget atMBT but I didnt like that...so customized it as I want. Hope you'll like it.

How it Works:

This popup appears only once to every new visitor. The ip address of the visitor is stored in browser cookie and as the page loads again the widget wont be called again for the same visitor thus eliminating the chances of bugging regular readers. Because of course it will look weird if the popup appears again and again on every pageview. It will appear both on homepage and sub pages depending which page the visitor is accessing. I have set the cookie refresh time to 30 days, which means that this lightbox will appear again for the same visitor after 30 days. We can easily set the number of days to prompt the visitors about your Facebook Fan page. Lets get straight to the one step installation process.

To add Facebook LikeBox inside Jquery Popup in Blogger:

Go to Blogger
Layout
Add a Gadget
Select HTML/JavaScript Widget
Paste the Following code inside 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 0px rgba(0,0,0,0.4);

-moz-box-shadow:0 0 0px rgba(0,0,0,0.4);

-webkit-box-shadow:0 0 0px rgba(0,0,0,0.4);

}

#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGg6eefRc7CKH9ZeeQDS0-0SIM4KmJP6PywTBCRqdxuNevBvydzxZj9x8f3RbSqe2rhJcyw-jSJlR7NawCeGhO9g_fWVd-qFma7pm3ccc3G6-S5OSOJagL7LcclQinsUrrJ_qByW5xmd9X/s1600/controls.png) no-repeat 0 0;}

#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsj4M5g_ZQm_e_p65dVqFgEOCl2Hx1HSivigZFnTHGrAPRXRYu21dhOQaEMKvT124TgQw8wbEMjZczwvfO3e1NipIT3-nFrp0AhDgFHh9dfWhyphenhyphenXl78K_gpWuWAMoqQgFSSvCuRN7TjrSTO/s1600/border.png) repeat-x top left;}

#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGg6eefRc7CKH9ZeeQDS0-0SIM4KmJP6PywTBCRqdxuNevBvydzxZj9x8f3RbSqe2rhJcyw-jSJlR7NawCeGhO9g_fWVd-qFma7pm3ccc3G6-S5OSOJagL7LcclQinsUrrJ_qByW5xmd9X/s1600/controls.png) no-repeat -36px 0;}

#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGg6eefRc7CKH9ZeeQDS0-0SIM4KmJP6PywTBCRqdxuNevBvydzxZj9x8f3RbSqe2rhJcyw-jSJlR7NawCeGhO9g_fWVd-qFma7pm3ccc3G6-S5OSOJagL7LcclQinsUrrJ_qByW5xmd9X/s1600/controls.png) no-repeat 0 -32px;}

#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsj4M5g_ZQm_e_p65dVqFgEOCl2Hx1HSivigZFnTHGrAPRXRYu21dhOQaEMKvT124TgQw8wbEMjZczwvfO3e1NipIT3-nFrp0AhDgFHh9dfWhyphenhyphenXl78K_gpWuWAMoqQgFSSvCuRN7TjrSTO/s1600/border.png) repeat-x bottom left;}

#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGg6eefRc7CKH9ZeeQDS0-0SIM4KmJP6PywTBCRqdxuNevBvydzxZj9x8f3RbSqe2rhJcyw-jSJlR7NawCeGhO9g_fWVd-qFma7pm3ccc3G6-S5OSOJagL7LcclQinsUrrJ_qByW5xmd9X/s1600/controls.png) no-repeat -36px -32px;}

#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGg6eefRc7CKH9ZeeQDS0-0SIM4KmJP6PywTBCRqdxuNevBvydzxZj9x8f3RbSqe2rhJcyw-jSJlR7NawCeGhO9g_fWVd-qFma7pm3ccc3G6-S5OSOJagL7LcclQinsUrrJ_qByW5xmd9X/s1600/controls.png) repeat-y -175px 0;}

#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGg6eefRc7CKH9ZeeQDS0-0SIM4KmJP6PywTBCRqdxuNevBvydzxZj9x8f3RbSqe2rhJcyw-jSJlR7NawCeGhO9g_fWVd-qFma7pm3ccc3G6-S5OSOJagL7LcclQinsUrrJ_qByW5xmd9X/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/AVvXsEjW9tuvgN44UYUxfpgTjFL6po7GGJJSMG1ufLTF2UHNczDM07ohvtAFLWBbxHGPuv35yBb6st5iqMthJttd0RjRwW6D-UxLbRlH6MoTz5lWTZ4kNtMwPWkKR2HyROlIRcPYQ5yNC0evdB31/s1600/loading-background.png) no-repeat center center;}

#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigA6UARbDS4CcHrVleQ780ji40hIN9d56HPgmIS3TVd2sF9UDTx1PamCbfPG3nqCDs-4qVFYl9Z-tox2_ByohVPysYcPJYVne9Hdk0_zg4kxJksOTb6qEuMR2DGEdzzjyHg-8FoSfoy2OT/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/AVvXsEhGg6eefRc7CKH9ZeeQDS0-0SIM4KmJP6PywTBCRqdxuNevBvydzxZj9x8f3RbSqe2rhJcyw-jSJlR7NawCeGhO9g_fWVd-qFma7pm3ccc3G6-S5OSOJagL7LcclQinsUrrJ_qByW5xmd9X/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>

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:"340px", inline:true, href:"#subscribe"});

}

});

</script>

</center>

</div>

Customize:

Change the word "SoftsIndia" with your facebook fan page username.
If you want to prompt the likebox every time the visitor enters your blog then simply delete this *30 from the code above.

::::::Enjoy:::::