Saturday, August 10, 2013

Get More Subscribers With Email Subscription Pop Up Box

Author: Gagan Masoun in:
Get More SubscribersIncrease email subscribers rate by 500% to get higher rankings for your blog. With email lists affiliate marketers can easily promote their products among their readers. You have already learn how to add email subscription widgets to blogs. Today in this post we will guide you how to add a popup Jquery Email subscription box to your blogger/blogspot blog. For the demo you might love to see this screenshot below:

How to Add Email Subscription Pop Up Box

  • Go to Blogger Dashboard » Template
  • Click On Edit HTML
  • Search For <body>
  • Copy/Paste the Following Code After/Below it
<link rel="stylesheet" href="https://googledrive.com/host/0B66hLK2d2x4VZTQ2eGdVTi13N1E" />
<style>
 /*-----------------------------------------------------------------------------------*/ 
/*Email Subscribe Box Popup By Blogs Daddy
/*-----------------------------------------------------------------------------------*/ 
#subscribe {
    font: 12px/1.2 Arial,Helvetica,san-serif;
    color: #666;
    height: 355px;
}
#subscribe a, 
#subscribe a:hover, 
#subscribe a:visited {
    text-decoration: none;
}
.box-title {
    color: #F66303;
    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>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script> 
<script src="http://code.helperblogger.com/jquery.colorbox.js"></script> 
 <script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*7; /*This is line to edit time */
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"390px", 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;'> 
<style> .home-featured-right {
    background: url(http://demo.studiopress.com/balance/wp-content/themes/balance/images/dashes-bg.png) #d05353;
    border: 5px solid #fff;
    font-size: 16px;
    margin: 0px;
    width: 320px;
    font-family: calibri;
}
.home-featured-right,
.home-featured-right p,
.home-featured-right h4.widgettitle {
    color: #fff;
    text-shadow: #a64242 -1px -1px;
    text-align: center;
}
.home-featured-right p {
    font-size: 16px;
    margin-bottom: 20px;
}
.home-featured-right .widget {
    margin: 35px;
}
.home-featured-right h4.widgettitle {
    font-size: 26px;
    margin-bottom: 20px;
}
.home-featured-right input[type=text] {
    -moz-box-shadow: inset 0 1px 2px 1px #eee;
    -webkit-box-shadow: inset 0 1px 2px 1px #eee;
    background: #fff url(http://demo.studiopress.com/balance/wp-content/themes/balance/images/email-icon.png) no-repeat 16px 15px;
    border-bottom: none;
    border-left: 1px solid #963c3c;
    border-right: none;
    border-top: 1px solid #963c3c;
    box-shadow: inset 0 1px 1px 1px #eee;
    color: #000;
    font-family: Verdana, Arial, Tahoma, sans-serif;
    font-size: 12px;
    padding: 14px 15px 14px 45px;
    width: 180px;
}
#home-featured .home-featured-right input[type=submit] {
    background: url(http://demo.studiopress.com/balance/wp-content/themes/balance/images/email-button.png) no-repeat !important;
    border: none;
    font-size: 0;
    height: 28px;
    margin: 0 0 0 15px;
    line-height: 0;
    text-indent: -9999px;
    width: 26px;
}
#email-news-subscribe .email-box {
    padding: 5px 10px;
    font-family: "Arial","Helvetica",sans-serif;
    border-top: 0;
    border-image: initial;
    height: 35px;
    margin-left: -20;
}
#email-news-subscribe .email-box input.email {
    background: #FFFFFF;
    border: 1px solid #dedede;
    color: #999;
    padding: 7px 10px 8px 10px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    border-image: initial;
    font-family: "Arial","Helvetica",sans-serif;
}
#email-news-subscribe .email-box input.email:focus {
    color: #333
}
#email-news-subscribe .email-box input.subscribe {
    background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
    background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
    -pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
    font-family: "Arial","Helvetica",sans-serif;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 1px solid #cc7c00;
    color: white;
    text-shadow: #d08d00 1px 1px 0;
    padding: 7px 14px;
    margin-left: 3px;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    border-image: initial;
}
#email-news-subscribe .email-box input.subscribe:hover {
    background: #ff9b00;
    background-image: -moz-linear-gradient(top,#ffda4d,#ff9b00);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
    outline: 0;
    -moz-box-shadow: 0 0 3px #999;
    -webkit-box-shadow: 0 0 3px #999;
    box-shadow: 0 0 3px #999 
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
    background: -moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
    -pie-background: linear-gradient(270deg,#ffda4d,#ff9b00);
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 1px solid #cc7c00;
    color: #FFFFFF;
    text-shadow: #d08d00 1px 1px 0
}   
</style>  
<div class="home-featured-right">
    <div id="enews-2" class="widget enews-widget">
        <div class="widget-wrap">
            <div class="enews">
                <h4 class="widgettitle">Sign Up for Free Email Updates</h4>
                <p>Get our latest updates direct in your inbox.Just enter your wail address
                    below....</p>
                <p>Your privacy and email address are safe with us!</p>
                <div id="email-news-subscribe">
                    <!-- Email Subscribe -->
                    <div class="email-box">
                        <form action="http://feedburner.google.com/fb/a/mailverify" method="post"
                        target="popupwindow" onsubmit="window.openundefined',http://feedburner.google.com/fb/a/mailverify?uri=BlogsDaddy" ><span style="background-color: #ea9999;">hblogger</span>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
                            <input class="email" type="text" style="width: 150px; font-size: 12px;"
                            id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value=&amp;#39;&amp;#39;;"
                            onblur="if(this.value==&amp;#39;&amp;#39;)this.value=this.defaultValue;" />
                            <input type="hidden" value="BlogsDaddy" name="uri" />
                            <input type="hidden" name="loc" value="en_US" />
                            <input class="subscribe" name="commit" type="submit" value="Subscribe"
                            />
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end .home-featured-right -->
<div style="background: #fff;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;" > <!-- Don't remove the credit links,If you removed credits then your gagdet will not work --><span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://goo.gl/9fXrd" target="_blank" >Blogger Widgets &#187;</a></span></div></div>
</div>

Customizations

Replace BlogsDaddy (Feedburner Username) with Your Own. Save your blogger template and its all done :)

