RSS Feedburner Newsletter Subscription Pop Up Box Widget for Blogger

Share it Please

"How to add RSS Feedurner Newsletter Subscription Pop Up Box widget for Blogger to your users.It's really help to subscribe your blog feeds through this pop up widget."

Newsletter is a important part of any blog and website because different user come from google search engine and not necessary to every user learn your website name and your blog url.

So you need to provide to your user a relaible and handy method to subscribe or bookmarks your blog for future purpose to get latest feeds from your blog.

Rss Feed Burner provide a very easy method to get feeds from your blog on regular basis dose to your newsletter subscribers. First you need to setup feeds from Google Rss Feedburner in your Blogger Blog.

After Setup of Rss feedburner, Blogger provide a default feedburner subscriber widget from Add Widget Section { Dashboard - Layout - Add Widget }.

Why Needs to Use Pop Up Newsletter Subscriber

Because most of user read your blog articles and leave it from your blog.

When started a new blog or website, especially the newbies face this problem of getting more and more subscribers and traffic.

It’s very difficult task to motivate the people to become your subscribers until they get something extra ordinary at your blog/site.

One thing is that you can write more and more or publish something amazing so that the visitors will be inspired and will turn into subscribers, but this procedure will possibly very long.

You can also add the Subscription box into your blog, to allow the readers or visitors to become your subscribers. But here again not many people will attempt to do it.

But today we gonna to share RSS Feedburner Newsletter Subscription Pop Up Box for Blogger blog.

Demo

How It Works?

When a visitor visits your blog, the subscription box will once pop up in front of them before they view your blog/site, and it ask them to enter their e-mail address to get the daily or weekly dose of tips and tricks from your blog. Whenever you published any post from your blog then dispose an email to your subscriber.

How to Add this Widget in Blogger Blog

If you want to add this widget in your blogger account blog, you need to follow these instructions -

First Login to your Blogger Account and select to your Blogger Dashboard.

Now go to Template - Edit HTML Section and Find <head> tag. {Using CTRL + F }

After finding of <head> tag, put the below code after this tag.

<link href='http://fonts.googleapis.com/css?family=Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

{ Note: This font Style code for this widget if your remove this code then fonts not showing properly. if you want to change this font style code then customise yourself and add another font code.}

Now Search for </b:skin>. Click ► to expand the code.

Copy & paste the following CSS styles just above ]]></b:skin>.

#ndw-email {
width: 100%;
height: 250px;
border-radius: 5px 5px 0px 0px;
}
#ndw-email .heading {
padding: 15px 25px;
line-height: 35px;
font-size: 26px;
font-weight: 600;
font-family: Josefin Sans;
color: rgb(170, 170, 170);
text-align: center;
text-shadow: 0px 1px rgba(255, 255, 255, 0.75);
background: none repeat scroll 0% 0% rgb(247, 247, 247);
}
#ndw-email p {
font-family: Josefin Sans;
font-size: 13px;
color: rgb(170, 170, 170);
line-height: 25px;
padding: 10px 20px 0 20px;
margin: 0;
}
#ndw-email .emailsub {
padding: 0px 20px 10px 20px;
}
#ndw-email .emailsub input {
color: rgb(170, 170, 170);
padding: 10px;
margin-top: 10px;
font-size: 15px;
font-family: Josefin Sans;
width: 92%;
border: 1px solid #ccc;
border-bottom: 2px solid #ccc;
border-radius: 5px;
transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#ndw-email .emailsub input:focus {
border-color:#F4836A;
outline: none;
box-shadow: 0 0 2px 1px #F4836A;
}
#ndw-email .emailsub .button {
background: #F4836A;
color: white!important;
border:none;
outline: none;
border-bottom: 3px solid #B3614E;
transition:background .4s linear;
width: 90%;
margin-right: 5%;
margin-left: 5%;
font-weight: 600;
cursor:pointer;
}
#ndw-email .emailsub .button:hover{
background: #DD7761;
}
#digitalpopup {background-color: #fff; overflow:none;}
.digitalpopup {width:400px; height:250px; position:fixed; top:50%; left:50%; margin-top:-150px; margin-left:-200px;}
#digital-popup {position:absolute;}
#digital-popup {
display:block; top:0px; left:0px;
background:rgba(0,0,0,0.1);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
margin:0; overflow-y:auto;}

Now press CTRL+F and search for </body> tag

Copy & paste the following code just above </body> tag.

<div id="digital-popup">
<div id="digitalpopup" class="digitalpopup">
<center style="cursor:pointer;float:right;margin-right:-20px;margin-top:-20px;"
onmouseup="document.getElementById('digital-popup').style.display='none'">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivPg5g9r8aChyphenhyphen5NE79ZH_YrYDEXZLW2JADl53E_glFGZIThYMwPj-MTCE0j0M337Ap6qzuB-pmJoMOacNOldnX1Xqq_ub4V4sRyfwksHd06R3uR8JUdOjPzcGmebk0Z-9_GzUeMLiBrPM/s1600/closebutton_zps63b8f46a.png"/>
</center>
<div id='ndw-email'>
<div class='heading'>
Sign Up Now!
</div>
<p>Subscribe to our newsletter to get the latest updates to your inbox. ;-).</p>
<div class='emailsub'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bgbeginner', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type='text' name='email' placeholder='Your Email' />
<input type="hidden" value="bgbeginner" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input value="Sign Up Now!" class="button" type="submit" />
</form>
</div>
</div>
</div>
</div>

Click “Save Template”.

That's all done and refresh your blog for show pop up widget.

Note : Customise feedburner id "bgbeginner" to your own feed burner id.

Now everything have done.

Conclusion

This Pop Up Newsletter Widget really useful for your blog and help to increase your blog traffic. This widget show every time to your user and remind to your user for subscribe to your blog feed.
Pop Up hide by one click so don't worry for user distraction and not leave to your blog.

We hope this article helped to you to increase your blog subscriber and get more traffic via feeds.

If you liked this article, then please subscribe to our YouTube Channel for Blogger video tutorials. You can also find us on Twitter and Google+.

January 08, 2015