Add Responsive Feed Burner Email Subscription Box In Blogger

0
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.
How to add a unique feed burner email subscribe widget box below header,in the end of blog post or in the blog footer section in blogger template,learn trick to add responsive opt-in subscription gadget in blogspot.
Hello folks,today in this article we are going to explain how to add responsive feed burner widg...
SUMMARY

How to add a unique feed burner email subscribe widget box below header,in the end of blog post or in the blog footer section in blogger template,learn trick to add responsive opt-in subscription gadget in blogspot.

You Might Also Like:

We hope this article helped you to learn Add Responsive Feed Burner Email Subscription Box In Blogger . If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "Add Responsive Feed Burner Email Subscription Box In Blogger " So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand