Boost Subscriber with Responsive Feedburner Opt-in Widget

How to add a professional Responsive Google Feedburner subscription widget in Blogger?

Comments: 19
data:blog.title
newsletter

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 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'>  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='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.

Related Post

Speak Your Mind

মোঃ আনোয়ার হোসেন says: 1/26/2016

রাব্বী ভাই টিউনটি অসাধারণ হয়েছে। আর আপনি নতুনদের জন্য একজন অগ্রপতীক হিসাবে কাজ করছেন। বিধায় আপনাকে ধন্যবাদ দিয়ে ছোট করবো না। আপনার কাজ থেকে আমি অনেক কিছু শিখেছি। তাই নতুনদের জন্য নতুন বিষয় শেয়ার করার জন্য বিশেষভাবে অনুরোধ করছি।

Mohammad Fazle Rabbi says: 1/26/2016

Thanks Anwar Vai... Ami new kico project niye kaj korci.. develop sesh holei obossoi post update paben.
:)

Unknown says: 2/01/2016

i like your website

Mohammad Fazle Rabbi says: 2/01/2016

Thanks Bro. ;)

MD MUKUR ALI says: 2/02/2016

Yellowish V1 Responsive Blogger Template এ হয় না স্যার ।

Mohammad Fazle Rabbi says: 2/02/2016

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.

MD MUKUR ALI says: 2/03/2016

sir ট্রয় করলাম হয় না । plese plese plese plese plese plese plese ব্ললেন কি করবে হবে ।

Mohammad Fazle Rabbi says: 2/03/2016

Tahole nicer moto code search koron

<div class='post-footer'>
</div>


and step 6 er script ta nicer aaiter modhde paste koron. tahole kaj hobe.

<div class='post-footer'>
Paste the Script from Step 6
</div>

MD MUKUR ALI says: 2/04/2016

হয়না বস । আপনার সব Template এ TRY করলাম একটাতেও কাজ হয়না । আপনি নিজে একটু TeSt করে দেখেন ...।।

Mohammad Fazle Rabbi says: 2/06/2016

Hello Mr. Mukur Ali. I have fixed the widget. It will work now. Thanks for the info in comment section.

:-d

Muhammad Latif says: 3/11/2016

how to make footer like in your website?
columns order and descriptions
I am very interested

Mohammad Fazle Rabbi says: 3/11/2016

maaf Latif, ini bukan untuk berbagi. :sd

Sumit Kumar Gogawat says: 5/25/2017

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.

Rabbi Khan says: 5/28/2017

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.

http://www.bloggerspice.com/2017/03/rss-email-campaign-with-mailerlite.html

http://www.bloggerspice.com/2016/06/mailerLite-email-marketing-tool-for-list-building.html

Thank you. :up

Sumit Kumar Gogawat says: 5/29/2017

Sorry, I forgot that i was comment same thing on another post.

Manish Kumar says: 6/01/2017

I do all the steps as you mentioned above, but sadly it didnt work. :( Can you help me out?

Rabbi Khan says: 6/04/2017

Hi Manish Kumar :t
Please replace BloggerSpice from the script and add your feedburner id.
Thank you :up

Anshika Juneja says: 7/04/2018

Can i remove a double opt in form from feedburner?

Blogger Spice says: ADMIN 7/04/2018

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.

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *