How To Create A Beautiful Pop-up Email Subscription Box For Bloggers

Most times some visitor visit your site most of them may not really carryout some necessary action, but RSS feeds is one of the means to get visit to your site but most time you hardly get subscribers to your RSS feeds due to wrong placement of the widget. To some they may add it to the sidebar but after scrolling down the site, it will no longer be visible to the visitors but today am going to show you how to add beautiful email subscription box for blogger site to get more subscribers to your feeds and to also increase your traffic.

The platform that provides us with this stylish subscription box for blogger is Feedburner in case you do not have an account you can create one with them to be able to follow this tutorial effectively. Feedburner pop up JQuery subscription widget we will add in this tutorial has a beautiful look and with that you get your visitors attention.

Read Also:- How To Implement PrismJs Syntax Highlighting to your Blogger/BlogSpot For Better Formatting

The essence of creating this feedburner email subscription popup widget is to increase subscribers to your blog’s daily via RSS FEED.

Procedure to install email popup subscription box to your bloggers blog

Note: Before proceeding to this tutorial, make sure you back up your template in case there is any error you can equally reverse it back.

1. Simply go to your Blogger Dashboard>>Template>>Edit Html

2. Search for </head> tag by pressing CTRL + F  and paste </head>  to find the tag in your blogger template

3. Proceed by copying and pasting the code below before/above </head>

<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();
//set timeout for closing the popup
setTimeout(function () { $.fn.colorbox.close(); }, 20000);
//color box width, height and popup id
$.colorbox({width:&quot;autopx&quot;, height:&quot;autopx&quot;, inline:true, href:&quot;#email-popup&quot;});
}});</script>

How to troubleshoot cookies and set timeout for popup box

1. *7 Setting this value will cause an effect to your cookie refreshment. In this tutorial the subscription box has been set in such a way that it will appear once to the visitor and the subscription box will appear to the visitor again after the time interval of 1 week but if you wish to display it to the visitor after 1 day then change 7 to 1.
2. Simply set up the popup timeout highlighted in Green color, in this post the default timeout is 20 second (20000  millisecond). For instance, Setting up popup time out to 2 minute you need replace 20000 to 120000.

Note:- Making the popup to appear more than one time to the visitor or readers may annoy them, so leaving it to the default settings is recommended and move the next step

4. Proceed by searching for </b:skin>.  Simply paste the below code before </b:skin>.

