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.

email subscription

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 */
#feedsignup{position:relative;padding:5px 0;background:#2D363E;overflow:hidden;border-top:4px solid #eee;}
.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 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%;}


  • 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'>  for placing 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='' class='subscribe-form' method='post' onsubmit=' (&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>

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.


  1. চাঁদপুর প্রতিদিন
    রাব্বী ভাই টিউনটি অসাধারণ হয়েছে। আর আপনি নতুনদের জন্য একজন অগ্রপতীক হিসাবে কাজ করছেন। বিধায় আপনাকে ধন্যবাদ দিয়ে ছোট করবো না। আপনার কাজ থেকে আমি অনেক কিছু শিখেছি। তাই নতুনদের জন্য নতুন বিষয় শেয়ার করার জন্য বিশেষভাবে অনুরোধ করছি।
    • BloggerSpice
      Thanks Anwar Vai... Ami new kico project niye kaj korci.. develop sesh holei obossoi post update paben.
  2. Unknown
    i like your website
    • BloggerSpice
      Thanks Bro. ;)
  3. Unknown
    Yellowish V1 Responsive Blogger Template এ হয় না স্যার ।
    • BloggerSpice
      Blogger Dashboard theke ->Template ->Edit HTML a jan tarpor Ctrl+F press kore nicer code ta khojon.

      <div id="post-rating">

      Ekhon Step 6 a jei script ta ace ooita uporer code ar upore paste koron taholei show korbe.
  4. Unknown
    হয়না বস । আপনার সব Template এ TRY করলাম একটাতেও কাজ হয়না । আপনি নিজে একটু TeSt করে দেখেন ...।।
    • BloggerSpice
      Hello Mr. Mukur Ali. I have fixed the widget. It will work now. Thanks for the info in comment section.

  5. Unknown
    how to make footer like in your website?
    columns order and descriptions
    I am very interested
    • BloggerSpice
      maaf Latif, ini bukan untuk berbagi. :sd
  6. Hallo Rabbi
    Awesome post again. Thats why i am your big fan.

    I need your suggestion on feedburner. Which feedburner service you are using. Because your feeds are trumendous and very beautiful when we get the emails.

    Please reply and solution for how to manage feedburner, which is using by you.
    • BloggerSpice
      Hi Sumit
      I have already replied about your answer in another comment section. I use MailerLite but for MailerLite RSS feed you must use Google Feedburner.

      Thank you. :up
  7. Sorry, I forgot that i was comment same thing on another post.
  8. Manish Kumar
    I do all the steps as you mentioned above, but sadly it didnt work. :( Can you help me out?
    • BloggerSpice
      Hi Manish Kumar :t
      Please replace BloggerSpice from the script and add your feedburner id.
      Thank you :up
  9. Anshika Juneja
    Can i remove a double opt in form from feedburner?
    • BloggerSpice
      Hi Anshika :re
      You can manage all of your feedburner subscriber email from the dashboard. Just go to

      feedburner -

      - Click on 'Publicize' tab
      - Click 'Email Subscriptions' from the left menu
      - Select 'Subscription Management'
      - Now from the bottom click 'View Subscriber Details' link.

      you will see all of your subscriber. And you can delete the subscriber from there.

      Thank you.
  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Go Up