Stylish Email Subscription Popup widget for Blogger

Hello and Welcome to Getwebinfo. Here on this post you can be able to get a code of Stylish Email Subscription Popup widget for your Blogger. Feedburner is the only source for most of the bloggers to gain new email subscribes. So i just came up with another stylish widget for Blogger Platform and I hop you will love this widget. This time I have designed a Feedbruner Email Subscription Popup box for Blogger and its really stylish professional in looking and neat and clean widget.

Stylish Email Subscription Popup widget for Blogger


Features of Email Subscription Popup Blogger Widget

It has got really good features and you need to know them so that you can alter anything later the way you like to without getting confused.


  1. Maximum width is 600px 
  2. The Subscription box is Fully Responsive 
  3. Cookies enabled and you can set any number of expiry days for cookies.
  4. Pops up in the center of window screen and remains in the center
  5. You do not boring at all
  6. Using Google font family "Oswald"
  7. You can set time delay so that popup box will appear on certain time after loading of your blog like as 20 seconds after loading of your blog
  8. Now it automatically fades out after someone clicks on "Add Me" button
  9. I Love this widget very much and i hope you can also love it



Demo Screen Shot of Email Subscription Popup Box 

Stylish Email Subscription Popup widget for Blogger


How to Add FeedBruner Email Subscription Popup Widget in to Blogger


Let's follow these steps as usual in my previous articles

Step 01: Log in to your blogger blog account 

Step 02: Go to Template Section and then click on Edit HTML button

Step 03: Now please first of all you can take a backup of your template code first before doing anything with your template code because it's always good to be on safe side. 

Step 04: First of all Installing Google Font Family and JavaScript Codes to your Blogger HTML

Step 05: Search for this opening tag <body> and past the Google font family link just after it.

<link href='http://fonts.googleapis.com/css?family=Oswald|Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>
Step 06: Now just find out this closing tag </head> and paste these JavaScript links given below just before this closing tag.

Note: If you have previously installed my widget, Facebook Popup, Page, Like Box for Blogger then you need not to complete this step because these codes were installed in to sidebar HTML gadget then and you will be adding them twice. This time I am installing these codes into your blogger template, not in to the sidebar so you can remove them from sidebar HTML widget. Theseare the same codes so make it sure it you part.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Step 07: And Now this Script Add before </body>


<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>

Step 08: Now Add CSS code to your Blogger Template 

Step 09: Now find out this code ]]></b:skin> and just before this code, paste the whole CSS code given below.


/*----- Email Subscription Popup Box Coded by www.getwebinfo.com -----*/
#twist-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;
}
#twist-blogger-subbox .popup-box {
  padding: 0;
  margin: 0 auto;
  max-width: 600px;
  border-radius: 1px;
  border: 2px solid #F5F500;
  background: #3A3939 url('http://3.bp.blogspot.com/-7TLWGdsIYRg/VSYZtpMVpgI/AAAAAAAAA7A/eTPibGVJ4Mg/s1600/64.png');
  background-repeat: no-repeat;
  background-position: 100% 45%;
  position:relative;
  top:25%;
  z-index:0;
}
#twist-blogger-subbox .popup-box .exit-button-subbox {
  float: right;
  cursor: pointer;
  position: absolute;
  right: 0px;
  top: 0px;
  margin-top: 2px;
  margin-right: -2px;
}
#twist-blogger-subbox .popup-box .exit-button-subbox:before {
  content: "X";
  padding: 5px 8px;
  background: #FFFFFF;
  color: #000000;
  font-weight: normal;
  font-size: 12px;
  text-shadow: 0px -1px #000;
  font-family: sans-serif;
  border: 4px solid #F5F500;
  border-radius: 50px 0px 50px 50px;
}
/*--Main Headline Style - www.getwebinfo.com--*/
#twist-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 #F5F500;
  color: #3A3939;
  text-align: center;
  background: #FFFF00;
  border-right: 7px solid #F5F500;
  border-left: 7px solid #F5F500;
  border-bottom: 15px solid #3A3939;
}
/*--Paragraph Style - www.getwebinfo.com--*/
#twist-blogger-subbox .popup-box p {
  font-family: "Oswald",sans-serif;
  font-size: 15px;
  color: #EFEFEF;
  text-shadow: 1px -1px 0px #000;
  line-height: 35px;
  padding: 10px 110px 0px 20px;
  text-align: left;
  letter-spacing: 0.5px;
  margin: 0;
}
#twist-blogger-subbox .popup-box .rssform {
  padding: 15px 20px;
  margin: 15px 0px 0px 0px;
}
/*-- Button Style - www.getwebinfo.com --*/
#twist-blogger-subbox .popup-box .rssform .button {
  cursor: pointer;
  margin: 0px 0px 0px 5px;
  border: none;
  overflow: hidden;
  width: 35%;
  height: 37px;
  background-color: #FF0;
  font-size: 14px;
  font-weight: normal;
  color: #121212;
  letter-spacing: 0.5px;
  text-transform: uppercase!important;
  font-family: "Oswald";
  float: right;
}
#twist-blogger-subbox .popup-box .rssform .button:hover {
  background: #FFE800;
  padding: 7px;
  border: 1px solid #fff;
}
#twist-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 8px !important;
  padding-left: 30px;
}
#twist-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: none;
  border-radius: 1px;
  box-sizing: border-box !important;
}