/* 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; 
    -webkit-overflow-scrolling: touch; 
} 
#cboxTitle { 
    margin: 0; 
} 
#cboxLoadingOverlay, #cboxLoadingGraphic { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { 
    cursor: pointer; 
} 
.cboxPhoto { 
    float: left; 
    margin: auto; 
    border: 0; 
    display: block; 
    max-width: none; 
    -ms-interpolation-mode: bicubic; 
} 
.cboxIframe { 
    width: 100%; 
    height: 100%; 
    display: block; 
    border: 0; 
} 
#colorbox, #cboxContent, #cboxLoadedContent { 
    box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
} /* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered and tabbed in a way that represents the nesting of the generated HTML. */#cboxOverlay { 
    background: #000; 
} 
#colorbox { 
    outline: 0; 
} 
#cboxContent { 
    margin-top: 20px; 
    background: #000; 
} 
.cboxIframe { 
    background: #fff; 
} 
#cboxError { 
    padding: 50px; 
    border: 1px solid #ccc; 
} 
#cboxLoadedContent { 
    border: 5px solid #e9e9e9; 
    -webkit-border-radius:4px;     
    -moz-border-radius:4px; 
    border-radius: 4px; 
    
    background: #fff; 
    box-shadow: 3px 3px 3px #fff; 
} 
#cboxTitle { 
    position: absolute; 
    top: -20px; 
    left: 0; 
    color: #ccc; 
} 
#cboxCurrent { 
    position: absolute; 
    top: -20px; 
    right: 0px; 
    color: #ccc; 
} 
#cboxLoadingGraphic { 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXsS9ncZty7jM_tPAt26sotTRPMnqHAzCHUxo_mXZfH5YuZJWv7SHHvwZCPOLrR1s9BBfmbPS4IqUkN_Y5VKfd_BovZEVtVwzjlh1JATLnFigmogazmm5kiBpdtAz_XCklV0uhpw6bGnUh/s32/loading.gif) no-repeat center center; 
} /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { 
    border: 0; 
    padding: 0; 
    margin: 0; 
    overflow: visible; 
    width: auto; 
    background: none; 
} /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active { 
    outline: none; 
} 
#cboxSlideshow { 
    position: absolute; 
    top: -20px; 
    right: 90px; 
    color: #fff; 
} 
#cboxPrevious { 
    position: absolute; 
    top: 50%; 
    left: 5px; 
    margin-top: -32px; 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWQOUy1II7XdxdyAAs2kDc8Ov3S9bLkaFYtOOf0e3sj0Y0URhjSc7HlwSz8lG1Qd9zdWBd3t2MeKAkMoQKIsa01Mi1mpYYC2uiajKm7SaTEklfWeFycR0NHPC3svOqtfrzTfdA5sBRuDVQ/s1600/controls.png) no-repeat top left; 
    width: 28px; 
    height: 65px; 
    text-indent: -9999px; 
} 
#cboxPrevious:hover { 
    background-position: bottom left; 
} 
#cboxNext { 
    position: absolute; 
    top: 50%; 
    right: 5px; 
    margin-top: -32px; 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWQOUy1II7XdxdyAAs2kDc8Ov3S9bLkaFYtOOf0e3sj0Y0URhjSc7HlwSz8lG1Qd9zdWBd3t2MeKAkMoQKIsa01Mi1mpYYC2uiajKm7SaTEklfWeFycR0NHPC3svOqtfrzTfdA5sBRuDVQ/s1600/controls.png) no-repeat top right; 
    width: 28px; 
    height: 65px; 
    text-indent: -9999px; 
} 
#cboxNext:hover { 
    background-position: bottom right; 
} 
#cboxClose { 
    position: absolute; 
    top: 5px; 
    right: 5px; 
    display: block; 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWQOUy1II7XdxdyAAs2kDc8Ov3S9bLkaFYtOOf0e3sj0Y0URhjSc7HlwSz8lG1Qd9zdWBd3t2MeKAkMoQKIsa01Mi1mpYYC2uiajKm7SaTEklfWeFycR0NHPC3svOqtfrzTfdA5sBRuDVQ/s1600/controls.png) no-repeat top center; 
    width: 38px; 
    height: 19px; 
    text-indent: -9999px; 
} 
#cboxClose:hover { 
    background-position: bottom center; 
}
#subscriptionwrap { 
    width: 600px; height: 190px; 
    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;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; 
}

5. Proceed to Save your template to see the effect of the code. If the code worked, then Follow this final step below.

6. Now, find  </body> tag.

7. and paste the below code before closing </body> tag.

<div style="display: none;">
<div id="email-popup" style="position: scroll; z-index: 99999;">
<div id="subscriptionwrap">
<div class="subscriptionbox">
<h4>
Do you want to get all tech and blogging tips from <strong>Dbencotech.com?</strong></h4>
Subscribe to Dbencotech to get all the latest blogging tips free!<br />
<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=dbencotech&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;);return true" target="popupwindow">
<input name="uri" type="hidden" value="dbencotech" />
<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>

How to Troubleshoot Popup

Proceed by making below changes in the above CSS and HTML codes.

• Simply edit the highlighted yellow text to whatsoever you like. This will appear at the top of the input box of the popup box.
• Also edit the highlighted code in green color for width and height adjustment as you wish for your current blog/website layout.
• Replace dbencotech 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 dbencotech with your feed title. This will appear at the end of your feed link. In my case it is <input name='uri' type='hidden' value='dbencotech />

Read Also:- How to generate your own favicon using your favourite image

Note: The popup will appear only once in week. For the popup box to appear again you need to delete your browser cookie and also refresh the page for it to take effect.

Search Tags:- beautiful email subscription box for blogger,stylish email subscription widget for blogger,feedburner email subscription popup,feedburner popup blogger,stylish subscription box for blogger,blogger popup widget,pop up newsletter blogger,subscribe box for blogger.

   

Get our updates delivered to your inbox