CSS3 OnClick Email Subscription Widget for Blogger

Email subscription widget is the ultimate source to send your latest updates to those readers who have subscribed to your Blogger blogs via email subscription form. Undoubtedly, there are many subscription widgets available for Blogger users but they occupy a large space on our blogs. Today, I will share a beautiful yet a light onclick popup email subscription widget which is free of JavaScript. This widget has been created with CSS3 and the best thing about this widget is; it is well documented that works smartly in every custom template. When a user clicks on the subscription icon, an email subscription form appears with beautiful design and social icons that why it's called the onclick widget.

Check out: How to Add Css3 Social Media Widget to Blogger Sidebar

This widget it created by blogtipsntricks.com but I have made few changes in it to make this widget more attractive. You can visit the original post from the above-mentioned blog. After installing the widget refresh your blog & you will see an email subscription icon left side corner on your blog footer. Just click the icon and see the magic.

Pay Attention: How to Add Author Bio Box In Any Blogger Template

Adding OnClick Popup Email Subscription Widget to Blogger

Choose your favorite style
Go to your Blogger Dashboard > Template > Edit HTML
Click inside the template editor and press Ctrl + F in order to open the search box
Type ]]></b:skin> in the search box and press the Enter key to locate the ]]></b:skin>
Paste the CSS code before/above the ]]></b:skin>
Finally, find the </body> and paste the Markup (HTML) code above the it

Important: In style No. 2, we have provided the CSS from GitHub. So, if you are going to install the style No. 2, paste the Github CSS just below the <head> section.

Style No. 1 With Colored Background

CSS:

/*============ OnClick Email Subscription Widget CSS Starts ============*/
#popup-wrap .popup-button { background: #996600 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: 60px; left: 25px; position: fixed; width: 60px; 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: #996600; text-align: center; overflow: hidden!important; border-style:solid; border-color:#fff; border-width:2px;}
#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: none; text-align:center;}
#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); }
/*============ OnClick Social Profile Icon Widget ============*/
.social-profile-icons { margin: 20px 0; overflow: hidden; text-align: center; }
.social-profile-icons ul { display: inline-block; margin: 0 auto !important; }
.social-profile-icons ul li { background: transparent !important; border: none !important; float: left; list-style-type: none !important; margin: 0 4px 10px !important; padding: 0 !important; }
.social-profile-icons ul li a, .social-profile-icons ul li a:hover { background: url("http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png") no-repeat scroll 0 0 #222; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; display: block; height: 38px; overflow: hidden; text-indent: -999px; transition: all 0.25s linear 0s; width: 38px; border: 1px solid rgba(0, 0, 0, 0.5); }
.social-profile-icons ul li.social-facebook a { background-position: -60px 3px; }
.social-profile-icons ul li.social-twitter a { background-position: -253px 3px; }
.social-profile-icons ul li.social-gplus a { background-position: -93px 3px; }
.social-profile-icons ul li.social-pinterest a { background-position: -157px 3px; }
.social-profile-icons ul li.social-rss a { background-position: -189px 3px; }
.social-profile-icons ul li.social-facebook a:hover { background-color: #3b5998; }
.social-profile-icons ul li.social-twitter a:hover { background-color: #00aced; }
.social-profile-icons ul li.social-gplus a:hover { background-color: #dd4b39; }
.social-profile-icons ul li.social-pinterest a:hover { background-color: #cb2027; }
.social-profile-icons ul li.social-rss a:hover { background-color: #F87E12; }
/*============ OnClick Email Subscription Widget CSS End ============*/

Markup/HTML:

<div id='popup-wrap'>

<label class='popup-button' for='popup-trigger'/>

<input class='popup-trigger' id='popup-trigger' type='checkbox'/>
<div class='popup-bg'>
<label class='popup-bg-close' for='popup-trigger' id='popup-close'/>
<div class='popup-form'>
<label class='popup-form-close' for='popup-trigger' id='popup-close'/>
<div class='popup-inner'>

<span class='popup-title'>Subscribe Via Email</span>
<span class='popup-content'>Get Our latest Updates to Your Inbox For Free</span>
<br/><br/>
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=Knigulper', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='Knigulper'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='mailbox' name='email' onblur='if (this.value == "") {this.value = "Enter Your Email...";}' onfocus='if (this.value == "Enter Your Email...") {this.value = ""}' required='' type='text' value='Enter Your Email...'/>
<input id='subbutton' title='' type='submit' value='Sign up'/>
</form>
<br/>
<span class='popup-footer'>Your Privacy is Important to Us</span>


<div class='social-profile-icons'>
<ul>
<li class='social-facebook'><a href='https://www.facebook.com/knigulper' title='Facebook'>Facebook</a></li>
<li class='social-twitter'><a href='https://twitter.com/knigulper' title='Twitter'>Twitter</a></li>
<li class='social-gplus'><a href='https://plus.google.com/b/110147552717093083415/+KnigulperBlogspot' title='Google+'>Google+</a></li>
<li class='social-pinterest'><a href='https://in.pinterest.com/kingulper' title='Pinterest'>Pinterest</a></li>
<li class='social-rss'><a href='http://feeds.feedburner.com/Knigulper' title='RSS'>RSS</a></li>
</ul>
</div> </div>
</div>
</div>
</div>

Style No. 2 With Transparent Background

CSS from GitHub:

<link href='//cdn.rawgit.com/knigulper/Web-Development/master/www.knigulper.com/popup-subscription-form.css' rel='stylesheet' type='text/css'/>

Markup/HTML:

<div id='popup-wrap'>

<label class='popup-button' for='popup-trigger'/>

<input class='popup-trigger' id='popup-trigger' type='checkbox'/>
<div class='popup-bg'>
<label class='popup-bg-close' for='popup-trigger' id='popup-close'/>
<div class='popup-form'>
<label class='popup-form-close' for='popup-trigger' id='popup-close'/>
<div class='popup-inner'>

<span class='popup-title'>Subscribe Via Email</span>
<span class='popup-content'>Get Our latest Updates to Your Inbox For Free</span>
<br/><br/>
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=Knigulper', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='Knigulper'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='mailbox' name='email' onblur='if (this.value == "") {this.value = "Enter Your Email...";}' onfocus='if (this.value == "Enter Your Email...") {this.value = ""}' required='' type='text' value='Enter Your Email...'/>
<input id='subbutton' title='' type='submit' value='Sign up'/>
</form>
<br/>
<span class='popup-footer'>Your Privacy Is Important To Us ==Unsubscribe at any time==</span>


<div class='social-profile-icons'>
<ul>
<li class='social-facebook'><a href='https://www.facebook.com/knigulper' title='Facebook'>Facebook</a></li>
<li class='social-twitter'><a href='https://twitter.com/knigulper' title='Twitter'>Twitter</a></li>
<li class='social-gplus'><a href='https://plus.google.com/u/0/b/107705481216986870331/+KnigulperGplus' title='Google+'>Google+</a></li>
<li class='social-pinterest'><a href='https://in.pinterest.com/kingulper' title='Pinterest'>Pinterest</a></li>
<li class='social-rss'><a href='http://feeds.feedburner.com/Knigulper' title='RSS'>RSS</a></li>
</ul>
</div> </div>
</div>
</div>
</div>

Customization

Replace all the blue colored text with your own username/URL. If you have any question, suggestion, feedback or having trouble installing this widget, feel free to post your valuable comments.

Conclusion

Email subscription widget plays the important role to generate the traffic for blogs and websites as it sends your latest contents to your subscribed users electronically. If you are still not using this widget, I think it's time to change your mind and let your blog flood with subscribers.