Email Sign Up Subscription Box For Blogger

How To Add Email Sign Up Box For Blogger

Adding Of Email Sign Up Subscription Box For Blogger 

Go to Blogger > Template > Edit HTML 

Add this code before </body>

<div class='modalDialog' id='signup'>
<div>
<a class='close' href='#close' title='Close'><i class='fa fa-times'/></a>
<div class='signup-container'>
<style>
.newsletter-sm {background:#fff; width: 100%; margin: 0; padding: 20px;}
.newsletter-sm h3 {color:#555; font-family: &#39;Maven Pro&#39;, sans-serif; font-size: 24px; font-weight: normal; text-align:center; margin-bottom: 10px;}
.newsletter-sm p {font-size: 14px; color:#555; line-height: 20px; font-family: &#39;Maven Pro&#39;, sans-serif;}
.newsletter-sm .newsletter-input-sm {border: 0; padding: 5px 10px; width: 360px; float:left; height: 40px; color:#555;border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;}
.newsletter-sm .newsletter-sm-bot{background:#00aa9f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbDsrnFkz1p48VAvGb209smf0FXdcuC0-L4jAWX5fO38FuWy0nphtnmPIKMVfGeLjv8-CGOx6lailYpjj4bbA2Bd2docbE90lgJkVOu6BtepRLxa1yL8ojVwzLtiB4-d1LBxtTwplAebE/s1600/bg.png) no-repeat; padding: 20px; margin: 0 -20px -20px; height: 80px;}
.newsletter-sm .newsletter-button-sm {float:right; height: 40px; display:inline-block; font-size: 14px; padding: 5px 10px; position: relative;color: #fff;text-align: center; background:#00aa9f;border: 1px solid #fff;cursor: pointer; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;}</style><div class='newsletter-sm'><i class='fa fa-envelope-o' style='background:#00aa9f; color:#fff; width: 50px; height: 50px; display:block; line-height: 50px; text-align:center; font-size: 24px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; margin: 0 auto;'/>
<h3>Subscribe to Newsletter</h3><p style='text-align:center'>Sign up with your email address to receive news and updates straight in your inbox.</p><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=BloggingEasier&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><div class='newsletter-sm-bot'><input class='newsletter-input-sm' name='email' placeholder='Enter Your Email' type='text'/><button class='newsletter-button-sm' type='submit'>Subscribe</button>  </div><input name='uri' type='hidden' value='BloggingEasier'/>
</form></div></div></div></div>

Replace AjmalWeb  with your feedburner URL 

Add this code before ]]></b:skin> in Blogger Template 

/*--------------- MBA Modal Dialog ---------------*/
.modalDialog {
 position: fixed;
 font-family: Arial, Helvetica, sans-serif;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background: rgba(0,0,0,0.6);
 z-index: 99999;
 opacity:0;
 -webkit-transition: opacity 200ms ease-in;
 -moz-transition: opacity 200ms ease-in;
 transition: opacity 200ms ease-in;
 pointer-events: none;
}
.modalDialog:target {
 opacity:1;
 pointer-events: auto;
}
.modalDialog:target > div {
margin: 8% auto;
}
.modalDialog > div {
 -webkit-transition: all 100ms ease-in;
 -moz-transition: all 100ms ease-in;
 transition: all 100ms ease-in;
 width: 500px;
 position: relative;
 margin: 5% auto;
 background: #fff;
 min-height: 200px;
}
h2.signup {
background:#00aa9f;
border-bottom: 1px solid #008d84;
font-weight: normal;
text-align:center;
padding: 10px;
color:#fff;
font-size: 18px;
}
.close {
 color: #888;
 position: absolute;
 top: 1px;
 right: 1px;
 width: 30px;
 height: 30px;
 line-height: 30px;
 text-align: center;
 font-size: 16px;
}

.close:hover { text-decoration:none; }
.close:hover { color:#555; }

 Finally save it template 

This is the method how to add Email sign up box for blogger For Newsletter