A Stylish Feedburner Subscription Form For Blogger and WordPress Blog

blogger blog vs wordpress blog

Arrrgh… I still wonder why blogger blog is so ugly, the template, the gadgets and even the almighty feedburner. But hey! Thank God that everything about blogging can be customized (even your articles :) ) to fit ones need.

Feedburner default optin form is ugly and it’s so discouraging that it is hard for subscribers to optin, right? But we can increase our subscribers with this simple customized feedburner optin form. Believe me when I say this customize optin form will convert more loyal readers by far compare to the default feedburner optin form. See how it looks

Must Read: ADDING A SUBSCRIBE BY EMAIL WIDGET FOR BLOGGER BLOG

subscrption form for blogger blog and wordpress blog

How interesting is it? Would you want one for your blog? Then do follow the simple tutorial I am about to drop.

This post was a special request from a good friend…

A simple stylish feedburner subscription form for your blog

I am going to show you how you can put the widget/ gadget in blogger blog and in wordpress blog:

Note that the code was given to me by a friend and I have tested it and it is working 100% and it even increased my conversion rate.

For Blogger Blog:

Go to your blogger blog dashboard >>> Click “Layout” >>> Click “Add a Gadget” (This will bring out a light pop up box)

Now scroll down and choose “HTML/ JavaScript” now in the text box that appears, copy the below code and paste.

 <style>
.mbt-email{
background:url(http://4.bp.blogspot.com/_MbejYjGokMM/TSeZHmWJ6oI/AAAAAAAAALE/93ELYyzmi64/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}

.mbt-emailsubmit{
background:#006633;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.mbt-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:170px;
color:#666;}

</style>

<div style="border-justify:4px dotted green; height:140px; width:360px;">
<div>
Subscribe via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-FEED-ID-HERE', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter your email here" type="text" />
<input type="hidden" value="YOUR-FEED-ID-HERE" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input value="Subscribe" type="submit" />
</form>
</div>
</div> 

Have you pasted code? Now save your work and you have successfully implemented the widget to your blogger blog. Go check your blog and see how it looks.

For wordpress Blog:

You can implement the code in two ways and we are going to be discussing this too ways

1. On our first step, we are going to edit the css part of our theme by placing the css code of our optin form. So how do we do this?

Go to your wordpress admin panel >>> Click “Appearance” >>> Click “Editor”. Open “Style.css and paste the below css in it…

 .mbt-email{
background:url(http://4.bp.blogspot.com/_MbejYjGokMM/TSeZHmWJ6oI/AAAAAAAAALE/93ELYyzmi64/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}

.mbt-emailsubmit{
background:#006633;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.mbt-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:170px;
color:#666;} 

Have you done that? Now click “widget and drag the “Text” widget to where you want your optin form to show and paste the below code in the “Text” widgets.

 <div style="border-justify:4px dotted green; height:140px; width:360px;">
<div>
Subscribe via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-FEED-ID-HERE', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter your email here" type="text" />
<input type="hidden" value="YOUR-FEED-ID-HERE" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input value="Subscribe" type="submit" />
</form>
</div>
</div> 

Click save and you are done with the work, go check your blog/ website and see how beautiful it is.

Now for does who are afraid of touching there editor, here is a simple way to go about it.

2. In your admin panel >>> Click “Appearance” >>> Click “Widgets” >>> Choose and drag the “Text” widget to your preferred position and paste the below code to the provided space.

 <style>
.mbt-email{
background:url(http://4.bp.blogspot.com/_MbejYjGokMM/TSeZHmWJ6oI/AAAAAAAAALE/93ELYyzmi64/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}

.mbt-emailsubmit{
background:#006633;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.mbt-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:170px;
color:#666;}

</style>

<div style="border-justify:4px dotted green; height:140px; width:360px;">
<div>
Subscribe via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-FEED-ID-HERE', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter your email here" type="text" />
<input type="hidden" value="YOUR-FEED-ID-HERE" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input value="Subscribe" type="submit" />
</form>
</div>
</div> 

Save your work and you are beautifully done.

Note: Change all fields in the codes that has “YOUR-FEED-ID-HERE” To your feedburner ID

Must Read: Optimizing Your WordPress Database For A Better Performance

Now that you have successfully beautified your feedburner optin form, what will be your next target? Please do drop a comments and thoughts using the comment box below. Remember that your comments and thoughts are highly appreciated and highly welcomed.

Was the post helpful? Do click the like button, share us and recommend us to friends because you’ll never know who among your friends might be in need of it.

Don't Miss Any Post Again. Subscribe To Our Feed And Be Updated

Enter your email address below:

 

Powered by OnenaijaBlog

Comments

  1. says

    Hi Babanature,

    This is interesting indeed, though scary for me too! I guess I really keep away from codes and am scared that I might just land up with some errors :)

    But I would surely be forwarding this to the tech department, my hubby, who would love to see all of this. We have been looking for a nice subscription form too – so let’s see if it fits in and we might start using it too. I see you too have used two different kinds on your blog, which are again nicely done up.

    Thanks for sharing these with us. Have a great week ahead :)
    Harleena Singh recently posted…The Father Who Had No TimeMy Profile

    • says

      Hello Harleena,
      Thanks… I know that messing with codes can be a great deal because any mistake can make your entire blog funny. But hey! i gave two option on this post and the two options can absolutely work. Thanks for your wonderful comment and do have a fabulous week…

    • says

      Yeah!!! Having Good taste for your blog is a great way to attract not just you but visitors as well. Thanks for the comment and do have a good week

    • says

      Hello Enstine,
      I’ll work and fit your blog just fine. It’s just a simple coding that will work on all platform. Thanks for the comment and do have a blessed week bro

  2. Bello says

    Hello Babanature,
    You really did put up the tutorial. thanks a lot because this will help me even more than you know. i appreciate. have a nice week bro

  3. says

    Hello Babanature,
    i don;t know on page coding but your information are very beneficial for me.i use that technique in future.so i hope that you are share the important information.

  4. says

    Hi Babanature!

    I never mess with this and have to say I am in the same place that Harleena is in. I gave to my tech department also. My husband!
    It is bookmarked for further use.

    This is valuable to know, but I do know my limitations and it is not messing with this stuff. I thank God my husband does most of the tech work for me.

    If not, I’ll be contacting you my friend!

    Donna

    • says

      Hello Donna,
      Seriously, it is a good idea to leave the technical aspect of blogging to the men. Your husband is truly doing some awesome jobs with your blog ;) Thanks for your lovely comment and do have a blissful week ahead

  5. says

    Hey thanks for the code! I’m actually using the movable social icon set you gave us also.

    I hope I haven’t over looked this, but will this code work after a post in WordPress?

    Marc Bell

  6. says

    Hey Baba, thanks for the lots of code lol. I use Feedburner forms both to collect subscribers and also to show off! Its a nice thing. Of course I’ll just forward this info to my assistant and make him set it up for me :)

    Thanks again!
    Jane recently posted…Blogging to Promote Your BusinessMy Profile

    • says

      Hello Jane,
      Hmmm… it seems like everybody that made a comment got assistant, maybe i should get me one;) anyways thanks for the comment and do have a blissful weekend

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge