Get 25% Discount For HostGator- $110 OFF! | Series: Become a Pro Blogger!, Create and Sale Ebooks , PDF Editing Ways


Saturday, October 31, 2009

Subscription Email Form For Blogger Equipped With RSS Feed



Click here To use Wordpress Type Subscription Email Form

Blogger-Subscription-Form

 

I am extremely sorry for delaying this post. Due to burden of studies I was finding it difficult to publish posts but now everything is fine. Now without wasting your time lets jump straight to the tutorial of adding a beautiful Subscription form to the sidebars of your BlogSpot blogs.

 

Before Proceeding make sure you have burnt your feeds at www.feedburner.com

Now do the following,

  1. Go To Blogger > Layout
  2. Click Add a Gadget or Add a Page element
  3. Choose HTML/JavaScript Widget
  4. Inside this widget paste the code below,

<a href="http://feeds2.feedburner.com/TntByStc" rel="alternate" title="Subscribe now to avail the unthinkable" type="application/rss+xml"><img border="0" alt="" style=" padding-bottom:20px; margin: 0pt 10px 10px 0pt; float: left; width:100px; height:100px;" src="http://3.bp.blogspot.com/_7wsQzULWIwo/Sty6EvZmTlI/AAAAAAAACGU/ArK94-9iDS0/s400/MBT-RSS-FEED.gif"/></a><p><a href="http://feeds2.feedburner.com/TntByStc" rel="alternate" title="Subscribe to my feed" type="application/rss+xml">Join the team! </a><span style="color: #5C6AA4; font-weight: bold;">By Submitting your email address:</span></p>
<style>
input.mbt1 {
color:#fff;
font: bold 10px Arial, sans-serif;
background:#F39100;
border:0;
padding:3px;
}
input.mbt1hov {
color:#fff;
font: bold 10px Arial, sans-serif;
border:2px solid #F39100;
padding:3px;
}
</style>
<form action="http://feedburner.google.com/fb/a/mailverify" style="padding: 5px; " target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TntByStc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input style=" color:#5C6AA4; background: #fff; border:1px solid #5C6AA4; width: 90px;" name="email" type="text"/><input value="TntByStc" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/> <input onmouseover="this.className='mbt1 mbt1hov'" onmouseout="this.className='mbt1'" value="GO!" class="mbt1" type="submit"/></form><br/>

Now you need to make some important changes to customize the widget.

  • Replace http://feeds2.feedburner.com/TntByStc with your Feed URL that Feedburner has provided you. If you don’t now how to get it simple replace TntByStc with your Feed title like this,

http://feeds2.feedburner.com/Paste-Your-Feed-Title-here

 

  • To use a different RSS Feed Icon simple change the URL below with that of yours,

http://3.bp.blogspot.com/_7wsQzULWIwo/Sty6EvZmTlI/AAAAAAAACGU/ArK94-9iDS0/s400/MBT-RSS-FEED.gif

  • Replace TntByStc with your own Feedburner Feed Title
  • The Color code #5C6AA4 refers to the text colour and border colour of the Subscription Box. May be MBT Color Chart will help you. If you are using MBT Buster Themes than change the colours as follows,

               For Buster Theme 1 leave the code #5C6AA4 unchanged.

               For Buster Theme 2 replace #5C6AA4 with #64A6E4

               For Buster Theme 3 replace #5C6AA4 with #37BD07

               For Buster Theme 4 replace #5C6AA4 with #7CA2C4

               If you are using MBT Church Theme then replace #5C6AA4 with #7CA2C4

That’s it. Hit Save and Preview Your Widget!

I hope it was simple to understand :|



Respected Readers:
We educate thousands of bloggers a week with our tutorials. To help us go ahead with the same spirit, a small contribution from your side will highly be appreciated.


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Thanks for making this possible! Kindly Bookmark and Share it.
Technorati Digg This Stumble Facebook Twitter
Create your own blog!

33 comments:

Comment Page :
Hannah on 7:46 PM, October 31, 2009 said... #

'''I am extremely sorry for delaying this post. Due to burden of studies I was finding it difficult to publish posts but now everything is fine.'''

As I tell my son and daughter, "Studies need to come first! They help your future"! lol! I'm sure you get to hear things along those lines as well! ;)

Thank you for your quick response! lol or maybe it was my timing!

