Popup Email Subscription Widget for Blogger

You know that many other sites which established on blogger are using popup email subscription widget which allows a single user to input there email address to get alerts when you post something on your website, its good way to increase the subscription of your website, You can use feed burner to work for your blogger subscriber, this is the free and reliable tool to get subscribed.

With popup box you can still make a better subscribers because it’s totally attract the users to do that, they just send the email in the box and they finally receive the email from feedburner to conform the subscription. It’s mostly happen that you got more than 200 times faster subscribers. It’s easy and most important free way to increase the traffic of your website or blog.

Here I am going to show you how to install the widget

• Simple you should go to your blogger dashboard.
• Select your blogger blog and click on layout button.
• After page loads click on add a widget button.
• Now the new window will be open and you have to scroll down it until you find HTML/Javascript click on it.

Now the new window appear and you just have to paste the following code in the section.

<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/AVvXsEji1PTtM3FCd7DZEHCc3ORQy5NRUx3vI4ZUQVcIqSyuqgRCQrHh2sRHDQvBPEZgUP53Yh27vu0kUYQ1ctkpTOgmaiRF1wwQyki8fN6ypUb6tYV1LXwhPiceXdlnYnaE-C9eU84X3ajmRFYt/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; } <!--[if lt IE 7]> #btnt-container a.btntCloseImg { background:none; right:-14px; width:22px; height:26px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji1PTtM3FCd7DZEHCc3ORQy5NRUx3vI4ZUQVcIqSyuqgRCQrHh2sRHDQvBPEZgUP53Yh27vu0kUYQ1ctkpTOgmaiRF1wwQyki8fN6ypUb6tYV1LXwhPiceXdlnYnaE-C9eU84X3ajmRFYt/s1600/close.PNG',sizingMethod='scale'); } #btntfollowForm input{ padding: 10px 5px 10px 32px; width: 93%; } #btntfollowForm input[type=checkbox]{ width: 10px; padding: 0; } <![endif]--> </style> <div id="subscribe-button"> <a class="subscribe" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWFp-QOcWZPmvW3HtWuYWcY3t7rlo-zmjie8lbNN1LokGsCQ2cKoMdqhOequW83dgRnmNYnIZ8nshgkV9OzAkBMg_I4XHFK97TWywI0NcNb2Apj3l0Q4meWwDPcP4kU-o5iHIAUxmByUP1/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/AVvXsEj4tch8RiMgACqvJ3DovmjzEtRWObEKKkvWxfcRCGvRHpaSqzcf7tWDMUtVxJ8nNMTsa8Ml1ZhAZje0JP197pPUNLNu6csET8BYGMXjQUbWXhUGm9HiTMU4cklPtfAv_Xiwxrl-X-lJujMK/s1600/Subscribe+Via+Email.PNG" /> <div id='description'> <img alt="email" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijj6qo9Nzzq7FJZLWQc6d_WAl0r6fFkps28FFO1GinUz7Cm5Dkgdponj6rYGlF2e9fWWWLyel0jexWa9WLkZiX71foEH1pToJ4y4XkFHppz7GS2N9Kt-JM0JP0cwpU53nVAmd_97NNLdn9/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=mbgadget', '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="mbgadget" /><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.mbgadget.com/2015/03/popup-email-subscription-widget.html" target="_blank" rel="nofollow">popup subscribe widget</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>

          REPLACE MBGADGET WITH YOUR OWN FEEDBURNER ID

• Remember to change this
• You should replace mbgadget in the code with your own feedburner ID.
• If you want to add the title of the widget just put any name or just leave the title field empty.
• Click on save and close the box (mostly it’s closed automatically)

Subscribers are always love what you post on your blog because they already get you in touch with email due to your spicy content, if you really provide the better content then I am going to say that you won the race of traffic to your site, because all you need is traffic with email subscribers you got little but more traffic and its better point towards the site enhancement.

You can also handle the email subscription management without using feedburner. You can use another tool called Aweber which is paid tool and has many features and you can use it for multipurpose. Its prices are also normal starting from 1$ for trial and then 19$ a month for that who’s subscribers are increases from 500. It’s better to use this tool but if you are in starting position you just have to use feedburner.

Still there are many widget over the internet for bloggers but this one is easy and free to add to your website. Here is another way to add youtube popup widget to blogger it’s also the same process that I used above you just have to put the youtube code in edit html box.

If you find any type of problem while installing the widget to your website just ping me here in comments. I try to solve the problems.