Header Ads

Create a Very Simple Popup Email Subscription Box for RSS Feedburner

What is Email Subscription?
An email subscription is when people subscribe to your new posts via email. This means that they receive notifications via email without having to actually visit your blog. It offers a valuable service to readers who don’t want to miss your posts. It’s a free service and is valuable especially if your blog is rarely updated since the content is pushed directly to your readers.

w3technology_email_subscription_box

Step - 1 Add below code in CSS
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
#popbox
{
background:#fff;
border:2px solid #008d44;
border-radius:5px;
color:#fff;display:block;
font-family:"Open Sans",sans-serif;
font-size:16px;
left:35%;
padding:18px;
position:fixed;
top:40%;z-index:50000
}
.mylink
{
float:left;
left:2px;
position:absolute;
text-decoration:none;
top:-2px;
z-index:1000;
font-size:14px
}
.subscription
{
width:300px
}
.subscription h3
{
background:#fff;
border:1px solid #00934a;
color:#333;
margin-bottom:8px;
padding:5px;text-align:center
}
.subscription p
{
margin:10px auto
}
.subscription input[type=text]
{
background:#fff;
border:1px solid #00af66;
padding:5px;width:210px
}
.subscription input[type=submit]
{
background:#393939;
border:1px solid #333;
border-radius:3px;
color:#fff;
cursor:pointer;
font-size:15px;
font-weight:700;
padding:2px 10px
}
.form
{
border:1px solid #009e55;
padding:3px;text-align:center
}
</style>

Step - 2 Add below code in HTML.
<div id='popbox'>
<a class='mylink' href='javascript:void(0);
'onclick='document.getElementById("popbox").style.display="none"'>
<font color='#000'>[X]</font></a>
<div class="subscription">
<h3>Subscribe for our all latest News and Updates</h3>
<form class="form" action="https://feedburner.google.com/fb/a/mailverify" 
method="post" target="popupwindow" 
onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?
uri=W3Technology','popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p style="color:black">Enter your email address:</p>
<p style="color:black">
<input type="text" name="email" placeholder="Your Email..." required=""/></p>
<input type="hidden" value="W3Technology" name="uri"/>
<input type="hidden" name="loc" value="en_US"/><input type="submit" value="Update" />
<p style="color:black">After update, Check your Email...</p></form>
</div>

Note:
1.Replace W3Technology with your feedburner user name.

Do you want to show this popup only in desktop site please add below line in CSS.
@media only screen and(min-device-width: 0px)and(max-device-width: 720px) 
{
div#popbox {visibility:hidden;}
}

No comments:

Powered by Blogger.