Posted by Capturing emails is a great way to build an audience and for generating consistent traffic. So, in this tutorial, you will learn how to add a pop-up email subscription widget in blogger. Moreover, you can customize this perfect subscribe via email widget for blogger.
This blogger popup widget is responsive and appears immediately after a user opens your site. Once the email popup widget will appear user can enter his email address and hit the subscribe button. However, the user can also close the widget without a subscription.
Recommended: Add Pinterest Button to Blogger Images 2020
Also, once the user hits the close button then this widget will not popup again until the user clears browsers cookies. So, in this way, it will not annoy the user.
How to add pop-up email subscription widget in Blogger
Adding a popup email subscription widget in blogger is easy. Follow this step by step tutorial to add pop-up email widget in blogger
Step 1: Open blogger dashboard
First open your blogger dashboard and go to Layout > +Add a Gadget > HTML/JavaScript.
Step 2: Add pop up email widget code
Once you add the HTML/JavaScript widget you will see the blank field for code. Now copy the following code given below and paste it in the blank field.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
.ABT_float_ads_main_Wrap { width: 100%; max-width: 550px; max-height: 400px; position: fixed; z-index: 98765; background:#fff; left: 50%; top: 50%; transform: translate(-50%, -100%); box-sizing: border-box; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); border-radius: 10px; text-align: center; box-shadow: 0px 0px 3px 1px black; display: none; } .ABT_float_ads_close { margin: 0 auto; text-align: center; padding: 20px 20px 20px; position: absolute; top: 260px; right: 200px; z-index: 9999999; } .ABT_float_ads_close #ABT_close_button { font-size: 30px; color: #000; display: inline-block; box-shadow: 0 0 3px rgba(0, 0, 0, 1); background: #fff; padding: 5px; border-radius: 5px; } #ABT_close_button { cursor: pointer; } #ABT_credits { font-size: 30px; color: #fff; position: absolute; bottom: 2px; right: 5px; display: inline-block; text-shadow: 0 0 3px rgba(0, 0, 0, 0.2); text-decoration: none!important; } .ABT_formWrap { background: #fff; padding: 10px; margin: 0px; width: 100%; min-width: 350px; overflow: hidden; box-sizing: border-box; border-radius: 10px; } .ABT_Heading, .ABT_Heading2 { color: #000; font-size: 18px; font-weight: bold; text-shadow: 0px 0px 3px white; font-family: 'Roboto', sans-serif; text-align: center; display: block; padding: 5px 0px; margin: 10px 0px 0px 0px; } .ABT_Heading2 { color: #000; font-size: 16px; margin-bottom: 20px; font-style: normal; font-weight: 100; margin-top: 5px; } .ABT_Heading2 .fa-rss { color: #fff; } .ABT_Heading .fa-heart { color: rgb(227, 27, 35); } .ABT_float_ads_main_Wrap .fa-long-arrow-down { font-size: 40px; z-index: 98567; position: absolute; display: inline-block; padding: 10px; top: 80px; left: 45%; color: white; text-shadow: 0px 0px 5px black; } .ABT_formWrap .ABT_input_group { width: 100%; box-sizing: border-box; position: relative; margin: 0 auto; margin-top: 20px; border: 1px solid rgb(59, 89, 100); border-radius: 4px; } .ABT_input_group:before { color: #fff; content: "\f003"; font-family: FontAwesome; position: absolute; text-align: center; padding: 10px 12px; width: 50px; height: 100%; box-sizing: border-box; background: #F272AB; border: 1px solid rgb(59, 89, 100); text-shadow: 0px 0px 3px black; } .ABT_formWrap .ABT_Email { box-sizing: border-box; width: 100%; padding: 10px 0px 10px 60px; height: 100%; margin: 0px; border: none; border-radius: 4px; border: 1px solid rgb(59, 89, 100); } .ABT_formWrap .button { width: 100%; display: block; padding: 10px; box-sizing: border-box; position: relative; margin: 10px auto; margin-bottom: 20px; border-radius: 4px; background: #F272AB; font-size: 18px; border: none!important; cursor: pointer; text-shadow: 0px 0px 3px black; color: #fff; } .ABT_formWrap, .ABT_innerForm, .ABT_Widget_Container { width: 100%; } .pulse { -webkit-animation: pulse .8s linear infinite; -moz-animation: pulse .8s linear infinite; -ms-animation: pulse .8s linear infinite; animation: pulse .8s linear infinite } @keyframes pulse { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } 50% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8) } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1); transform: scale(1) } 50% { -moz-transform: scale(0.8); transform: scale(0.8) } 100% { -moz-transform: scale(1); transform: scale(1) } } @-webkit-keyframes " pulse" { 0% { -webkit-transform: scale(1); transform: scale(1) } 50% { -webkit-transform: scale(0.8); transform: scale(0.8) } 100% { -webkit-transform: scale(1); transform: scale(1) } } @-ms-keyframes " pulse" { 0% { -ms-transform: scale(1); transform: scale(1) } 50% { -ms-transform: scale(0.8); transform: scale(0.8) } 100% { -ms-transform: scale(1); transform: scale(1) }
</style>
<div class='ABT_float_ads_main_Wrap' id='ABT_float_ads_main_Wrap'>
<span class="ABT_Heading"><i class="pulse fa fa-heart fa-lg" aria-hidden="true"></i> Subscribe Via Email</span>
<span class="ABT_Heading2"><i class="fa fa-rss" aria-hidden="true"></i>
Get the latest stories straight into your inbox!</span>
<div class='ABT_float_ads_close'>
<span id='ABT_close_button' style='float: right'>
<i id='ABT_Close_Button' class="fa fa-times" aria-hidden="true" title='close the Advertisment'></i>
</span>
</div>
<div class='ABT_Widget_Container'>
<div class="ABT_formWrap">
<form class="ABT_innerForm" action='http://feedburner.google.com/fb/a/mailverify?uri=YourFeedBurnerID' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=YourFeedBurnerID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<div class='ABT_input_group'>
<input class='ABT_Email' alt="Enter your email address:" placeholder="Enter your email address:" type="email" name="email" />
</div>
<input type="hidden" value="YourFeedBurnerID" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input class="button" type="submit" value="Subscribe" />
</form>
</div>
</div>
<span id='ABT_credits' style='float: right; font-size: 6px; text-shadow: 0px 0px 3px black;'><a style='text-decoration: none!important; color: #fff;' href="https://www.getallcodex.com">Getallcodex</a></span>
<div style='clear:right'></div>
</div>
<script type="text/javascript">
window.onload = function() {
var ABT_closeButton = document.getElementById('ABT_close_button');
var ABT_float_ads_main_Wrap = document.getElementById("ABT_float_ads_main_Wrap");
myVar = setTimeout(function() {
ABT_float_ads_main_Wrap.style.display = 'block'
}, 3000);
ABT_closeButton.onclick = function() {
document.getElementById("ABT_float_ads_main_Wrap").style.display = 'none';
}
}
</script>Step 3: Add your feed burner ID
Replace “YourFeedBurnerID” with your feed burner ID in the above code.
Step 4: Hit save button
Finally, click on the save button and open your blogger site. The subscribe via email widget for blogger will popup. To sum up you can customize this widget as much as you want. In short, you can change the font, text size, color, and text.
So, once you add this widget then it should work properly. If you face any issue, then please comment below.
Final Words
In conclusion, you can also take help from a freelancer. Eliza jack is a freelance web designer and blogger expert. You can discuss with her about your project requirements and customization’s. She will work for you and install the widget.
Note: If the widget does not popup then try clearing your browser cookies. Also, keep in mind that once you click on the cross button under the popup widget then it will not appear again.