How to add responsive Email subscription Box For Blogger - ThemeXBD

How to add responsive Email subscription Box Below blogger's posts?


Follow this simple step to add our email subscription box to your blogger posts.

Step 1: Adding the CSS Code To Blogger -

CSS code adds a clean design to the email box. Go to Blogger.com > Theme > Edit HTML and search for ]]></b:skin> and paste the below code just above  ]]></b:skin> Code.

/*** Email Box Distributed By themexbd.blogspot.com ***/  
 /**** Developed by themexbd.blogspot.com ****/  
 /***** Keep the credits intact *****/  
 #subscribe-box-sbm {  
  background-color: #3F3F3F;  
  color: #fff;  
  margin: 0 auto;  
 }  
 .subscribe-box-sbm-wrap {  
  overflow: hidden;  
  padding: 4%;  
  text-align: center;  
 }  
 .subscribe-box-sbm-wrap h4 {  
  font-family: 'Tahoma'!important;  
  text-align: center;  
  font-size: 23px!important;  
  text-transform: uppercase;  
  color: #ccc!important;  
  margin: 0!important;  
  font-weight: bold!important;  
 }  
 .subscribe-box-sbm-wrap p {  
  margin: 1% 15%;  
  text-align: center;  
  text-transform: uppercase;  
  font-size: 12px;  
  font-family: 'Tahoma'!important;  
  font-weight: bold;  
  color: #7c8c8c;  
  line-height: 15px;  
 }  
 .subscribe-box-sbm-wrap input[type="email"] {  
  font-family: 'Tahoma';  
  letter-spacing: -0.6px;  
  background: #fff!important;  
  color: #999;  
  width: 70%;  
  margin: 1%;  
  height: 42px;  
  padding: 1%;  
  font-size: 16px;  
 }  
 .subscribe-box-sbm-wrap input[type="submit"] {  
  font-family: 'Tahoma';  
  font-size: 17px;  
  margin: 1%;  
  padding: 18px;  
  color: #fff;  
  background: #3b5998;  
  border-bottom: 3px solid #324b81;  
  border: 0;  
  text-transform: uppercase;  
  font-weight: bold;  
 }  
 .subscribe-box-sbm-wrap input[type="submit"]:hover {  
  box-shadow: inset 0 3px 10px rgba(0,0,0,.5)!important;  
 }  

Step 2: Adding HTML Code To Blogger-


Now, we will add the HTML code. Search for <data:post.body/> and paste the following code below it. OR Search for <div class='post-footer'>  and paste the code above it.

<div id='subscribe-box-sbm'>  
 <div class='white-border'>  
 <div class='subscribe-box-sbm-wrap'>  
 <h4>Get The Latest Post Delivered Free to Your Inbox</h4>  
 <p> Join over 1500+ people who get FREE and fresh content from this Blog. We Respect Privacy, You are Safe! No Spam!</p>  
 <form action='https://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open( 'https://feedburner.google.com/fb/a/mailverify?uri=Themexbd', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' rel='noopener noreferrer' target='popupwindow'>  
 <input id='subbox' name='email' onblur='if ( this.value == '' ) { this.value = 'Enter your email address...' } ' onfocus=' if ( this.value == 'Enter your email address...') { this.value = '' }' type='email' value='Enter your email address...'/><input class='subbutton' type='submit' value='Subscribe'/>  
 <input name='uri' type='hidden' value='twistblogg'/>  
 <input name='loc' type='hidden' value='en_US'/>  
 <div class='clear'/>  
 <p style='font-size:10px;'>CHECK YOUR INBOX AND COMPLETE YOUR SUBSCRIPTION!</p>  
 </form>  
 </div>  
 </div>  
 </div>  

N-B: Change Themexbd Feedburner ID
Now Save Your Template.