How To Setup Email Popup Subscription Box For Blogger Blog

RSS feeds is a important part of business grow. So its better to give the readers an option to subscribe to your blog feed by email. Another JQuery Widget with beautiful look, as before I have also share Facebook Popup and Twitter Follower Popup Widget for blogger user. But today I bring in this post another beautiful widget with JQuery light box. In this widget visitors can subscribe you blog’s daily updates via RSS Feed. So here is the complete instructions for how to install the email subscription widget.

How To Install Email Popup Subscription Box

Before you edit Template . Create a Backup

step 1

Go to your Blogger Dashboard>>Template>>Edit Html

step 2

Find following code in your template.

</head>

step 3

and paste the following code </head> above

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script><script src='http://yourjavascript.com/69231961363/jquery-colorbox-min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
if (document.cookie.indexOf(&#39;visited=true&#39;) == -1) {
var setDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + setDays);
document.cookie = &quot;visited=true;expires=&quot; + expires.toUTCString();
$.colorbox({width:&quot;395px&quot;, height:&quot;435px&quot;, inline:true, href:&quot;#email-popup&quot;});
}});</script>

Note:- *7 Setting this value will effect cookie refreshment. I have set the Subscription box to appear once to the visitor and Subscription box will appear again after 1 week. If you want to display after a 1 day then set 7 to 1. if you set the value 1 then it Must  annoying your Blog regular readers. So Leave it By Default and follow the next step.

step 4

Now Search for </b:skin>

Paste the following code before </b:skin>

#subscriptionwrap {
    width: 600px;
    background: #e9e9e9;
    padding: 15px;
    margin: 14px;
    border: 1px solid #ddd;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
    -moz-box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
    box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
}
.subscriptionbox h4 {
    font-size: 30px;
    font-family: 'Verdana', Arial;
    font-variant: small-caps;
    margin: 0 auto;
    text-align: center;
    line-height: 30px;
    color: #333;
    font-weight: 600;
    text-shadow: 1px 1px 5px #333;
    text-decoration: none !important;
}
.subscriptionbox p {
    font-family: geogia;
    font-style: italic;
    font-size: 26px;
    text-align: center;
    margin: 0px;
    line-height: 30px;
    margin-top: 25px;
    border-bottom: 1px solid #333;
    color: #454545;
    padding-bottom: 20px;
}
.emailbutton1 {
    background: #f7f8f9;
    background: -webkit-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
    background: -moz-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
    background: -o-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
    background: -ms-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
    background: linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f7f8f9",endColorstr="#e9e9e9",GradientType=0 );
    border: 1px solid #ddd;
    -webkit-border-top-right-radius: 4px;
    -moz-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
    -webkit-box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
    -moz-box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
    box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
    color: #888 !important;
    text-shadow: 0 1px 0 #fff;
    line-height: 1.5;
    top: 0px;
    margin: 10px 0 0 -15px;
    cursor: pointer;
    padding: 18px 15px 15px 15px !important;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none !important;
}
.emailbutton1:hover {
    background: #f1f1f1;
    background: -webkit-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
    background: -moz-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
    background: -o-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
    background: -ms-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
    background: linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f1f1f1",endColorstr="#e0e0e0",GradientType=0 );
    text-decoration: none !important;
}
.emailinput1 {
       width: 490px !important;
    height: 37px;    padding-right: 30px !important;
    float: left;
    margin: 10px 0 0 0px;
    padding: 8px 40px 8px 10px;
    border: 1px solid #d2d2d2;
    background: #fff;
    font-family: georgia;
    font-style: italic;
    font-size: 16px;
    color: #949494;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-decoration: none!important;
}

step 5

Save your template and you are done second last step! Visit your blog to see it working just perfectly? if everything is working fine then Follow the final step below.

step 6

Now finally find the following code.
</body>

step 7

search </body>

and paste the following code before </body>

<div style='display:none'>
<div id='email-popup' style='position:scroll; z-index:99999;'>
<div id='subscriptionwrap'>
<div class='subscriptionbox'>
<h4>Ready To Be Make <strong>Elegant Blog</strong></h4>
<p>Subscribe to My Blogger Tricks to enjoy Free Tricks</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform1' method='post' onsubmit='window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=bl0ggertricks&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='bl0ggertricks'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailinput1' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>
<input class='emailbutton1' title='' type='submit' value='SignUp'/>
</form>
</div>
</div>
</div>
</div>

step 8

Now you need to make these changes in html code.
Edit the highlighted yellow text to anything you like. It will appear at the top of the input box.
Now replace bl0ggertricks with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
Replace bl0ggertricks with your feed title. It appear at the end of your feed link. In my case it is <input name='uri' type='hidden' value='bl0ggertricks'/>

step 9

Save your template and you are all set!

Visit your blogs and see it popping up just fine! Remember that the popup will show only once.