Popup Email Subscription Box For Blogger - Fully Responsive and Designed

How to create an email subscription box in Blogger's blog - blogspot.com?

Popup Email Subscription Box For Blogger

Active interaction with users and delivering them relevant emails with their favorite and fascinating items and your newest updates is one of the most important steps in developing a successful blog.

But the question is - how to get the users' email id and send them the update of your blog in their inbox.

Don't worry, we've got you covered. Simply add a smart email subscription popup to your website, where visitors can input their email address and subscribe to your blog's updates and items.

However, if you use Blogger.com's free blog services, such as Blogspot, you will not receive an email subscription widget. You must update the HTML and create an email subscription shortcode or you can use a third-party paid email subscription services.

We've taken care of this for you by creating an awesome popup email subscription widget.

Why Email Subscription is essential for a blog?

Subscribers are very important for a blog or site as they are loyal followers of the blog. To get wide, this generic camera is Google Feedburner. Most of the blogger users use Feedburner because it is free and has a lot of attractive features.

FeedBurner is the best platform to gather customers on a mailing list. Since Feedburner is a product of Google, we can trust it blindly. Unlike many third-party paid email subscription services, FeedBurner has no limit on the number of subscribers allowed.

Feedburner Default Email Subscription Widget is not very decent and attractive so we have added a lot of styling to it and made it really stylish.

Key Features

On-Load Popup and Close Icon
After the blog is loaded, the widget will fire a popup subscription box. Users can hide the widget by clicking the Close button and continuing to read the blog. The email subscription widget will get the most exposure thanks to the popup function since it will display in the middle of the screen and will not dismiss unless the user hits the close icon in the top right of the widget.
Fontawesome Icons with Pulse effect
This widget has been enhanced with font-awesome icons to make it more appealing and modern. Furthermore, the heart's pulse effect will make the widget more engaging for users. To make it curved, I utilized CSS attributes like border radius.
Doesn't affect the load time of the blog
The method window.onload was used. This is an application of a JavaScript method. We've used this way to load the widget after the page has loaded, which means it won't slow down the blog. If the blog does not load entirely for whatever reason, this email subscription widget will not display.
Timeout Delay
A JavaScript technique is used to implement the timeout delay functionality. After the blog has fully loaded, we utilized this approach to postpone the appearance of the Feedburner Email Subscription Form widget for 5 seconds. Users will become angry if the site fails to load correctly and the widget loads first, therefore this minor tweak improves the user experience.

How to add the popup subscription widget in blogger?

Keeping in mind the newbies with less technical knowledge, we have made it easy to install this popup email subscribe box in your blogger blog. You just need to follow a few simple steps and you are done.

Steps involved in installing the widget.

STEP #1
Log on to your Blogger account and scroll down to the blogger dashboard and find Layout from the menu.
STEP #2
Click on the Layout option and find the Add New Widget option as shown in the figure below.
STEP #3
Click on the Add New Widget option, an option with menus with options scroll down the menu and find the option HTML/JavaScript as shown in the figure below.
STEP #4
Click on the HTML/JavaScript a window will open containing a title and a content text field. And copy the code given below and paste it into the content text field and hit save.

Source Code - Popup Email Subscription Box

<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: rgb(16,135,255); 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: 30px 20px 30px; position: absolute; top: -45px; right: -30px; z-index: 9999999; } .ABT_float_ads_close #ABT_close_button { font-size: 25px; color: #fff; display: inline-block; box-shadow: 0 0 3px rgba(0, 0, 0, 1); background: rgb(16,135,255); padding: 5px; border-radius: 5px; } #ABT_close_button { cursor: pointer; } #ABT_credits { font-size: 25px; 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: rgb(206,213,214); padding: 10px; margin: 0px; width: 100%; min-width: 350px; overflow: hidden; box-sizing: border-box; border-radius: 10px; } .ABT_Heading, .ABT_Heading2 { color: #fff; font-size: 28px; font-weight: bold; text-shadow: 0px 0px 3px black; font-family: 'oswald', sans-serif; text-align: center; display: block; padding: 5px 0px; margin: 10px 0px 0px 0px; } .ABT_Heading2 { color: #fff; font-size: 18px; margin-bottom: 20px; font-style: italic; font-weight: 400; margin-top: 5px; } .ABT_Heading2 .fa-rss { color: rgb(206,213,214); } .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, 152); 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: rgb(59, 89, 152); border: 1px solid rgb(59, 89, 152); 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, 152); } .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: rgb(59, 89, 152); 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 &quot; pulse&quot; { 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 &quot; pulse&quot; { 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> Want To Stay Tuned? </span> <span class="ABT_Heading2"><i class="fa fa-rss" aria-hidden="true"></i> Subscribe Us! Don't Miss Any Update...</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> <i class="fa fa-long-arrow-down" aria-hidden="true"></i> <div class='ABT_Widget_Container'> <div class="ABT_formWrap"> <form class="ABT_innerForm" action="https://feedburner.google.com/fb/a/mailverify" class='subscribe-form' method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <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="FEEDBURNER-ID" 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: 12px;'><a style='text-decoration: none!important;color:transparent;' href="https://www.blogearns.com">Blogearns</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>

View Demo

Download Code

NOTE: In the code you will get two times FEEDBURNER-ID, don't forget to replace them with your blog's feedburner-id.

Click here to register and get your Feedburner-id (if you don't have)

Wrap Up:

Finally, we explained all the steps required to add a popup email subscription box in Blogger. I hope this post will be useful to you, if you found this post beneficial share with you friend. If you have any query regarding this post feel free to write in the comment or you can also send us an email at karunasingh@blogearns.com

Genrerating Link.... 15 seconds.

Your Link is Ready.

Bagikan Artikel ini