Add Responsive Feed Burner E-Mail Subscription Box Inward Blogger

Hello folks,today inwards this article nosotros are going to explicate how to add responsive feed burner widget inwards blogger post footer.This widget is absolutely responsive which suits alongside whatsoever template.natural CSS script used inwards this widget so, it hundreds fourth dimension faster.you tin customize it without whatsoever problems for the usage of this inwards whatsoever colored template.you tin share this widget underneath weblog header, to a higher house footer.To take in this widget follow the steps mentioned below.

How To Add Email Subscription Responsive Feed Burner Gadget In Blogger Template

installation steps:

Step 1. Log inwards to your Blogger employment organisation human relationship in addition to Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for ]]></b:skin> by Pressing Ctrl+F keys.
Step 4. Copy the below code in addition to glue it only earlier the ]]></b:skin> tag.

/* Feed Burner Subscribtion Widget Box past times http://www.bloggersstand.com */
#feedsignup{position:relative;padding:5px 0;background:#2D363E;overflow:hidden;border-top:4px corporation #eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;float:right;width:50%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.feedsignup-email-field{background:#252C33;color:#ccc;margin:10px 0;padding:15px 20px;width:50%;border:0}
.feedsignup-email-button{background:#5CB85C;color:#fff;cursor:pointer;font-weight:700;padding:11px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;transition:all .6s}
.feedsignup-email-button:hover{background:#017CB9;}
#feedsignup p.feedtext{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:200%;float:left;font-weight:400;line-height:normal;width:45%}
#feedsignup p.feedtext bridge {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#feedsignup p.feedtext span.feedtext1 {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#feedsignup p.feedtext span.feedtext1:before,#feedsignup p.feedtext span.feedtext1:after{display:none}
#feedsignup p.feedtext span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#feedsignup:hover p.feedtext span:before{width:100%;}
@media solely shroud in addition to (max-width:767px){
  #feedsignup p.feedtext{margin:0 0 20px 0;width:100%;}
   .subscribe-wrapper {width:100%;}
}

Customization: 

• To modify the widget font text size ,replace 200% with your desired value.
• To modify the color of Sign Up Button Replace,5CB85C with your desired color.you tin direct colors from here:Color bike picker or Color Code Generator
• To modify the sign upwards push hover color,replace 017CB9

Step 5. Now Search <data:post.body/> or <div class='post-footer'> by using CTRL+F keys.

Step 6. Now To add together the widget below Blog header  add the below code only above <div id='content-wrapper'>

Step 7. To house the widget inwards the weblog post footer.Paste the below code after<data:post.body/> 

Step 8.To display the widget inwards the weblog footer section.paste the below code above <footer id='footer-wrapper'> 

<b:if cond='data:blog.pageType != &quot;error_page&quot;'>    
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='feedsignup'>
<p class='feedtext'><span>JOIN OUR SITE</span>
<span class='feedtext1'>TO LEARN</span> PRO TRICKS</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
    <form action='http://feedburner.google.com/fb/a/mailverify?uri=Bloggersstand' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=Bloggersstand&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='Bloggersstand'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='feedsignup-email-field' name='email' placeholder='Enter your Email Here...'/><input class='feedsignup-email-button' title='SIGN UP' type='submit' value='SIGN UP!'/></form>
  </div>
</div>
</div>
            </b:if>    
      </b:if></b:if>

Change Bloggersstand with your feed burner id.
Step 9. Now Save your template..Done !

We promise this article helped you lot to larn How to Add Responsive Feed Burner Email Subscription Box In Blogger Template.If you lot liked this article delight Join us on Facebook,Twitter,Google Plus.