How To Add Popup "Feedburner Email Subscription Form" to Blogger?

Live Demo

Subscribers are very important for the blog or site as they are the loyal followers of blogs. In order to get subscribers we need a medium the most popular medium is Google Feedburner. Most blogger users used Feedburner as this is free and has lot of eye catching features. 

Feedburner is the best platform for collecting subscribers in mailing list. As Feedburner is a product of Google we can trust it blindly. Unlike any third party paid email subscription service Feedburner does not have any limitations in number of subscribers allowed.

Feedburner Default Email Subscription widget is very simple and not attractive so we have added lot of styling to it and make it look really cool.

Features of Recommended Post For You Widget:

Pop Up Feature And Close Button:

We Made this widget to popup after the blog loads. User can click on close button to hide the widget and continue reading the blog. Popup Feature will give maximum exposure to the Email Subscription widget as this will appear on the center of the screen and it will not close till the users click on the close button present at the top right part of the widget.

Added Pulse Effect and FontAwesome Icons:

We have Added Font-awesome icons in this widget so that it should look attractive and modern. And Pulse Effect to the heart will make the widget lot more interactive for the users. And Used CSS Properties like border-radius to make it curved. See The GIF Image Demo below we apologize for the quality of the image.

Does Not Affect on Blog Loading Speed:

We Have Used window.onload Method. This is a JavaScript Method. We have used this method to load the widget after the page loads so this widget will not affect on blog loading speed. If for any reason the blog does not load completely then this Email Subscription widget will not appear.

Timeout Delay Feature: 

Timeout Delay Feature is a JavaScript method. Here we have used this method to delay the displaying of the Feedburner Email Subscription Form Widget for 3 seconds after the blog has fully loaded. if site does not load properly and the widget loads first the Users will get irritated so this small tweak helps in improving user experience.

1. Popup Email Subscription Widget With Close Button
2. It will Appear at the center of the screen for maximum exposure.
3. It is attractive and make your site or blog more professional.
4. This Widget will not effect on loading time of your blog..

ChangeLog for Recommended Post For You Widget:

1. Added Close Button So That User Can Close The Widget.
2. Added Pulse Effect to the heart icon.

We Have Styled This Widget in Such a Way That It Looks More Official and Beautiful. We Checked in Many Templates This Widget Works Very Smoothly. 

After A Lot of Hard Work and Tweaking Few Things We have Created this Widget For our Users So that They Can Add It and Increase Subscribers Count. 

Adding This Widget is very easy in less than one minute you can add this widget in your blog.

Adding The Widget in the Blog:

STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard

STEP 2: In The Left Side Bar You will find Layout Section as highlighted in the image above Click on Layout.

STEP 3: Click On "Add a Gadget" As highlighted in the image above.

STEP 4: After Clicking on "Add a Gadget" Choose "HTML/JavaScript" from the list & as highlighted in the image above.

STEP 5:  Now Copy This Below Code And Paste it in The Empty Box of the "HTML/JavaScript" Section.

<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(59, 89, 152); 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(59, 89, 152); 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(250, 155, 57); 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(250, 155, 57); } .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> Loved Our Blog Posts? </span>
        <span class="ABT_Heading2"><i class="fa fa-rss" aria-hidden="true"></i>
 Subscribe To Get Updates Directly To 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>

        <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='http://feedburner.google.com/fb/a/mailverify?uri=AllBloggerTricks' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=AllBloggerTricks&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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="AllBloggerTricks" 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;  text-shadow: 0px 0px 3px black;'><a style='text-decoration: none!important; color: #fff;' href="http://www.allbloggertricks.com/2017/09/how-to-add-popup-email-subscription-form.html">Get This Widget</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>

That's it Thanks For Following The Tutorial Now Its time For Customization to make it as it made for your site.

Customization:

• The Orange Highlighted Text is responsible for Font-awesome Style-sheet if you already included this style-sheet in your blog template then please don't add this Script in your blog .

• The Light-Blue Highlighted Text is Responsible For Your Feedburner Address Just change the every instance of Yellow Highlight text and replace with your Feedburner Address.

STEP 6:  All Done Save the Gadget and Check it in your site.

Conclusion:

Finally We have Added the widget. Email Marketing is very powerful because here you know who your follower is and you can create a list of emails and send your blog updates directly to them. Feedburner will help you in sending the latest updates to your subscribers you can set your prefer time when to send the email to your subscribers containing your latest blog posts.

And those who have added this widget successfully without any hurdles congrats to them. and if you want any styling or improvement to this recommended widget notify us we will try to add it for you.

That's It Thanks For Following our Tutorial '' How To Add Popup "Feedburner Email Subscription Form" to Blogger ? '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.

Incoming Search Terms:

How To Add Popup "Feedburner Email Subscription Form" to Blogger?

Feedburner Opt-in Widget For Blogger

Stylish Popup Subscription widget with close button