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
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.
[php] <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 == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" 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> [/php]
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…
[php] .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;} [/php]
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.
[php] <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 == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" 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> [/php]
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.
[php] <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 == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" 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> [/php]
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.
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 🙂
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…
But if the blogger has no taste it is a drama. taste in everything I mean in writing and in presenting(((
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
Hi babanature,
Good stuff bro. I like the simplicity of the box. I’m going to test its compatibility on my blog. Hope it works
Thanks for the tut
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
Very nice tip mate. I am using wordpress but i don’t find any widget for feedburner. Thanks for share
Hello Pankaj,
i am glad you find the post interesting enough to comment. do have a wonderful week ahead mate
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
Hello Bello,
Yeah!!! i try as much to satisfy my readers as long as i am capable 😉 .
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.
Hello Anil,
The code as explained is very simple to understand and implement to any blog. so no worries 🙂
Awasome style for feed subscription, i will use it below every post of my blog
Hello umesh,
Glad you liked it enough to make a comment
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
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
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
Hello Marc,
For sure, the code will definitely work in any place you want to put it.
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!
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
Stylish Feedburner subscription form can attract visitors to subscribe…thats a major advantage. thanks
Hello Nwosu,
yES, it is a huge advantage especially to does who wants to join the affiliate business
This really looks cool and I guess it’s worth trying.
Hello Kabie,
Thanks for liking the little widget. it is lovely and draws more subscribers. do make it a try and tell us how it went…
This is just awesome. I have a sidebar widget for subscription, but I guess I can put it beneath the blog post.
Nice,
But I need it for my WordPress blog, how can i install on wordpress