Home Blogger Use Cool Widget For Social Sharing Feeds RSS Get More Subscribers With Email Subscription Pop Up Box

jerry at
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.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 MyBlogTrick4u
/*-----------------------------------------------------------------------------------*/ 
#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="https://all-coder.googlecode.com/svn/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=MyBlogTrick4u" ><span style="background-color: #ea9999;">MBT4u</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="MyBlogTrick4U" 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/yAUBcq" target="_blank" >Blogger Widgets &#187;</a></span></div></div>
</div>

Customizations

Replace MybloggerTrick4u (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 :)
, , ,
Share To:
Axact

Axact

Vestibulum bibendum felis sit amet dolor auctor molestie. In dignissim eget nibh id dapibus. Fusce et suscipit orci. Aliquam sit amet urna lorem. Duis eu imperdiet nunc, non imperdiet libero.

Blogger Use Cool Widget For Social Sharing Feeds RSS

Post A Comment:

0 comments:

Subscribe to: Post Comments (Atom)