Create Automatic Email Subscription Pop-Up For Blogger

Automatic Email Subscription Pop-Up For Blogger

Let me say up front that if you don't have an email list of your blog then you are missing a hell lot of traffic for your blog. Why? because it's easier to get visitors to your blog but retaining them is a big deal.

Let's say 90% of your traffic comes from the search engines. The visitor lands, scroll, learn from your blog and leave. But how about if you have an email subscription and he then subscribes to your blog. Now whenever you will publish a new post, he will then be notified through emails.

That's how you retain visitors to your blog. Sounds good? Now let's create automatic email subscription pop-up for blogger but before that check out the live demo for automatic email subscription pop up! (will appear after 5 sec.)


Features of Automatic Email Subscription Pop-Up:

  • It appears only in desktop version of your blog.
  • It pops up automatically just after 5 seconds.
  • It uses FeedBurner Email Subscription.
  • It only appears once your blog is loaded completely so it won't effect page load time of your blog.

 

Create Automatic Email Subscription Pop-Up For Blogger: 

  • Go to your Blogger account > Theme > Backup Template.
  • Click on Edit HTML 
  • Just above </head> tag paste the following CSS styles.
  <style>
@import url(&#39;https://fonts.googleapis.com/css?family=Oswald&#39;);


.teb-pop{
  position:absolute;
  top:0;
  margin-top:0;
  z-index:20;
  width:100%;
 height:100%;
  background-color:#449fe3;
 overflow:hidden;
display:none;
}

.nl{display:block;}

.teb-pop h2{
  position:absolute;
  text-align:center;
  width:100%;
font-size:70px;
color:white;
margin-top:10%;
text-transform:uppercase;
font-family:oswald;
}

.teb-pop p{
  position:absolute;
  text-align:center;
  width:100%;
  color:white;
  font-family:arial;
  margin-top:220px;
  line-height:35px;
  font-size:25px;
}

.teb-name, .teb-email {
    padding: 18px;
    margin: 330px 0px 0 270px;
  margin-left:30%;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
border-radius:5px;
}
.teb-email{
  margin-left:5%;
}

.teb-sub{
  display:block;
  padding:20px 40px 20px 40px;
 margin-top:18px;
  margin-left:42%;
    background-color: #4CAF50;
    color: white;
  border:1px solid #fff;
font-family:oswald;
  font-size:15px;
}

.teb-sub:hover{
  background:none;
cursor:pointer;
}

.tebclose{
 color:white;
  float:right;
  font-size:70px;
  margin-right:25px;
cursor:pointer;
opacity:0.8;
  font-weight:bold;
margin-top:20px;
}

.sbsc{
  text-decoration:none;
}
</style>

  • Search for <body> tag and just after it paste the following code.
<!--AutoPopup By TopEarningBoy.com-->

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>

<div class='teb-pop' id='teb-popup'>

  <a class='tebclose' onclick='closepopup()'>&#215;</a>
  <div>
    
<h2>subscribe to this blog!</h2>
  
<p>Enter your Email to subscribe to this blog and keep 
  <span class='nl'/>yourselves updated with our latest tutorials.</p>
     
 <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&quot;https://feedburner.google.com/fb/a/mailverify?uri=topearningboy&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true' target='popupwindow'>
   
  <input class='teb-name' name='name' placeholder='Name' required='required'/>
    
<input class='teb-email' name='email' placeholder='Email address' required='required'/>
 
   <button class='teb-sub' type='submit'>SUBSCRIBE</button>

   <input name='uri' type='hidden' value='TopEarningBoy'/>

<input name='loc' type='hidden' value='en_US'/>

    </form>

  </div>

  </div>
 </b:if> 

<!--Autopopup ends By TopEarningBoy.com-->
 

  • Now just above </body> paste the following JavaScript code for functionality.
  <script type='text/javascript'>

function closepopup(){
  document.getElementById(&#39;teb-popup&#39;).style.display=&quot;none&quot;;
}

function myFunction(){
  setTimeout(function(){  document.getElementById(&#39;teb-popup&#39;).style.display=&quot;block&quot;;
 }, 5000);
}

</script>

  • Search for <body> tag and paste onload="myFunction()" before > sign. Now your code will look like this!
<body onload='myFunction()'> 

Note: This will make the email subscription pop-up to appear only when all your blog elements are loaded completely.  

Customization:

  • Replace topearningboy with your FeedBurner username.
  • Replace 5000 with 7000 if you want the pop up to appear after 7 seconds.
  • Replace above highlighted texts with your own if you want to. 
  • Save your template and you are done!

 

Feedback: 

Would love to hear your thoughts on this amazing widget created by your very own TopEarningBoy. I tried my best to keep it as simple as I could. Hope it may add a new soul to your blog. You are most welcome to share this pop up widget with your readership as long as you attach credit link back to this page.

If you like our tutorials then don't forget to follow us on Facebook and Twitter. We are always active to help and live up to your expectations! 

No comments:

Powered by Blogger.