Boost Subscriber with Responsive Feedburner Opt-in Widget

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

12
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.
Boost Subscriber with Responsive Feedburner Opt-in Widget
4 Stars stars - "Boost Subscriber with Responsive Feedburner Opt-in Widget " Blogger’s most favorite opt-in medium is Google Feedburner. Because most of the Blogger platfor...

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

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

i like your website

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

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.

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

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>

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

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

:-d

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

maaf Latif, ini bukan untuk berbagi. :sd

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

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 *