How To Add Pop Up Email Subscription Form For Blogger

Previously I publish a post about how to add email subscription form under post body on blogger, today is another way of increasing your email subscribers. Pop up email subscription form will pop right up on the screen once someone visit your blog and it only pop up once until the person leaves your blog and come back again. It’s easy and more effective, mostly used by online malls. Here is an image of the Email Subscription Form.

Add Pop up Email Subscription Form For Blogger

This pop up widget is a jQuery plug-in which reason in you needs to have a jQuery plug-in add to your blog template.

If you haven’t added the plug-in to your blog, follow the below steps:

i.    Go to your blog dashboard.
ii.    Go to Template and Edit HTML [Back up your template first].
iii.    Search for </head> tag on your blog template.
iv.    Place the below code before [above it] the searched [</head>] tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

v.    Save your template.

How to add the Pop Email Subscription Widget to your blog

Follow the below simple steps

i.    Go to Layout >> Add A Gadget, then choose HTML/JavaScript
ii.    Paste the below code inside it.

<style type="text/css">
#subscribe-button { float: left; position: fixed; bottom: 5%; left: 0; z-index: 999; }
#subscribe-widget { display:none; }
/* Overlay */
#btnt-overlay { background-color:#000; }
/* Container */
#btnt-container { min-height:350px; min-width:500px; color:#222; background-color:#fff; border:4px solid #ddd; }
#btnt-container .btnt-data { padding:8px; }
#btnt-container a.btntCloseImg { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyfZrtXqUpuDLUO1l_ib3Ddj2rxHjGIMNVdwhy5Ke7AuBQH-gA7Ywi9V2fT2tiYnHof88Wq2ko2s76ci3KTqcZHyDGZUsI1HHB1TlCRDrrbu7J-yW-ywoN5JaCdcupIXZid4hTs7nNNdVV/s1600/close.PNG) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer; }
#description { color: #AAAAAA; font-family: times New Roman; font-size: 25px; font-style: italic; }
#description img { float: left; height: 80px; padding: 0 25px 0 10px; width: 80px; }
#btntfollowForm { padding: 15px; }
#btntfollowForm p { margin: 0 0 10px; }
#btntfollowForm input:not([type="checkbox"]){ width: 93%; margin-top: 4px; margin-bottom: 20px; padding: 10px 5px 10px 25px; border: 1px solid rgb(178, 178, 178); -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing : content-box; box-sizing : content-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; }
#btntfollowForm input:not([type="checkbox"]):active,
#btntfollowForm input:not([type="checkbox"]):focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; }
#btntfollowForm .button input{ background: none repeat scroll 0 0 #3D9DB3; border: 1px solid #1C6C7A; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2; color: #FFFFFF; cursor: pointer; font-family: 'Arial Narrow',Arial,sans-serif;   font-size: 24px; margin-bottom: 10px; padding: 8px 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); width: 30%; float: right; }
#btntfollowForm .button input:hover{ background: #4ab3c6; text-decoration: none; }
#btntfollowForm .button input:active,
#btntfollowForm .button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; }
.btntFollowFooter { text-align: center; font: 10px Tahoma, Helvetica, Arial, Sans-Serif; padding: 7px 0; margin-top: 80px; text-shadow: 0px 2px 3px #555; position: absolute; width: 500px; }
.btntFollowFooter a { color: #222; text-decoration: none; }
.btntFollowFooter a:hover { color: #fff; }

</style>
<div id="subscribe-button">
<a class="subscribe" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbKXAf6H2gQ7qlfR_IyTwsRxyaM4VShrCWlG1BSB9i6TgLlfY97vqC55D0KVH02ay4rC49i4nWrd-c_Aa-nHI8D4j0qQqY_IpeEpiks6zHHGSnreMLUXqTk8ftw5nyl0SK5kduubtXDiyY/s1600/trigger-mail-icon.png" alt="subscribe" /></a></div>
<div id="subscribe-widget">
<div id="btntfollowForm">
<img alt="Subscribe" border="0" float="center" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKReHA-aQWBU6mq1z_KA1G3FmuFB3iDahIVvOeUQlt8uR9FvV6XNTfBT4YwRHBx4O6qq9nsIiK8_iIcU4R2uqe8DJMKUiGk8ftifx1Cb6e8UmrY_v15zCFiOKuczoUa4RjO-VT97e3aWNA/s1600/Subscribe+Via+Email.PNG" />
<div id='description'>
<img alt="email" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAp9lz-OT9bMnvKJvYQvWGYbXOybtQ9jNgQhZ6Pe6nDZmWOLNURn0_0HjjFo2P5loAj-NRpId4j7Q9CCf2wCcU0HvmzptPmIseatdxMldpXjt0tBsUlNBtS7WUXD0MtCPceXeQEijB4I4Z/s1600/Mail.PNG" />Subscribe to our mailing list to get the updates to your email inbox...</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Naijtech', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="email" placeholder="Enter Your Email..." required="required" type="text" /><input name="uri" type="hidden" value="Naijtech" /><input name="loc" type="hidden" value="en_US" />
<div class="button">
<input type="submit" value="Subscribe" /></div>
</form>
</div>
<div class="btntFollowFooter">
Delivered by <a href="http://feedburner.google.com/" target="_blank">FeedBurner</a> | powered by <a href="http://www.blogtipsntricks.com/" rel="dofollow" target="_blank">blogtipsntricks</a></div>
</div>
<script src="https://blogtipsntricks.googlecode.com/files/jquery.btnt.popup.js" type="text/javascript">
</script>
<script type="text/javascript">
jQuery(function ($) {
    // Load dialog on page load
    //$('#subscribe-widget').modal();

    // Load dialog on click
    $('#subscribe-button .subscribe').click(function (e) {
        $('#subscribe-widget').modal();

        return false;
    });
});
</script>

iii.    Replace the code highlighted in Red colour above with your feed-burner username.

iv.    Save the widget and view your blog to test your widget if it’s working.

[The widget trigger icon is placed in the left side of your blog.]

Hope this helps, follow the steps completely and carefully to make it work.
I hope this helps you increase your blog reader, let me know if you have any question or having problem adding the widget to your blog.

Kindly share your opinion about the pop up email subscription form through comment below.

About Unknown

My name is Samuel, also known as Samuel Toby. I am a young blogger in Nigeria with love and passion for writing, I am also a graphic designer. I am a young Nigerian youth with love for browsing and getting latest information around the globe.