CSS3 OnClick Email Subscription Widget for Blogger

Email subscription widget is the ultimate source to send your latest updates to those readers who have subscribed to your Blogger blogs via email subscription form. Undoubtedly, there are many subscription widgets available for Blogger users but they occupy a large space on our blogs. Today, I will share a beautiful yet a light onclick popup email subscription widget which is free of JavaScript. This widget has been created with CSS3 and the best thing about this widget is; it is well documented that works smartly in every custom template. When a user clicks on the subscription icon, an email subscription form appears with beautiful design and social icons that why it's called the onolick widget.

This widget it created by blogtipsntricks.com but I have made few changes in it to make this widget more attractive. You can visit the original post from the above-mentioned blog. After installing the widget refresh your blog & you will see an email subscription icon left side corner on your blog footer. Just click the icon and see the magic.

Adding OnClick Popup Email Subscription Widget to Blogger

Style No. 1 With Colored Background
Onclick popup email subscribe form for blogger
  • Go to your Blogger Dashboard > Template > Edit HTML
  • Click inside the template editor and press Ctrl + F in order to open the search box
  • Type ]]></b:skin> in the search box and press enter key to locate the  ]]></b:skin>
  • Paste the give CSS code before/above the  ]]></b:skin>
    /*============ OnClick Email Subscription Widget CSS Starts ============*/
    #popup-wrap .popup-button { background: #996600 url("http://2.bp.blogspot.com/-5BeaRyWo6FQ/Vc9zn8NV2oI/AAAAAAAADU0/tGTO9XGumUs/s1600/envelop.png") no-repeat scroll center center; border-radius: 50%; bottom: 25px; cursor: pointer; height: 60px; left: 25px; position: fixed; width: 60px; 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: #996600; text-align: center; overflow: hidden!important; border-style:solid; border-color:#fff; border-width:2px;}
    #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: none; text-align:center;}
    #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); }
    /*============ OnClick Social Profile Icon Widget ============*/
    .social-profile-icons { margin: 20px 0; overflow: hidden; text-align: center; }
    .social-profile-icons ul { display: inline-block; margin: 0 auto !important; }
    .social-profile-icons ul li { background: transparent !important; border: none !important; float: left; list-style-type: none !important; margin: 0 4px 10px !important; padding: 0 !important; }
    .social-profile-icons ul li a, .social-profile-icons ul li a:hover { background: url("http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png") no-repeat scroll 0 0 #222; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; display: block; height: 38px; overflow: hidden; text-indent: -999px; transition: all 0.25s linear 0s; width: 38px; border: 1px solid rgba(0, 0, 0, 0.5); }
    .social-profile-icons ul li.social-facebook a { background-position: -60px 3px; }
    .social-profile-icons ul li.social-twitter a { background-position: -253px 3px; }
    .social-profile-icons ul li.social-gplus a { background-position: -93px 3px; }
    .social-profile-icons ul li.social-pinterest a { background-position: -157px 3px; }
    .social-profile-icons ul li.social-rss a { background-position: -189px 3px; }
    .social-profile-icons ul li.social-facebook a:hover { background-color: #3b5998; }
    .social-profile-icons ul li.social-twitter a:hover { background-color: #00aced; }
    .social-profile-icons ul li.social-gplus a:hover { background-color: #dd4b39; }
    .social-profile-icons ul li.social-pinterest a:hover { background-color: #cb2027; }
    .social-profile-icons ul li.social-rss a:hover { background-color: #F87E12; }
    /*============ OnClick Email Subscription Widget CSS End ============*/
    • Now search the </body> within your template editor using the command Ctrl + F (Windows) Command + F (Mac)
    • Paste the following HTML right before the </body> and hit save template
    <div id='popup-wrap'>
      <!-- Subscribe HTML Starts -->
           <label class='popup-button' for='popup-trigger'/>
      <!-- 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'/>
                <div class='popup-form'>
                    <label class='popup-form-close' for='popup-trigger' id='popup-close'/>
                    <div class='popup-inner'>
                        <!-- Opt-In Subscribe -->
                        <span class='popup-title'>Subscribe Via Email</span>
                        <span class='popup-content'>Get Our latest Updates to Your Inbox For Free</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=Knigulper&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
                            <input name='uri' type='hidden' value='Knigulper'/>
                            <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 Privacy is Important to Us</span>
               
    <!-- Subscribe Social Media Icon Starts -->
    <div class='social-profile-icons'>
    <ul>
    <li class='social-facebook'><a href='https://www.facebook.com/knigulper' title='Facebook'>Facebook</a></li>
    <li class='social-twitter'><a href='https://twitter.com/knigulper' title='Twitter'>Twitter</a></li>
    <li class='social-gplus'><a href='https://plus.google.com/b/110147552717093083415/+KnigulperBlogspot' title='Google+'>Google+</a></li>
    <li class='social-pinterest'><a href='https://in.pinterest.com/kingulper' title='Pinterest'>Pinterest</a></li>
    <li class='social-rss'><a href='http://feeds.feedburner.com/Knigulper' title='RSS'>RSS</a></li>
    </ul>
    </div> </div>
                </div><!-- .popup-form -->
      </div><!-- .popup-bg -->
        </div>
    <!-- Subscribe HTML End -->
    Style No. 2 With Transparent Background
    Onclick popup email subscribe form for blogger
    • Go to your Blogger Dashboard > Template > Edit HTML
    • Click inside the template editor and press Ctrl + F in order to open the search box
    • Type <head> in the search box and press enter key to locate the <head>
    • Paste the give CSS code before/above the  it
    <link href='//cdn.rawgit.com/knigulper/Web-Development/master/www.knigulper.com/popup-subscription-form.css' rel='stylesheet' type='text/css'/>
    • Now search the </body> within your template editor using the command Ctrl + F (Windows) Command + F (Mac)
    • Paste the given HTML code right before/above the </body> and hit save template
    <div id='popup-wrap'>
      <!-- Subscribe HTML Starts -->
           <label class='popup-button' for='popup-trigger'/>
      <!-- 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'/>
                <div class='popup-form'>
                    <label class='popup-form-close' for='popup-trigger' id='popup-close'/>
                    <div class='popup-inner'>
                        <!-- Opt-In Subscribe -->
                        <span class='popup-title'>Subscribe Via Email</span>
                        <span class='popup-content'>Get Our latest Updates to Your Inbox For Free</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=Knigulper&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
                            <input name='uri' type='hidden' value='Knigulper'/>
                            <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 Privacy Is Important To Us ==Unsubscribe at any time==</span>
             
    <!-- Subscribe Social Media Icon Starts -->
    <div class='social-profile-icons'>
    <ul>
    <li class='social-facebook'><a href='https://www.facebook.com/knigulper' title='Facebook'>Facebook</a></li>
    <li class='social-twitter'><a href='https://twitter.com/knigulper' title='Twitter'>Twitter</a></li>
    <li class='social-gplus'><a href='https://plus.google.com/u/0/b/107705481216986870331/+KnigulperGplus' title='Google+'>Google+</a></li>
    <li class='social-pinterest'><a href='https://in.pinterest.com/kingulper' title='Pinterest'>Pinterest</a></li>
    <li class='social-rss'><a href='http://feeds.feedburner.com/Knigulper' title='RSS'>RSS</a></li>
    </ul>
    </div> </div>
                </div><!-- .popup-form -->
      </div><!-- .popup-bg -->
        </div>
    <!-- Subscribe HTML End -->
    Customization
    Replace all the blue colored text with your own username/URL. If you have any question, suggestion, feedback or having trouble installing this widget, feel free to post your valuable comments.

    Conclusion
    Email subscription widget plays the important role to generate the traffic for blogs and websites as it sends your latest contents to your subscribed users electronically. If you are still not using this widget, I think it's time to change your mind and let your blog flood with subscribers.
    Subcribe to Our Newsletter For Free

    Subscribe Now

    Recommended For You

    Speak Your Mind