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]
]]></b:skin>
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;}
#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 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(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x top left;}
    #cboxTopRight{width:14px; height:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px 0;}
    #cboxBottomLeft{width:14px; height:43px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 -32px;}
    #cboxBottomCenter{height:43px; background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x bottom left;}
    #cboxBottomRight{width:14px; height:43px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px -32px;}
    #cboxMiddleLeft{width:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -175px 0;}
    #cboxMiddleRight{width:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -211px 0;}
    #cboxContent{background:#fff; overflow:visible;}
        #cboxLoadedContent{margin-bottom:5px;}
        #cboxLoadingOverlay{background:url(http://2.bp.blogspot.com/-bMneOFi_UDo/Txohpge3Z9I/AAAAAAAAF0s/AbVgxX9pXtQ/s400/loadingbackground.png) no-repeat center center;}
        #cboxLoadingGraphic{http://3.bp.blogspot.com/-SKktU1-SCCw/TxohpRB19LI/AAAAAAAAF0Y/iwIo3LnjoE0/s400/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(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/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;}

/*-----------------------------------------------------------------------------------*/
/*    box popup
/*-----------------------------------------------------------------------------------*/
#subscribe {
    font: 12px/1.2 Arial,Helvetica,san-serif;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
    text-decoration:none;
}
.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 a.email 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("http://imgboot.com/images/cybersidh/subscribebutton.png") 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 {
border:none;
}
.demo {
display:none;
}

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='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://sidharth12.googlecode.com/files/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
   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"});
       }
});
</script>
    <!-- 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="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ILibrary', '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="http://feedburner.google.com" target="_blank">FeedBurner</a> | Powered By <a href="http://www.mybloggertricks.com">MBT</a></p></form>
        <br/><h2 class="box-tagline">Subscribe us today and get Quality Articles for free.</h2>
</div>
</div>

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
ILibrary.
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 ▼
PLEASE NOTE:
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
    hackinghumans.blogspot.com

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

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

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

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

    ReplyDelete
  6. hi mr mustafa and mr Sidharth !
    This is my weblog deluxepages.blogspot.com 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 (http://feeds.feedburner.com/DeluxePages) 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

    ReplyDelete
  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 ..

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

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

    ReplyDelete
  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
    BLOGGER STATS OR ANALYTICS ?
    These two shows huge difference

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

    ReplyDelete
  12. thanks

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

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

    ReplyDelete
  14. @Admin Welcome;
    Ignore "<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>"
    Note This Works Only In 1.5+ Versions Of JQuery.

    ReplyDelete
  15. its not working on my website www.o-alevel.com

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete
  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

    ReplyDelete
  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..

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

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

    ReplyDelete
  21. THE IMAGE FILE IS ERROR, PLEASE IPLOAD NEW FILES
    THANKS

    ReplyDelete
  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

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

    ReplyDelete