We hope you liked this tutorial, and please tell us more about your reading experience in comments below. Stay Blessed :)


About Admin of the Blog:

Gagan Masoun is the founder of Blogs Daddy .He is a Tech Geek, SEO Expert, Web Designer and a Pro Blogger. Contact Him Here

Follow him @ Facebook | Twitter

9 comments:

  1. RaplusAugust 11, 2013 at 9:32 AM

    This is a very attractive popup up box, but many readers hate pop ups.

    ReplyDelete
    Replies
    1. Gagan MasounAugust 12, 2013 at 10:52 AM

      Yes, readers hate only each time pop box. Its one time pop up box. So, I am sure your blog readers will love this widget.

      Delete
  2. Tarun JaitelyAugust 12, 2013 at 12:36 AM

    Thanks for this widget. It will help bloggers to increase the no. of email subscribers.

    ReplyDelete
  3. Deep SinhaAugust 13, 2013 at 12:46 AM

    Nice but i think pop up widgets feels little irritated.

    Regard's
    http://www.skillblogger.com/

    ReplyDelete
    Replies
    1. Gagan MasounAugust 13, 2013 at 1:06 AM

      Thanks for your review Deep. Yes, it happens some times. But email subscription pop is important too..!!

      Delete
  4. UnknownAugust 13, 2013 at 12:14 PM

    Goodday sir, I realy love this tutorial, Plz sir, were can I Locate my Feedburner Username for my blog. So dt I can add dis wadget to my blog.

    ReplyDelete
    Replies
    1. Gagan MasounAugust 13, 2013 at 9:41 PM

      Hello Onyema Shedrach,

      You can locate your Feedburner username for your blog easily. I mentioned feedburner username in red color highlighted. Thanks

      Delete
  5. AnonymousAugust 28, 2013 at 2:19 PM

    hi friends,
    You can locate your Feedburner username for your blog easily. I mentioned feedburner username in red color highlighted. Thanks

    ReplyDelete

Home Write For Us Privacy Policy Contact-us

The content is strictly copyrighted to the Admin and may not be reproduced without permission.

© 2014 - Blogs Daddy