There are many Popup email subscription widgets for blogger out there published by many blogs including BTNT, You can check the previously published Popup subscription widget on BTNT below.
- How To Add Pop Up Email Subscription Form For Blogger Using Jquery
- How To Add One Time Popup Email Subscription Widget For Blogger
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/AVvXsEipr1KM48PacMh8mKk6rvHTUwn7hWYvW2mxQTMYXWGx7OxBokbOrH8JyhDdGoBHTn1GslnY5_Ck37-fjgwTkSXNxsBD-QFKwy-kf-a2MBGFAkK-gahZpsmjzWYRzUDPpczp91ElainADAmL/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.
Let me know your views about this widget on comments. your feedbacks are valuable. ;)
P.S. Like I did with my previous popup widgets I didn't added any disclaimer link with this widget.
So, if you like it consider sharing this widget with your friends and help me spread the word, so that everyone can know about this widget. Thanks :D
0 comments :
Post a Comment