
One way we can say that our blog is successful is when it already had a great amount of subscribers, as they are the one who can maintain the traffic and the income of our blog. I know it is difficult to obtain a huge amount of loyal visitors, especially when we're having many competitors competing to acquire the same type of audience we want. Is your blog is in this kind of situation? I believe in producing a quality content is always the key, however I believe also that is not the only thing we should consider. We should be more strategic in converting visitors, right?
I want to tell you something, for almost 4 months I didn't visit my Feedburner account to check the number of my blog's subscribers, and when I try to visit it, I was shocked when I saw my blog had already over 1800 subscribers and counting. After that, the idea comes to my mind, maybe I need to create a popup subscription box for my blog in order to increase more my subscribers. So today we're going to make a stunning popup subscription box where our visitors can subscribe when they are reading our blog post.
This type of subscription box is really different from what we did before. This type will probably generate high conversion rate, since it will pop up on the screen of our visitors.
Adding Popup Subscription Box in Blogger
1. The first thing we should do is to install first a JavaScript library (jQuery) on the head of our template. To do that, go to Blogger Dashboard ->> Template ->> Edit HTML and find this code<head>
. Just after that code, copy and paste the following codes given below, and after that save your template.<b:if cond='data:blog.pageType == "item"'>What we did actually is we set our template to download the JavaScript library (jQuery) only on our blog posts, so that the subscription box will appear only on our blog posts.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/>
</b:if>
2. After we installed the javascript library we can now add our Popup subscription box on blogger. On your Blogger Dashboard ->> Layout ->> Add a Gadget ->> HTML/JavaScript then copy and paste the following codes given below.
<script type="text/javascript" src='http://aireshalili.github.io/internetsmash/popup-email-subscription.js'></script>
<style type="text/css">
.internetsmash-swing{-webkit-animation:swinging 10s ease-in-out 0s infinite; -moz-animation:swinging 10s ease-in-out 0s infinite; -webkit-transform-origin:50% 0; -moz-transform-origin:50% 0; transform-origin:50% 0;} @-webkit-keyframes swinging{ 0% { -webkit-transform: rotate(0); } 5% { -webkit-transform: rotate(10deg); } 10% { -webkit-transform: rotate(-9deg); } 15% { -webkit-transform: rotate(8deg); } 20% { -webkit-transform: rotate(-7deg); } 25% { -webkit-transform: rotate(6deg); } 30% { -webkit-transform: rotate(-5deg); } 35% { -webkit-transform: rotate(0deg); } 40% { -webkit-transform: rotate(0deg); } 45% { -webkit-transform: rotate(0deg); } 50% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(0); } } @-moz-keyframes swinging{ 0% { -moz-transform: rotate(0); } 5% { -moz-transform: rotate(10deg); } 10% { -moz-transform: rotate(-9deg); } 15% { -moz-transform: rotate(8deg); } 20% { -moz-transform: rotate(-7deg); } 25% { -moz-transform: rotate(6deg); } 30% { -moz-transform: rotate(-5deg); } 35% { -moz-transform: rotate(4deg); } 40% { -moz-transform: rotate(-3deg); } 45% { -moz-transform: rotate(2deg); } 50% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(0); } } @keyframes swinging{ 0% { transform: rotate(0); } 5% { transform: rotate(10deg); } 10% { transform: rotate(-9deg); } 15% { transform: rotate(8deg); } 20% { transform: rotate(-7deg); } 25% { transform: rotate(6deg); } 30% { transform: rotate(-5deg); } 35% { transform: rotate(0deg); } 40% { transform: rotate(0deg); } 45% { transform: rotate(0deg); } 50% { transform: rotate(0); } 100% { transform: rotate(0);}}
.outer-email-popup-box {display: none;background: rgba(0, 0, 0, 0.8);width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 99999;}
.email-popup-box{width: 500px;height: 280px;position: fixed;top: 0;left: 0;right: 0;bottom: 25%;margin: auto; text-align: center; background: #fff;-webkit-animation: swinging 10s ease-in-out 0s infinite; -moz-animation: swinging 10s ease-in-out 0s infinite; animation: swinging 10s ease-in-out 0s infinite;}
.email-popup-header{text-align: center;font-size: 2em;color: #FFFFFF; background: #006D90; padding: 4px 15px 7px 10px; margin: 13px 0px 14px 0px;}
.email-popup-subheader{text-align: center; font-size: 1.1em; color: #676767;padding: 10px 0px 22px}
.email-popup-body{text-align: center; margin-top: 9px;padding: 22px 0px 3px 0px;background: #006D90;}
.email-right{background: green;float: right;}
.email-left{background: red;float:left;}
.email-form{width: 80%; margin: 0 auto;}
.in-popup-mail{padding: 10px;margin: 0 auto;width: 270px}
.btn-popup-mail{padding: 10px; background: #006D90;border: 2px solid #fff;color: #fff;margin: 0 auto;}
.btn-popup-mail:hover{background: #003E52}
.background-img{width: 40px; margin: 0 auto; padding-top: 5px}
.exit-button-subbox {float: right; cursor: pointer; position: absolute; right: 0px; top: 0px; margin-top: 4px; margin-right: 4px;}
.exit-button-subbox:before { content: "X"; padding: 4px 4px; background: #FFFFFF; color: #000000; font-weight: normal; font-size: 15px; font-family: sans-serif;}
.footer-popup-mail{color:#fff;font-size:12px;margin-top:-5px}
.footer-popup-mail a{color:#fff}
</style>
<div class="outer-email-popup-box">
<div class="email-popup-box internetsmash-swing">
<div class='exit-button-subbox'></div>
<div class="background-img">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWejjKW0lOpNOr0UtHhG9MuL0mnrVLzhhvwXbVZwDS5WSs4JIqHnaZYpxSXElF6Ik0r8qzeFgJz-izQJr5FhVUHHX2gXNgAJojGsmN-9jcxqU_rRtQ-L9qKzCGi6XUCKAeabHIqMpODDU/s89-Ic42/mail.png" style="width:50px" />
</div>
<div class="email-popup-header">
FREE subscription to our newsletter
</div>
<div class="email-popup-subheader">
Join our blogger community in creating successful blogs
</div>
<div class="email-popup-body">
<div class="email-form">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Internetsmash', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
<table width="100%">
<tbody>
<tr>
<td>
<input class="emailu in-popup-mail" name="email" placeholder="Enter your email address" type="text" />
</td>
<td>
<input class="mail-buttons btn-popup-mail" type="submit" value="Subscribe" />
</td>
</tr>
</tbody>
</table>
<input name="uri" type="hidden" value="Internetsmash" />
<input name="loc" type="hidden" value="en_US" />
</form>
</div>
<div class="footer-popup-mail">Powered by: <a href="http://www.internetsmash.com/2015/12/popup-subscription-box.html" rel="nofollow">Internetsmash</a></div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
if($.cookie('popup-email-box') != 'yes'){
$('.outer-email-popup-box').delay(15000).fadeIn('medium');
$('.exit-button-subbox, .button').click(function(){
$('.outer-email-popup-box').stop().fadeOut('medium');
});
}
$.cookie('popup-email-box', 'yes', { path: '/', expires: 15 });
});
</script>
Customization
HTML/CSS
Internetsmash: Change this with your own feedburner address.Header and subheader: Just change this with your desired phrases.
#006D90: Just change the background color of some elements in HTML to satisfy your blogger template theme.
JavaScript
15000: The subscription box is set to appear after 15 seconds, if you want to change that just change 15000 to your desired number. Note: 1000 = 1 second.15: By default our visitors can only see the subscription box once every 15 days, if you want to increase or decrease the cookies expiration date just change the value 15.
You may now test you popup subsciption box, if the widget failed to appear just clear your browser cookies and reload your blog post. To clear your browser cookies just press Ctrl+Shift+Del on your keyboard, select cookies and click Clear browsing data button.