Okay so now we are don with adding CSS code and only remaining step is to add HTML part of email subscription popup box to your Blog template.

Step 10: Now add HTML Code of Subscription Popup to your Template

Step 11: Now just find out this closing </body> tag which is at the end of your template code and paste the HTML code just before this closing tag after making required changes.


<div id='twist-blogger-subbox'>
            <div class='popup-box'>
   <div class='exit-button-subbox'></div>
            <div class='tagline'>
            Wait! Leech off my best
            </div>
                 <p>Get latest Blogger Widgets, Plugins and much more straight into your INBOX for free. Just Enter your email address, Verify and join our Newsletter!</p>
            <div class='rssform'>
            <form action='http://feedburner.google.com/fb/a/mailverify' method='post' target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=GetBloggerInfo', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type='text' class='email-bg' name='email' placeholder='Enter your email address... :)' />
            <input type="hidden" value="GetBloggerInfo" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
            <input value="Add Me" class="button" type="submit" />
            </form>
            </div>
   </div>
   </div>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('feedburner_popup_box') != 'yes'){
$('#twist-blogger-subbox').delay(25000).fadeIn('medium');
$('.exit-button-subbox, .button').click(function(){
$('#twist-blogger-subbox').stop().fadeOut('medium');
});
}
$.cookie('feedburner_popup_box', 'yes', { path: '/', expires: 15 });
});
</script>

Changes Required : Now you need to make few changes to the above HTML 

  1. Change the Min Headline Text "Waite Leech of my best" to whatever you want.
  2. Change the Paragraph text to your own text and that is what where you describe why visitors should become subscribers.
  3. Change my Feedburner Address "GetWebInfo"  to your blog's address (twice)
  4. You can change Add Me button text to your own like as boring as Subscribe.
  5. Change the delay time which is 25 seconds by default (I made it default :p) to your own. To change it just modify the value of 25000 where 1000 value = 1 second.
  6. Set the expiry date for cookies which is 15 days by default. To change it just modify the value 15 to any number where 1 number =1 day. Now that is it!
Note: Now First of all Visit  your blog and be the first to see it live. It must be working fine if you did not miss any step. The process is little long but well worth the time. 

If you have any issue with this widget so please leave comment i'll give you answer as soon as possible.

Hello and Welcome to GetWebinfo.com. Here on this site you can be able to find out Latest Articles are about Blogger, SEO, AdSense, WordPress,. You can also be able to find out Latest Tips that can you really need one. You can also Download Premium themes free from this site.


1 comment:

Anonymous said...

The Article is really helpful for me i really like this website.

Post a Comment