- How To Add Pop Up Email Subscription Form For Blogger Using Jquery
- How To Add One Time Popup Email Subscription Widget For Blogger
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.
Also, It comes with a simple eye catching flat design. Click on the live demo link to have a look at the demo yourself ;)
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/AVvXsEhO90U_-Vyq-UxHmwiqrrLiDpz3MnlfPTNkarBvAZvVsu7mZyAQ0UdECxFeGZYXIJ4dGm2_CjWbWBf7Q3qMg-UwhwxD71FoNay56CgrpjzCcTH7XAOu0qwPIu4ApxFUdGtkbMZBn6hwiYeI/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">
<!-- 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('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><!-- .popup-form -->
</div><!-- .popup-bg -->
</div><!-- #popup-wrap --> - 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.
Tags:
how to