Mohammad Mustafa Ahmedzai on 11:57 PM, October 31, 2009 said... #

@Hannah

Hannah your children are lucky to have such an active mother. Its impressive to see how easily you manage time.

And yes you are right you replied just after few hours of this publish :D

Mohammad Mustafa Ahmedzai on 11:04 PM, October 31, 2009 said... #

A Good News:

I successfully recovered my Google PageRank from 0 to 2.0 just after a month as I had expected. I hope it keeps on increasing.


Thanks to all readers for their support.

Jeffery said... #

Mohammad thanks for sharing this code.


Congress on PR update dude!

Anonymous said... #

You are a true SEO!

Patel

Anup on 7:18 AM, November 01, 2009 said... #

Hey!! Thats great news!!:)My page rank is now 1 of http://anup-views.blogspot.com

Or my page rank is 0 of http://hacktutors.blogspot.com

:(
How to increase page rank Mohammad?? please help me...

chinna on 12:41 PM, November 01, 2009 said... #

Hello I have a serious doubt i tried anshuldudeja's comment bubble for each post but when i tried it the comment bubble is messing up with my blog post title please help me

chinna on 1:43 PM, November 01, 2009 said... #

And one more doubt for me how can i split header into two sections as u can see in my blog jayarajyadav.blogspot.com where i use template designed by ipietoon.com please help me
note:-same as i am using in my template in your MBT Church theme

Mohammad Mustafa Ahmedzai on 2:33 PM, November 01, 2009 said... #

@Anup

PageRank is based on Google's Link building Algorithm that adds up when links from external sites are redirected to your blog. Each link especially a one-way link from an external source having a good PR contributes to your PR increase.
The short and quick tip to increase your PR is that work hard on building up reputation in Blogosphere by sharing unique content. People will link to you from different authorities causing your PR to increase. Never ask for link exchanges. Two-way linking results zero. Moreover 1000 links from a PR zero blog to yours result in Zero or may be 1. In short work hard the fruit will be sweet by itself :>

Mohammad Mustafa Ahmedzai on 2:41 PM, November 01, 2009 said... #

@China

Friend what do you mean by "anshuldudeja's comment bubble". Can you clarify your first comment


You can add an extra widget area just below header. To do that , set showaddelement value to 3 in your template and maxwidgets to 3. Make sure you check the box next to "Expand Widget Templates"

MBT Church theme has it be default :)

chinna on 5:46 PM, November 01, 2009 said... #

at first i mean check this URL http://www.anshuldudeja.com/2009/07/show-comment-bubble-at-top-of-each.html
when i tried the tutorial given by him it worked but it is messing up with my blog post title

and the second one is i know that i can change the max widgets to any number i am asking about splitting header into two and it should look like this
see this below link for the picture how i want the header to be
http://img2.pict.com/99/33/27/1886204/0/800/mybloglayout.jpg
and see my blog jayarajyadav.blogspot.com for how it look like

u r great because you created a nice templates for bloggers you are no.1 according to me

and the last thing is the template which i am using is created by ipietoon.com name is blacknero template

regards:-jayarajyadav.blogspot.com

Anup on 7:18 AM, November 02, 2009 said... #

Do you know when will google updated our page rank??

Mohammad Mustafa Ahmedzai on 1:29 PM, November 02, 2009 said... #

@China


Thanks for explaining. Kindly email me the link of your Template so that I could make necessary alignment changes for the comment bubble/background to look good on yours template. I will share the new CSS code right here.

You also asked about splitting the header well that is surely easy but comprehensive. The header wrapper need to be divided into three Div sections, one as headerright and the other as headerleft. You will than need to link the CSS to the Widget b:section area. All this needs a detailed post. But If you are eager to add this effect to some template, than email me the download link of it. I will split the header for you and will email the template back to you.
I hope you understand that Splitting the header needs detailed instructions. May be you will find it confusing if I share it here.

@Anup

Google PR is updated once after each 45 days

chinna on 5:45 PM, November 02, 2009 said... #

thanks i will surely email the download link of the template as i have exams tomorrow i will email u tomorrow thanks for ur suggestions hope u will surely reply after i emailed to u

regards:-jayarajyadav.blogspot.com(chinna)

at last my name is not china
it is chinna

chinna on 5:47 PM, November 02, 2009 said... #

at last i want a favicon like u with my name jayarajyadav

