» » » Add Responsive Feed Burner Email Subscription Box In Blogger

Add Responsive Feed Burner Email Subscription Box In Blogger

,
Add Responsive Feed Burner Email Subscription Box In Blogger
Hello folks,today in this article we are going to explain how to add responsive feed burner widget in blogger post footer.This widget is absolutely responsive which suits with any template.natural CSS script used in this widget so, it hundreds time faster.you can customize it without any problems for the usage of this in any colored template.you can region this widget underneath blog header, above footer.To grab this widget follow the steps mentioned below.

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

installation steps:

Step 1. Log in to your Blogger account and 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 and paste it just before the ]]></b:skin> tag.
/* Feed Burner Subscribtion Widget Box by http://www.bloggersstand.com */
#feedsignup{position:relative;padding:5px 0;background:#2D363E;overflow:hidden;border-top:4px solid #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 span {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 only screen and (max-width:767px){
  #feedsignup p.feedtext{margin:0 0 20px 0;width:100%;}
   .subscribe-wrapper {width:100%;}
}

Customization: 

  • To change the widget font text size ,replace 200% with your desired value.
  • To change the color of Sign Up Button Replace,5CB85C with your desired color.you can choose colors from here:Color wheel picker or Color Code Generator
  • To change the sign up button 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 the widget below Blog header  add the below code just above <div id='content-wrapper'>
Step 7. To place the widget in the blog post footer.Paste the below code after<data:post.body/> 
Step 8.To display the widget in the blog 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 hope this article helped you to learn How to Add Responsive Feed Burner Email Subscription Box In Blogger Template.If you liked this article please Join us on Facebook,Twitter,Google Plus.