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/AVvXsEiFsUosNUnipU0X5zmAL9RvFXXKgpgG3MJc_BNRHtxNyodnFNTXXjYO8z7Ph-jE35ppr3-rPm0hps8_8SM4nwQtDrFbQIBMIGL7cDK7fPqYQzkQ-uMQ3Ize0ZXyPJJhvStiLiFUrspB8W30/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
just awesome.. the fastest E-Mail subscription widget for blogger.. really a nice competitor for Wordpress.. will be using it on my personal blog.. :)
ReplyDeleteThanks Bro, Another version of this widget is coming on the way with onetime popup feature. ;)
DeleteHi ,
ReplyDeleteNice popup for blogger.A new idea came for me .When the popup opens on left side just below it giving it as "close this button" option. It will make users very easy to close if they want . Thank you.
Hi Pazhi Yarasu,
DeleteNice, But I tried to keep the widget as simple as possible since it only uses CSS3 and HTML5 to function. :)
Thanks for commenting. Much Appreciated...
Dude... How do you know I want this? :D
ReplyDeleteHi Bro, Good to see you again :D
DeleteGlad it helped... Thanks.
Another widget is coming with onetime popup feature. ;)
i used your email popup widget its so cool thanks for giving free widget to me
ReplyDeleteIt is great and i am in the search of it. At last after some customization it is working fine.
ReplyDeleteHi Chandeep,
ReplyDeletejust awesome.. popup email subscription widget you have made, thanks for sharing, I'm going to use this :)
not working fastest E-Mail subscription widget
ReplyDeleteKindly Give me your blog link so that I can check for the problem :)
DeleteHy bro plz solve my problem i am using your hola theme on my site but in theme when i check source code of my site it show me two meta description tag but in real i check my blogger html it has only one i chk it again and again also by ctrl f but i found only one plz chk my site source code of savetrick.com and solve my isssue
ReplyDeleteHi Gurwinder, can you send me your template XML file, so that I can check the prob :)
DeleteMy Email: contact [at] blogtipsntricks [dot] com
Hi gurwinder, use the below conditional meta tag. Paste the below tag just below the <head>,
Delete<!-- For blocking Multiple Appearance of meta Descriptions on a single page -->
<b:if cond='data:blog.pageType != "index"'>
<b:if cond='data:blog.pageType != "item" and data:blog.pageType != "static_page"'>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
</b:if>
</b:if>
<!-- For blocking Archives from getting indexed -->
<b:if cond='data:blog.pageType == "archive"'>
<meta content='noindex,noarchive' name='robots'/>
</b:if>
credit:- Mybloggertricks forum
Thanks Chandeep, especially for the BTNT THEME and Can you tell me which software you are using for creating blog Image poster..??
ReplyDeleteNot Working On my Blog Bro
ReplyDeleteHello. Is there a way to add a delay?
ReplyDeleteThanks
ReplyDeleteWow, this email subscription widget is nice but why does a scroll key shows up on SUBSCRIBE VIA EMAIL pop up box on my site but not yours??
ReplyDeletenice one bro!
ReplyDeleteBeautiful!!! thanks so much
ReplyDeleteHello chadeep,
ReplyDeleteI must say this was really awesome post. Before google page sight was showing jquery render error and it also reduces the load time.
But you have really upgrade it well.
But still chandeep don't you think so its not really a popup.
Ultimately user have to click on message box and then popup appears.
So, instead can you please design real popup widget using html and css means no external .js calls.
The same code but auto popup.
Hope you understood what I'm trying to say :)
Can you please design it ?
Awaiting for your reply !
Thanks,
Piyush
Awesome onclick widget.It works fast.I applied it on my blog Entry test practice and Educational topics.Thanks...
ReplyDeleteThank you so much, Chandeep! I am using it on my blog now. Can you help me to change the colour of widget Please? I want it to match with my blog's theme.
ReplyDeleteHey it won't work for me because I don't have this "]]>" in my template...
ReplyDeleteHiii....chandeep....
ReplyDeleteI m big fan of you and your website.
I placed this code in my blogger tamplate {camly} .
i do all correctly but didnt see any pop up.
Please solve this.
Im big fan of you.
ReplyDeleteHi , my name is Jonathan . I am Brazilian and I admire his work , even have used their templantes which are always great . But I liked the gadget , but could not use it , can you help me ? My current template is this: http://blog-ff.blogspot.com.br/
When I install all the code exactly as mentioned, I can not save , for contained some errors ..
I'm waiting.
Thank you very much!