Spice Up Your Blogger Blog with Custom Designed Templates - BTNT Services!

OnClick Popup Email Subscription Widget for Blogger using CSS3 and HTML5

On By // 27 comments
Advertisement
OnClick Popup Email Subscription Widget for Blogger using CSS3 and HTML5

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. 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 ;)

Live Demo
See the left side bottom of the page screen for live demo ;)

Add OnClick PopUp Email Subscription Form For Blogger

Adding CSS Code

  1. On the Blogger Dashboard Go to Template > Edit HTML Button
  2. Click inside the HTML Editor, Press CTRL+F (This will open a search form on the top right side of the HTML Editor)
  3. Now search for ]]></b:skin>
  4. Above that place the css code given below
  5. 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

  1. On the Blogger Dashboard Go to Template > Edit HTML Button
  2. Click inside the HTML Editor, Press CTRL+F (This will open a search form on the top right side of the HTML Editor)
  3. Now search for </body>
  4. 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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR_SUBSCRIBE_ID&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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 == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' 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 -->
    
  5. 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.
  6. 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. ;)

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

27 comments:

  1. just awesome.. the fastest E-Mail subscription widget for blogger.. really a nice competitor for Wordpress.. will be using it on my personal blog.. :)

    ReplyDelete
    Replies
    1. Thanks Bro, Another version of this widget is coming on the way with onetime popup feature. ;)

      Delete
  2. Hi ,
    Nice 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.

    ReplyDelete
    Replies
    1. Hi Pazhi Yarasu,

      Nice, 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...

      Delete
  3. Dude... How do you know I want this? :D

    ReplyDelete
    Replies
    1. Hi Bro, Good to see you again :D

      Glad it helped... Thanks.

      Another widget is coming with onetime popup feature. ;)

      Delete
  4. i used your email popup widget its so cool thanks for giving free widget to me

    ReplyDelete
  5. It is great and i am in the search of it. At last after some customization it is working fine.

    ReplyDelete
  6. Hi Chandeep,

    just awesome.. popup email subscription widget you have made, thanks for sharing, I'm going to use this :)

    ReplyDelete
  7. not working fastest E-Mail subscription widget

    ReplyDelete
    Replies
    1. Kindly Give me your blog link so that I can check for the problem :)

      Delete
  8. Hy 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

    ReplyDelete
    Replies
    1. Hi Gurwinder, can you send me your template XML file, so that I can check the prob :)

      My Email: contact [at] blogtipsntricks [dot] com

      Delete
    2. Hi gurwinder, use the below conditional meta tag. Paste the below tag just below the <head>,

      <!-- For blocking Multiple Appearance of meta Descriptions on a single page -->
      <b:if cond='data:blog.pageType != &quot;index&quot;'>
      <b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>
      <b:if cond='data:blog.metaDescription != &quot;&quot;'>
      <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 == &quot;archive&quot;'>
      <meta content='noindex,noarchive' name='robots'/>
      </b:if>

      credit:- Mybloggertricks forum

      Delete
  9. Thanks Chandeep, especially for the BTNT THEME and Can you tell me which software you are using for creating blog Image poster..??

    ReplyDelete
  10. Not Working On my Blog Bro

    ReplyDelete
  11. Hello. Is there a way to add a delay?

    ReplyDelete
  12. Wow, 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??

    ReplyDelete
  13. Hello chadeep,

    I 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

    ReplyDelete
  14. Awesome onclick widget.It works fast.I applied it on my blog Entry test practice and Educational topics.Thanks...

    ReplyDelete
  15. Thank 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.

    ReplyDelete
  16. Hey it won't work for me because I don't have this "]]>" in my template...

    ReplyDelete
  17. Hiii....chandeep....
    I 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.

    ReplyDelete

  18. Hi , 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!

    ReplyDelete

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,
Chandeep