Some days before I was posted a tutorial about Pop-Up subscribe window using HTML/Css. But today's widget works with jquery. When your blog's page loaded successfully then this comes out. Via this like button your users can directly like your facebook page from your blog. 

Advantages Of Using This Widget

  • It creates Lightbox effects and outcomes.
  • Includes close button with hover effect.

Disdvantages Of This Widget

The ip address from the targeted visitor is actually saved inside web browser cookie even though the page loads for a second time the widget will not be called yet again for that exact same guest therefore getting rid of the possibilities of annoying the frequent or regular subscribers.

How To Add It To Blogger ?

I tried my best to make installation of this widget easy , If you found any problem while installing please mention it in comments.Let's see how to install it.

  1. Go to Blogger Dashboard > Design > Edit HTML.
  2. Find </head> tag using CTRL+F function.
  3. Paste below code just before that.

<script src=''></script>
<script src=""></script>
<link rel="stylesheet" href="" type="text/css" />
<script type="text/javascript">
if (document.cookie.indexOf('visited=flase') == -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:"#btsnts"});


  • Go to Blogger Dashboard > Design > Page Layout.
  • Choose Add A Gadget > HTML/Javascript.
  • Paste below code content section.

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;} 
#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;} 
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( no-repeat 0 0;} 
#cboxTopCenter{height:14px; background:url( repeat-x top left;} 
#cboxTopRight{width:14px; height:14px; background:url( no-repeat -36px 0;} 
#cboxBottomLeft{width:14px; height:43px; background:url( no-repeat 0 -32px;} 
#cboxBottomCenter{height:43px; background:url( repeat-x bottom left;} 
#cboxBottomRight{width:14px; height:43px; background:url( no-repeat -36px -32px;} 
#cboxMiddleLeft{width:14px; background:url( repeat-y -175px 0;} 
#cboxMiddleRight{width:14px; background:url( repeat-y -211px 0;} 
#cboxContent{background:#fff; overflow:visible;} 
#cboxLoadingOverlay{background:url( no-repeat center center;} 
#cboxLoadingGraphic{ 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( 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 { 
.box-title { 
color: #F66303; 
font-size: 20px !important; 
font-weight: bold; 
margin: 10px 0; 
border:1px solid #ddd; 
box-shadow: 5px 5px 5px #CCCCCC; 
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 { 
.demo { 

<script src=''></script> 
<script src=""></script> 
<script type="text/javascript"> 
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"}); 
<!-- 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;" >%u25BC</p></center></h3>  
<iframe src="//;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>
<p style=" float:right;  margin-right:35px;  font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="">Blogger Widgets</a></p> 

Replace btsnts with your FB page username

*Don't remove F which i added just before btsnts, If you removed it then your widget will not works...

Please do comment on this widget....

Post a Comment

  1. u hv to remove this line if u have already included j-query in ur blog through some other widget....
    script src=''></script


If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM