Make a Pop-up Subscribe Form Like Aweber

aweber subscribe formThis is my first Guest Article For The Blog And My Blogging Carrier Too..
First Of All Let Me Thank Mohammad Mustafa Sir to allow me to Post this article for you all. Have you ever heard about the Aweber 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 And Keep Enjoying !!

What Will we Get From This ?

The main Reason why to use is because it will not only make your Blog Look Professional But Also will increase the EMail Subscriptions to your Blog. Its a modified version of the model subscribe box created by franklin. Lets first see a demo
Demo : Click Here 

Add it To Blogger

You can Install This Widget Easily in your Blog By Following These Simple Steps....
Before you edit any template it's better to keep a Backup..
So First Backup your Template. Now Go To Design>Edit Html>Select Expand Widgets...

Step 1 : The CSS You Need To Search The Following Piece Of Code By Pressing [Ctrl+F]
Now Paste The Bellow Code Just Before it.
   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;}

/*    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 {

Now Hit Prievew, If Every Thing Works Fine then Save The Template..

Step 2 : The Html In This Part you'll add the widget to your Blog !!
Goto :: Design>Page Elements>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="ILibrary" 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>

Important :
Remove The Red Colored ILibrary With You FeedBurner ID.
Ignore The Line In Pink If Your Blog Already has JQuery.

About Me :
This is Sidharth, Author Of
Well, I'm a Student Reading +2, Aged 15.. I Like Blogging and Making friends....

Need Quick Help within 24 Hours? ASK NOW

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

34 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. Love You Mustafa Thnx very much

  2. Thats nice post Sidharth , i like it you have share valuable tutorial

  3. @Faiz Muhammad Khan Thanks Dear...
    But All Credits Goes To Mustafa Sir, Because of him i'm able to Share This :)

  4. Will it load again and again even if the same visitor visit your blog in different time od the day?

  5. you have any idea that how to apply it on my wordpress site ??? please suggest.

  6. hi mr mustafa and mr Sidharth !
    This is my weblog as you can see that i have installed this great form u thought us but you said your feedburner id, which did not worked for me but i used the last portion of my feed burner url which worked for me example my feed is ( i used "DeluxePages" insted of id so it then worked for me.

    and also one other thing if it is posable then plz recode it with a feature that after subscribing the email this form should be closed automatically that would be great thanks.

    your brother Ahmad Waleed Khaliqi

  7. @Manuel Garcia No Bro...
    I've Designed in Such A Manner That it will Display Once in 15 Days For The Same User.
    So he Doesn't Gets Bored.
    And it is A One Time Popup Box ..

  8. @ravi Currently I Don't Have Any Solutions For Wordpress But i'll Soon Report when i've..

  9. @Waleed Khaliqi Sorry Bro !!
    Currently We Don't Have Such Facility...
    If i get in Future, I'll Surely Share...

  10. ADDED :)

    It is awesome
    Believe me i was searching for this from months and atlast MBT gives me :)

    Bhai just tell me one thing
    Which is better
    These two shows huge difference

  11. Mohamed can u create a Google +1 Popup ? Thats a good idea

  12. thanks

    which line I must ignore ??
    because my blog has already JQuery

  13. @Haider Afridi Welcome BRO :)
    Analytics is Better, Because it Shows Detailed Stats, Bounce Rate ETC..

  14. @Admin Welcome;
    Ignore "<script src=''></script>"
    Note This Works Only In 1.5+ Versions Of JQuery.

  15. its not working on my website

  16. This comment has been removed by the author.

  17. siddharth this is the awesome post and the content truely appreciate but one think i like to justify to you that the css and javascript codes makes webpage slower. so try to compress it and post in future posts. As all can attain the results

  18. @Shiva Poudel Thanks For The Advice Dear !!
    I'll Take Care Of That in Future... :)
    But i Bet This Widget Doesn't Slow Your Page..

  19. thanks a lot.. i'm looking for this tutorial a long time but i have found it here.. thanks man.

  20. I want it displayed each when come back site, how????


  22. wow amazing man.. I have apply it in my two blogs and it is looking fabulous..
    one is Result of and another one is wwwIndiaResults2013

  23. nice one Thank u for share this.....