Smart Popup Email Subscription Gadget For Blogger/Blogspot Blog

Recently i have shared a article  Email Newsletter  Widget with social profile icons for Blogger Which is one of the great widget you can use to drive more subscribers to your mailing list.

Today too i'm going to share a such widget but it is popup widget, The best part is that it will will not visible until the user click on the mailbox image on left bottom the screen.

This widget is created by using a combination of CSS and HTML5 which means that it won't affect your blog loading time.

We are using  Blogger's default feedburner so if you don't have configure it here

Preview :

Add CSS Code To Your Blog :

1. Go to Blogger Dashboard > Template > HTML

2. Now press CTRL + F and you will get a search bar

3.In the search bar type the below given tag


4. Now press enter

Just above this code paste the below given CSS Code

/***** Smart PopUp Email Subscription Form CSS IPEE World *****/
#popup-wrap .popup-button { background: #A1362A url("") 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); }

Now we have added CSS code and our next step is to add Subscription Box

Add Subscription Box To Your Blog :

1.Go to Blogger Dashboard > Template > HTML

2.Click CTRL + F and in the search bar type </body> and hit enter

3.Just above the code paste the below given 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>
                    <form action='' id='subscribe' method='post' onsubmit=';;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
                        <input name='uri' type='hidden' value='YOUR-FEEDBURNER-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'/>
                    <br />
                    <span class="popup-footer">Your email address is safe with us!</span>
            </div><!-- .popup-form -->
  </div><!-- .popup-bg -->
    </div><!-- #popup-wrap -->

Changes To Make

Replace YOUR-FEEDBURNER-ID with your particular Feedburner ID
Totally two time you should replace the code

Then simply save the Template

Now you are ready we have added the Smart Popup Email Subscription Box to our blogger blog

Hi Guys, I'm Astro Joseph a young Blogger from Kerala,India.I Started IPEE World as passion and it is now empowering Millions of Readers around the Globe.Read more at About Page

Sharing is Caring :)

Related Articles

Previous Article
Next Article »


23 September 2016 at 08:33 delete

Nice! but how to show the pop up message in 5 second


We’re very excited to see your comments. However, Please Keep in mind that, All Comments are strictly moderated by us before publishing.Comments with Links and other unnecessary contents will be removed and will not be published. :)

Contact Form


Email *

Message *