OnClick Popup Email Subscription Widget For Blogger

How to add OnClick PopUp Email Subscription Form For Blogger:
Follow steps correctly to add OnClick PopUp Email Subscription Form

Step 01: 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/AVvXsEi1cIBtQExDGUk9yDf6SEvOm-1PZjCfLPxNR_tSN-cwVB7BTRTHlKTjCWhduVSdLMvxoKPCRkCKb2rKXG75D9xAMZnBgqx8VkxtiT9mcM_qaxkqb_CcxWygMWJ2HD_3WzSRrkXcf2pWokDZ/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); }  

Step 02: 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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=http://feeds.feedburner.com/TechTrickCorner&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>  
             <input name='uri' type='hidden' value='http://feeds.feedburner.com/TechTrickCorner'/>  
             <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 -->  

• In the Above HTML code, Search for TechTrickCorner and replace it with your Feedburner username (You'll find TechTrickCorner two times, means you've to replace it two times)
• 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 feedback are valuable.

SHARE

Tech Tricks

• 
• 
• 
• 
•