Jul 19, 2016

Stylish Popup Email Subscription Box! Add to Blogger

data:blog.title
After stylish AllInOne Admin/Author Bio Box Widget, Once again we are here with another cutest and impressive Popup Feedburner Email Subscription Box for Blogspot users. As we know Feedburner (Which is totally free.) is the only source for most of the bloggers to increase new email subscribers. So today we came up with this another stylish blogger widget and we hope all my readers will love it cause this is too stylish, impressive, neat & clean.


Popup Subscription Box, Blogger Responsive Popup Subscribe BoxPopup email subscription plugin is the best source to gain the new email subscribers. You might have seen popup subscribe box widget on your favorite blogs on the internet. They use it because by this they can increase their email subscribers. If you are not using this widget then you are missing the best source of gaining the email subscribers. So you must use it if you already don't. :)

Qualities & Features of Blogger Popup Subscribe Box

Believe me, We're not going to preach about it and bore you. :)
This widget has got really nice features, which you need to know and without any confusion you should use it without any later.


  1. Fully Responsive. ( Which max width goes upto 600px, it reduce its size according to the screen sizes.) 
  2. Pops up in the center of window screen.
  3. Using Google Font Family-"Oswald".
  4. Cookies Enabled. By which you can setup any numbers of expiry days for cookies.
  5. Time Delay Function is also available. Like as if you want to pops up show after 10 seconds of blog loading.
  6. Automatically Fades out if anyone click on Sign Up Button.
  7. No need to say, It is also Cute, Impressive and Stylish. :)
Now you are thinking where is the demo of this widget, Right? Guys, we never forget that everybody wants demo before using any widget so we always include demo of all widgets. Wait, there it is.


Stylish and Cute Cool looking popup email subscription box for blogger


So did it impress you. Wanna use it?

How To Add Popup Email Subscription Plugin to Blogger?

Note : Before doing any customization in your blogger template download a backup copy of your template. Because, it is a good habit of blogger users.
  • Blogger >> Template  >> Edit HTML.
  • Now click inside coding area and search for <head> tag by pressing CTRL+F and paste below coding lines just after of <head> tag.
<link href='http://fonts.googleapis.com/css?family=Oswald|Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>
  • Now search </head> tag and paste below lines just above of </head> tag.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>

Adding the CSS Part


  • Now Add CSS Code your template. Search for ]]</b:skin> tag and paste below code just above of ]]</b:skin> tag.
 /***************************************************************
Email Subscription Popup Box Coded by www.mybloggerguides.com
***************************************************************/
#mbg-blogger-subbox {
  display: none;
  background: rgba(0,0,0,0.5);
  width: 100%;
  height:100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index:99999999;
}
#mbg-blogger-subbox .popup-box {
  padding: 0;
  margin: 0 auto;
  max-width: 600px;
  border-radius: 37px;
  border: 2px solid #111;
  background: #ec407a url('https://3.bp.blogspot.com/-TFr_uGBiVZc/V43QSXOFmqI/AAAAAAAAErY/UqrIACbS2_o7vxaJqjeuSWaXBrY6fZzxgCLcB/s1600/transparent-background-bird-email.png');
  background-repeat: no-repeat;
  background-position: 100% 45%;
  position:relative;
  top:25%;
  z-index:0;
}
#mbg-blogger-subbox .popup-box .exit-button-subbox {
  float: right;
  cursor: pointer;
  position: absolute;
  right: 0px;
  top: 0px;
  margin-top: 2px;
  margin-right: -2px;
}
#mbg-blogger-subbox .popup-box .exit-button-subbox:before {
  content: "X";
  padding: 5px 8px;
  background: #0d47a1;
  color: #fff;
  font-weight: normal;
  font-size: 12px;
  text-shadow: 0px -1px #fff;
  font-family: sans-serif;
  border: 4px solid #fff;
  border-radius: 50px 0px 50px 50px;
}
/*--Main Headline Style - www.mybloggerguides.com--*/
#mbg-blogger-subbox .popup-box .tagline {
  padding: 0;
  line-height: 2em;
  font-size: 26px;
  height: 50px;
  font-weight: normal;
  font-family: "Oswald",sans-serif;
  text-shadow: 0px -1px 0px #ec407a;
  color: #ec407a;
  text-align: center;
  background: #111;
  border-radius:30px;
  border-right: 7px solid #111;
  border-left: 7px solid #111;
  border-bottom: 15px solid #111;
}
/*--Paragraph Style - www.mybloggerguides.com--*/
#mbg-blogger-subbox .popup-box p {
  font-family: "Oswald",sans-serif;
  font-size: 15px;
  color: #fff;
  text-shadow: 1px -1px 0px 111;
  line-height: 35px;
  padding: 10px 110px 0px 20px;
  text-align: left;
  letter-spacing: 0.5px;
  margin: 0;
}
#mbg-blogger-subbox .popup-box .rssform {
  padding: 15px 20px;
  margin: 15px 0px 0px 0px;
}
/*-- Button Style - www.mybloggerguides.com --*/
#mbg-blogger-subbox .popup-box .rssform .button {
  cursor: pointer;
  margin: 0px 0px 0px 5px;
  border: 2px solid #fff;
  overflow: hidden;
  width: 35%;
  height: 37px;
  background-color: #0d47a1;
  font-size: 14px;
  font-weight: normal;
  color: #fff;
  letter-spacing: 0.5px;
  text-transform: uppercase!important;
  font-family: "Oswald";
  float: right;
  border-radius: 40px;
}
#mbg-blogger-subbox .popup-box .rssform .button:hover {
  background: #00e676;
  padding: 7px;
  border: 2px solid #111;
}
#mbg-blogger-subbox .popup-box .rssform .email-bg {
  background: #FFE url('http://1.bp.blogspot.com/-h7L136qj408/VSYZtr7vDNI/AAAAAAAAA7E/F3W4M51n1mk/s1600/1envelope.png') no-repeat 5px 5px !important;
  padding-left: 30px;
}
#mbg-blogger-subbox .popup-box .rssform input {
  padding: 8px;
  font-size: 13px;
  font-family: Oswald;
  font-weight: normal;
  display: inline-block;
  width: 60%;
  height: 37px;
  text-transform: uppercase;
  outline: none !important;
  border: 2px solid #111;
  border-radius: 10px;
  box-sizing: border-box !important;
}
#mbg-blogger-subbox .popup-box .rssform input:hover{
  border: 2px solid #0d47a1;
  border-radius:20px;
  color: #ff0000;
}
#mbg-blogger-subbox .popup-box .rssform input:active{
  border: 2px solid #00e676;
}
Okay, So now we are done the adding CSS code and now we have to add HTML Part of email subscription box.

