Check out this OnClick Popup Email Subscription Widget for Blogger using CSS3 and HTML5

Hello Once again! This article is actually useful for my fellow bloggers using blogspot because the the widget i am about to talk about is an email aubscription widget for blogspot blogs.

DESIGNER'S COMMENT: The main reason behind designing this widget is performance. All the widget published before uses jquery to function and takes lots of loading time and page size as an result reducing performance. But the widget I'm publishing today is only based on CSS3 and HTML5. So, It loads lighting fast and won't mess with any other widgets.

Okay cool .. lets take a look at the demo here, and lest i forget.. Also, It comes with a simple eye catching flat design.

Live Demo

Add OnClick PopUp Email Subscription Form For Blogger

Adding CSS Code

On the Blogger Dashboard Go to Template > Edit HTML Button
Click inside the HTML Editor, Press CTRL+F (This will open a search form on the top right side of the HTML Editor)
Now search for ]]></b:skin>
Above that place the css code given below
Now save your template.

/***** OnClick PopUp Email Subscription Form CSS *****/
#popup-wrap .popup-button { background: #A1362A url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXPNG43xuPon_ap1QB1m0XuirLohE6EYar4GzmK9l71z2vMchBzCSlQZLG853VWVIed-FK-coYUTNYBRX1T53-uhh4I0wkCMATGGsJSip4y_56wCQKGVTGxSS82gsjgysK5T5RUP23GW5G/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); }

Adding Email Subscription form HTML Code

On the Blogger Dashboard Go to Template > Edit HTML Button
Click inside the HTML Editor, Press CTRL+F (This will open a search form on the top right side of the HTML Editor)
Now search for </body>
Above that place the following HTML code.
<div id="popup-wrap">  <label class='popup-button' for='popup-trigger'></label>  <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'>  <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('http://feedburner.google.com/fb/a/mailverify?uri=YOUR_SUBSCRIBE_ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='YOUR_SUBSCRIBE_ID'/> <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 email address is safe with us!</span> </div> </div> </div> </div>
```
 
```
In the Above HTML code, Search for YOUR_SUBSCRIBE_ID and replace it with your Feedburner username (You'll find YOUR_SUBSCRIBE_ID two times, means you've to replace it two times)

The username for your feedburner feed can be found at the end of your feed URL. For example, feedburner URL for BTNT is http://feeds.feedburner.com/chandeepsblogtips , with chandeepsblogtips as the username.
Now save your template.

All Done, Now open your blog you'll see a mail icon on the bottom left side of your blog, clicking it will open the widget.

Let me know your views about this widget on comments. your feedbacks are valuable

Widget Credits to : Chandeep J

1 comment:

Unknown23 March 2016 at 14:05

[tab]

[content title="Tab 1"] INSERT CONTENT HERE [/content]

[content title="Tab 2"] INSERT CONTENT HERE [/content]

[content title="Tab 3"] INSERT CONTENT HERE [/content]

[/tab]

I Appreciate your valuable Feedback. So, Please DO NOT SPAM - Spam comments will be deleted immediately.

Don't use brand name in name field and you're not allowed to use links in comments unless it's necessary

Such Comments will be removed immediately.

Thanks,
Kelvin

247geeky

Breaking News