Anup on 8:20 PM, November 02, 2009 said... #

Wow! great you are great. Can you share me more about SEO tips and tricks? Please I want help from you.

Regards,
Hack Tutors

Mohammad Mustafa Ahmedzai on 12:44 PM, November 03, 2009 said... #

@China

I will be waiting

@Anup

I am going to write a series of posts on SEO in coming days. I have a lot to share and would surely share first heard content.

Phosi on 6:25 AM, November 13, 2009 said... #

Blogger-Subscription-Form I am extremely sorry for delaying this post. Due to burden of studies I was finding it difficult to publish posts but now everything is fine. Now without wasting your time lets jump straight to the tutorial of adding a beautiful Subscription form to the sidebars of your BlogSpot blogs.

I found your post very helpful and easy to follow. I was able to add a subscription form in my blogger blog, but had one small problem. When I tested using an email address it showed me that "The feed does not have subscriptions by email enabled". I tried to enable it following the given instructions but it kept giving me the same . Could you assist so I enable the subscriptions.
Thanks

Mohammad Mustafa Ahmedzai on 2:41 PM, November 13, 2009 said... #

@phosi,


Did you inserted your feed title accurately instead of TNTbySTC. You can also use the following dynamic feed URL ->
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Feed RSS</a>
If the probelm persists than let me now so that I could update the post

Phosi on 7:29 AM, November 21, 2009 said... #

The first method was easier, the only problem was that after subscribing, then it showed that my email was not enabled at feedburner.

Mohammad Mustafa Ahmedzai on 4:38 PM, November 21, 2009 said... #

@phosi


Did you solve the problem or not? If yes then thumbs up! :D If not then let me know so that I could update the post

Shreyans on 10:51 AM, November 24, 2009 said... #

Thanks for the tutorials Mohammad. :D
http://macosxstation.blogspot.com/

eBince on 8:47 PM, January 20, 2010 said... #

Sir Mohammad thanks alot, i have learned alot... visit my blog to check... e-shopcenter.blogspot.com ur widget is working fine and I really appreciate it! thanks for being helpful to us@! xD

Mohammad Mustafa Ahmedzai on 9:29 PM, January 20, 2010 said... #

@ebince

Thanks for the kind remarks. I have reviewed your blog. I must appreciate your efforts put into tyour blog. Keep it up. I have also added your blog to E-buckets! :>>

eBince on 11:33 PM, January 20, 2010 said... #

weeee thanks alot sir.. godbless!:)

erwan on 12:44 PM, March 30, 2010 said... #

thanks...

i use this wigdet...

nice too meet you....

Shirohige on 10:30 AM, February 13, 2011 said... #

widget on top is too wide for my blog. is there any way to make it shorter? I've tried to cut the message but it makes a blank space under....and thanks for your attention

Mohammad Mustafa Ahmedzai on 1:21 PM, February 13, 2011 said... #

@Shirohige

May be you will like this one more -> Create a Cute Subscription Form :)

Ashish on 2:41 AM, April 04, 2011 said... #

Hi.
I have a doubt not related with your above post. I want to create a button or say you can say icon as u have made for your own( code: <a href="http:// )so that it can be embedded on others site to link my site. I know how to create image of my own in Photoshop and HTML and CSS. Just i wanna know that how to implement it.
Thanks...

shahbaz on 6:37 PM, July 22, 2011 said... #

thanx friend..
Khuda hafiz
http://internetricks4u.blogspot.com/

Jobs Careers Employment Vacancies on 10:29 PM, November 21, 2011 said... #

It was very interesting for me to read that blog. Thanks the author for it.
I like such topics and everything that is connected to them.

I would like to read more soon.

Farewell on 1:23 PM, January 21, 2012 said... #

Is it possible to get the "subscribe now"-Widget you're using on your blog?

Ebookz Download on 6:06 PM, February 10, 2012 said... #

It look cool.
Thanks

Confused? Feel free to ask

Your feedback is always appreciated. I will try to reply to your queries as soon as time allows.

Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Try the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon my review.

Regards,
Mohammad

 

Recent Posts

Join Me On Facebook

4907+ Followers

Join The Team!

Licensed Under CC

Recent Comments

Follow Me On Twitter

1954+ Followers

| My Blogger Tricks (MBT) © 2012. All Rights Reserved | Contact | About |