Adding the HTML Part

<div id='mbg-blogger-subbox'>
            <div class='popup-box'>
   <div class='exit-button-subbox'/>
            <div class='tagline'>
            Don't Forget! Subscribe Us
            </div>
                 <p>Get our latest Blogger Tricks, Guides, Widgets/Plugins and much more things direct into your MAILBOX for free. Just Enter your Good Name, email address, Verify and join our Newsletter! :)</p>
            <div class='rssform'>
            <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=MyBloggerGuides&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
            <input class='email-bg' name='email' placeholder='Enter your email address... :)' type='text'/>
            <input name='uri' type='hidden' value='MyBloggerGuides'/>
            <input name='loc' type='hidden' value='en_US'/>
            <input class='button' type='submit' value='Sign Up'/>
            </form>
            </div>
   </div>
   </div>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie(&#39;feedburner_popup_box&#39;) != &#39;yes&#39;){
$(&#39;#mbg-blogger-subbox&#39;).delay(15000).fadeIn(&#39;medium&#39;);
$(&#39;.exit-button-subbox, .button&#39;).click(function(){
$(&#39;#mbg-blogger-subbox&#39;).stop().fadeOut(&#39;medium&#39;);
});
}
$.cookie(&#39;feedburner_popup_box&#39;, &#39;yes&#39;, { path: &#39;/&#39;, expires: 10 });
});
</script>

Required Changes Before Saving:

  1. You can change Main Heading Line Don't Forget! Subscribe Us.
  2. Change Paragraph text to into your for describing why anyone subscribe you.
  3. Change Feedburner Address MyBloggerGuides into yours.
  4. You can change Sign Up button text to subscribe or in which you want if you bored up.
  5. Change the delay time which is 15 seconds by default to your own. To change it just change the value of 15000 where 1000 Value = 1 second.
  6. Setup the expiry date for Cookies which is 10 days by default. To change it just change the value 10 to any number. 1 number = 1 day.
  • Now save your template. That's it.
  • Now open your blog and be the first to see it live. :)
 

Our Recommended Blogger Widgets

  1. WordPress Like Floating Social Sharing Widget for Blogger with Counter.
  2. AllInOne Admin Box Widget with Social buttons and Subscription Box.
  3. Add Sticky Notification Bar To Blogger with Show/Hide Button.
  4. Stylish Contact Form For Blogger! Add to Static Page, Responsive & Pro Version.
  5. Cute & Stylish Email Popup Subscription Widget.

Conclusion: 

So above guide is about How To Add Email Popup Subscription Box to the Blogger? We hope it must be working fine if you did not miss any step of above whole guide. The process is little long but guys its not worth the time. If you are facing problem after following all steps you can drop a comment below with your Blog's URL and we'll surely check it.
The little cost of this widget is do share it on social sites if you really like it. Thank you. Stay Blessed!

2 comments:

  1. I must comment...best blog design so far

    ReplyDelete
    Replies
    1. Hey,
      @Precious Anya
      Thank you so much for your kind words.

      Delete

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.