Make a Pop-up Subscribe Window By Using Html And Css - Helper Blogger

Blogger Widgets | Templates | Tutorials


Monday, 19 December 2011

Make a Pop-up Subscribe Window By Using Html And Css

Recently I found many websites which are using a pop-up window for feeds subscriptions. It may increase the number of your subscribers. . This beautiful widget was created by MBT
First Of All Let Me Thank Mohammad Mustafa Sir to allow me to Post this article for you all. Have you ever heard about theAweber Email Marketing Solutions ? If Not then i bet you must have seen EMail Signup Forms in Popular websites... They use Aweber. Though it is not free but it is efficient so they use that. But here In My Article I'll Let you to integrate Aweber Features and FeedBurner Features and install it on your Blog. So keep Reading 

How To Add It To Blogger ?

Step 1 : Adding the Css. 

  • Go ti Blogger Dashboard > Design > Edit HTML.
  • Tick Expand Widgets and find  ]]></b:skin> 
  • Paste the below code before ]]></b:skin> 

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{background:url( 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;} 
/*    box popup 
#subscribe { 
font: 12px/1.2 Arial,Helvetica,san-serif; 
#subscribe a, 
#subscribe a:hover, 
#subscribe a:visited { 
.box-title { 
color: #2C2D31; 
font-size: 20px; 
font-weight: bold; 
margin: 10px 0; 
text-align: center; 
.box-tagline { 
color: #999; 
font-size: 14px; 
margin: 0; 
text-align: center; 
#subs-container { 
padding: 35px 0 30px 0; 
position: relative; 
.box-side { 
width: 170px; 
text-align: center; 
.box-side.left { 
padding: 0 30px 0 15px; 
border-right: 1px solid #ecedf3; 
.box-side.right { 
float: right; 
margin-top: -223px; 
margin-right: 10px; 
.box-icon { 
width: 72px; 
height: 54px; 
padding: 6px 0 0 0; 
margin: 0 auto; 
.box-icon a.rss{ 
display: block; 
width: 70px; 
height: 56px; 
margin: 0 auto; 
.box-icon a{ 
display: block; 
width: 72px; 
height: 54px;    
.box-icon img, 
.box-icon a.rss img { 
margin: -5px 0 0; 
border: 0 none; 
.box-side h4, 
.box-side h4 a { 
font-size: 14px; 
line-height: 14px; 
color: #f26535; 
font-weight: bold; 
.box-side h4 { margin: 20px 0 10px 0; } 
.box-side h5 { 
font-size: 11px; 
color: #5e6066; 
line-height: 18px; 
margin: 0 0 20px 0; 
a.sub { 
background: url("") no-repeat scroll 0 0 transparent; 
color: #996633; 
display: block; 
height: 44px; 
line-height: 29px; 
margin: 0 auto; 
text-indent: -999em; 
width: 130px; 
.box-side h4 a:hover { 
color: #f26535; 
#box-or { 
background: #fff; 
font-size: 12px; 
font-weight: bold; 
height: 25px; 
line-height: 25px; 
margin: -115px 0 0 208px; 
position: absolute; 
width: 20px; 
a:link, a:visited { 
.demo { 

Step 2 : Adding the HTML.

  • Go to Blogger Dashboard Design > Page Elements 
  • Choose Add Gadget > Html/Javascript 
Now Paste The Following Code In It.

<script src=''></script> 
<script src=""></script> 
<script type="text/javascript"> 
if (document.cookie.indexOf('visited=true') == -1) { 
var fifteenDays = 1000*60*60*24*15; 
var expires = new Date((new Date()).valueOf()   fifteenDays); 
document.cookie = "visited=true;expires="   expires.toUTCString(); 
$.colorbox({width:"480px", inline:true, href:"#subscribe"}); 
<!-- This contains the hidden content for inline calls --> 
<div style='display:none'> 
<div id='subscribe' style='padding:10px; background:#fff;'> 
<h2 class="box-title">Never Miss Any Update From Us!</h2> 
<h2 class="box-tagline">Enrich Your Inbox.[402  Readers]</h2><br/> 
<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="" method="post" target="popupwindow" onsubmit="'', 'popupwindow', 'scrollbars=no,width=560,height=540');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="btsnts" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="" target="_blank">FeedBurner</a> | Powered By <a href="">MBT</a></p></form> 
<br/><h2 class="box-tagline">Subscribe us today and get Quality Articles for free.</h2> 

Change btsnts with your feed burner ID. If you don't know your FeedBurner ID then Login to your Google account and go to FeedBurner and select your feed ID under feed title.


  1. Doesn't Works !

  2. want make money online for free ,you can visit my site
    or contact me with i will teach you step by step

  3. so why can't we just copy paste the code????

  4. Classical variant is a conversion of PSD to simple poor styled HTML. It was commonly used for old-style pages that don't require additional features. The design was strict and minimalistic. CSS HTML image coding


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