Smart Popup Email Subscription Gadget For Blogger/Blogspot Blog

Recently i have shared a article  Email Newsletter  Widget with social profile icons for Blogger Which is one of the great widget you can use to drive more subscribers to your mailing list.

Today too i’m going to share a such widget but it is popup widget, The best part is that it will will not visible until the user click on the mailbox image on left bottom the screen.

This widget is created by using a combination of CSS and HTML5 which means that it won’t affect your blog loading time.

We are using  Blogger’s default feedburner so if you don’t have configure it here

Preview :

Add CSS Code To Your Blog :

1. Go to Blogger Dashboard > Template > HTML

2. Now press CTRL + F and you will get a search bar

3.In the search bar type the below given tag

]]></b:skin>

4. Now press enter

Just above this code paste the below given CSS Code

/***** Smart PopUp Email Subscription Form CSS IPEE World *****/
#popup-wrap .popup-button { background: #A1362A url("http://2.bp.blogspot.com/-5BeaRyWo6FQ/Vc9zn8NV2oI/AAAAAAAADU0/tGTO9XGumUs/s1600/envelop.png") no-repeat scroll center center; border-radius: 50%; bottom: 25px; cursor: pointer; height: 80px; left: 25px; position: fixed; width: 80px; z-index: 99999; }
#popup-wrap .popup-button:hover { background-color: #70261D; }

#popup-wrap .popup-bg { opacity: 0; visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0, .8); transition: opacity .25s ease; z-index: 999999; }
#popup-wrap .popup-bg-close { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; }
#popup-wrap .popup-trigger { display: none; }
#popup-wrap .popup-trigger:checked + .popup-bg { opacity: 1; visibility: visible; }
#popup-wrap .popup-trigger:checked + .popup-bg .popup-form { top: 0; }

#popup-wrap .popup-form { transition: top .25s ease; position: absolute; top: -20%; right: 0; bottom: 0; left: 0; max-width: 400px; margin: auto; overflow: auto; padding: 2.5em; max-height: 280px; background: #cc6055; text-align: center; }
#popup-wrap .popup-inner { color: #fff; font-size: 15px; font-family: "Century Gothic", sans-serif; font-weight: bold; line-height: normal; }
#popup-wrap .popup-title { display: block; font-size: 2em; font-weight: normal; margin-bottom: 20px; }
#popup-wrap .popup-content { font-size: 16px; line-height: 26px; }
#popup-wrap .popup-footer { font-size: 75%; font-style: italic; }
#popup-wrap #mailbox,
#popup-wrap #subbutton { background: #A1362A; border: none; border-radius: 3px; box-sizing: border-box; color: #fff; font-family: "Century Gothic",sans-serif; font-size: 12px; font-weight: bold; line-height: 30px; padding: 10px 20px; width: 100%; }
#popup-wrap #mailbox { margin: 0 0 10px; text-transform: lowercase; }
#popup-wrap #subbutton { cursor: pointer; margin: 0; text-transform: uppercase; }
#popup-wrap #subbutton:hover { background: #70261D; }

#popup-wrap .popup-form-close { position: absolute; right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer; }
#popup-wrap .popup-form-close:after,
#popup-wrap .popup-form-close:before { content: ''; position: absolute; width: 5px; height: 1.5em; background: #A1362A; display: block; transform: rotate(45deg); left: 50%; margin: -3px 0 0 -1px; top: 0; }
#popup-wrap .popup-form-close:hover:after,
#popup-wrap .popup-form-close:hover:before { background: #70261D; }
#popup-wrap .popup-form-close:before { transform: rotate(-45deg); }

Now we have added CSS code and our next step is to add Subscription Box

Also Check  How To Set Up Feedburner For Your Blog

Add Subscription Box To Your Blog :

1.Go to Blogger Dashboard > Template > HTML

2.Click CTRL + F and in the search bar type </body> and hit enter

3.Just above the code paste the below given code

 <div id="popup-wrap">
<!-- Subscribe Trigger -->
<label class='popup-button' for='popup-trigger'></label>

<!-- Subscribe Content -->
<input class='popup-trigger' id='popup-trigger' type='checkbox'/>
<div class='popup-bg'>
<label class='popup-bg-close' for='popup-trigger' id='popup-close'></label>
<div class='popup-form'>
<label class='popup-form-close' for='popup-trigger' id='popup-close'></label>
<div class='popup-inner'>
<!-- Opt-In Subscribe -->
<span class="popup-title">Subscribe Via Email</span>
<span class="popup-content">Subscribe to our newsletter to get the latest updates to your inbox. ;-)</span>
<br/><br/>
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-FEEDBURNER-ID&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-FEEDBURNER-ID'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='mailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' required='' type='text' value='Enter your email...'/>
<input id='subbutton' title='' type='submit' value='Sign up'/>
</form>
<br />
<span class="popup-footer">Your email address is safe with us!</span>
</div>
</div><!-- .popup-form -->
</div><!-- .popup-bg -->
</div><!-- #popup-wrap -->

Changes To Make

Replace YOUR-FEEDBURNER-ID with your particular Feedburner ID
Totally two time you should replace the code

Then simply save the Template

Now you are ready we have added the Smart Popup Email Subscription Box to our blogger blog

About the author

Astro Joseph

Hey Guys, I'm Astro K Joseph, Founder and CEO of IPEE World from Kerala, India. I started this blog as a passion and it now empowering thousands of readers around the globe.Here I usually share stuff related to How To, Android, Windows, Facebook, WhatsApp, Blogging, etc.

Leave a Comment

4 Comments