Feedburner Email Subscription Popup Blogger Plugin

email subscription popup blogger

Feedburner is the solely origin for most of the bloggers to gain novel e-mail subscribers (which is free) hence I simply came upward alongside to a greater extent than or less other fashionable widget for blogger platform in addition to I promise y’all guys volition dear it.
This fourth dimension I direct keep designed a Feedburner e-mail subscription popup box for blogger in addition to its actually stylish, professional person looking in addition to cracking in addition to construct clean widget.

You powerfulness direct keep seen this popup subscription box appearing inward your favorite blogs many times. They usage it because it tends to convert good in addition to increases the conversion charge per unit of measurement on whatever page of your blog.
It’s Nothing similar anything in addition to y’all must usage it if y’all already don’t. 🙂

Features of Email Subscription Popup Blogger Plugin

Believe me, I don’t desire to preach nearly it in addition to bore the hell out of you. 🙂
It has got actually skilful features in addition to y’all demand to know them hence that y’all tin displace alter anything after the means y’all similar to without getting confused.

1) Maximum Width is 600px (when viewed on desktop or laptop display)

2) The subscription box is fully Responsive (when concealment width goes downwards below the 600 pixels, it reduces its size according to the maximum width of the screen).

3) Cookies enabled in addition to y’all tin displace laid whatever publish of move yesteryear days for cookies.

4) Pops upward inward the centre of window concealment in addition to remains inward the center.

5) Isn’t wearisome at all. 🙂

6) Using Google font family “Oswald”

7) You tin displace laid time delay hence that popup box volition appear on sure fourth dimension after loading of your spider web log similar equally xx seconds after loading of your blog.

8) Now it Automatically fades out after soul clicks on “Add Me” button. (Feature added after soul asked inward comments). 🙂

(Note: You don’t direct keep permission to re-create in addition to part my code on your blog.)

Where is the DEMO Screenshot of Email Subscription Popup Box?

Wait!
There it is.

feedburner e-mail subscription popup blogger plugin screenshot
So did it print you? Do y’all desire to usage it?

Adding Feedburner Email Subscription Popup to Blogger

Let’s follow to a greater extent than or less wearisome steps equally usual:
1) Login to your blogger account.
2) Got to Template department – hence click on Edit HTML button.
3) Now delight take a backup of your template code foremost earlier doing anything alongside your template code because it’s ever skilful to survive on rubber side. It’s a skilful habit for blogger users in addition to y’all must educate it.

Installing Google Font Family in addition to JavaScript Codes

4) Look, at nowadays nosotros demand to install Google font household unit of measurement “Oswald” to your template but inward illustration your spider web log is already using it, hence simply skip this step. Don’t add together same fonts multiple times equally they volition piece of cake downwards the page charge time.
Search for this opening tag <head> (found at the starting fourth dimension of the template code)  and glue the Google font household unit of measurement link simply 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’/>

5) Now simply discovery out this closing tag </head> in addition to glue these JavaScript links given below simply before this closing tag.
(Note: If y’all direct keep previously installed my widget, “Facebook Popup Page Like Box for Blogger” hence y’all demand non to consummate this measuring because these codes were installed into sidebar HTML gadget hence in addition to y’all volition survive adding them twice. This fourth dimension I am installing these codes into your blogger template, non into the sidebar hence y’all tin displace take them from sidebar HTML widget. These are the same codes hence teach inward sure, its your component subdivision 🙂

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js’ type=’text/javascript’></script>
<script src=’https://googledrive.com/host/0B_PLgWpOK_wTazh0MndTeWs3c28′ type=’text/javascript’></script>

Add CSS Code to Your Template

6) Now y’all demand to add together the CSS code to your template.
Find out this code ]]></b:skin>and simply before this code, glue the whole CSS code given below.

/*—– Email Subscription Popup Box Coded yesteryear www.TwistBlogger.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 company #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 company #F5F500;
  border-radius: 50px 0px 50px 50px;
}
/*–Main Headline Style – www.twistblogger.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 company #F5F500;
  border-left: 7px company #F5F500;
  border-bottom: 15px company #3A3939;
}
/*–Paragraph Style – www.twistblogger.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.twistblogger.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 company #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;
}

Ok hence at nowadays we’re done alongside adding CSS code in addition to solely remaining measuring is to add together HTML component subdivision of e-mail subscription popup box to your spider web log template.

Baca Juga:  Top ten Things To Know Before You Buy H5N1 Domain Name

Add HTML Code of Subscription Popup to Your Template

7) Now simply discovery out this closing </body> tag which is at the halt of your template code in addition to glue the HTML code simply earlier 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 in addition to much to a greater extent than at nowadays into your INBOX for free. Just Enter your e-mail address, Verify in addition to bring together 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=TwistBlogger‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true”>
            <input type=’text’ class=’email-bg’ name=’email’ placeholder=’Enter your e-mail address… :)’ />
            <input type=”hidden” value=”TwistBlogger” 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>

*Required Changes: Now y’all demand to brand few changes to the higher upward HTML (you don’t direct keep to code anything).

Baca Juga:  Mantap !! Blogger Nambah Template Bawaannya

1. Change the Main Headline text “Wait! Leech of my best” to whatever y’all want.

2. Change the Paragraph text to your ain text in addition to that is what where y’all push clitoris why visitors should move subscribers.

3. Change my Feedburner address TwistBlogger to your blog’s address (twice).

4. You tin displace modify Add Me button text to your ain similar equally wearisome equally Subscribe.

5. Change the delay fourth dimension which is 25 seconds yesteryear default (I made it default :p) to your own. To modify it, simply modify the value of 25000 where G value = 1 second.

6. Set the move yesteryear appointment for cookies which is fifteen days yesteryear default. To modify it, simply modify the value 15 to whatever publish where 1 publish = 1 day.

That is it!

Visit your spider web log at nowadays in addition to survive the foremost to run into it live. 🙂
It must survive working fine if y’all did non fille whatever step. The procedure is fiddling long but good worth the time.

If you’re unable to teach it working hence y’all tin displace leave of absence a comment alongside your spider web log URL in addition to I’ll sure enough cheque it.

Give me a favor, produce part if it actually helped y’all in addition to y’all liked my Feedburner e-mail subscription popup blogger widget. Stay blessed!