Boost Subscriber with Responsive Feedburner Opt-in Widget

Blogger’s most favorite opt-in medium is Google Feedburner. Because most of the Blogger platform users, use Feedburner to collect email subscriber. WordPress users have many options to use third-party pugins to increase their subscriber in mail list but those have some limitations. But you will see many eye catching features of email newsletter service provider. But until subscribe to their paid service you won’t able to use all features of email newsletter service provider.

Google Feedburner is best for collecting subscriber in your mailing list. Because it serve unconditionally, you don’t have any limitation to use this. Suppose if you want to use any third party email subscription service (like Mailchimp) then you might see after 2000 subscription it will force you to subscribe to their paid plan. However the main problem is Google Feedburner is not updating for longer time. But still this is most popular medium to raise email subscriber.

Live Demo

Though Google Feedburner hasn’t got any beautiful outlook by itself but by using CSS script we can make it beautiful. In this article I am going to share a beautiful responsive Google Feedburner opt-in widget which your Blog readers may like and subscribe to your newsletter. And I am damn sure you will able to increase your email subscriber by 30% within next few months.

The main features of this widget are as follows-

• This widget is completely responsive which fits with any template’s width.
• Pure CSS script used in this widget so, it loads faster.
• Can be customizes easily for using this in any colored template.
• You can place this widget below Blog header, above footer or at the end of Blog posts.

Sounds good. I hope you are now excited to integrate this beautiful widget in your Blogger template.

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Click on -> Template -> Edit HTML

Step 3 Now Find this script ]]></b:skin>  by pressing Ctrl+F (Windows) or CMD+F (Mac) 

Step 4 Paste the below script Before/above ]]></b:skin> 

/* Subscribe Box by http://www.bloggerspice.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:#2AA9E0;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:#00AEEF;}
#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

• Please alter font-size:200%to change the widget text size.
• To change Sign Up button color please change #2AA9E0; color code.
• For changing Sign Up button’s hover color please change #00AEEF; color code.

Step 5 Now again Find this code <data:post.body/> or <div class='post-footer'>  by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 6 Paste the below code above/before <div id='content-wrapper'> for placing the widget below of Blog header. Or paste the script below/after <data:post.body/> or <div class='post-footer'>  forplacing the widget end of your Blog post. Or paste the script above/before <footer id='footer-wrapper'> for displaying the widget above your Blogger template footer section. and for placing the widget below Blog post title then paste the script above/after <data:post.body/>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<b:if cond='data:blog.pageType != &quot;archive&quot;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='feedsignup'>
<p class='feedtext'><span>READY TO GROW</span>
<span class='feedtext1'>with</span> Hustlers</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
    <form action='http://feedburner.google.com/fb/a/mailverify?uri=BloggerSpice' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=BloggerSpice&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='BloggerSpice'/><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>

Step 7 Now hit the Save template button.

Now check your Blogger template and see beautiful feedburner subscription or opt-in widget. I hope your Blog visitors will love it and subscriber to your daily newsletter. For any further help to install this widget feel free to leave a comment below. Thank you.