Blogging Ethics

MBT Tube

January 8, 2011

Create a Cute Subscription Form


Subscription-form I have already shared many tutorials on RSS Subscription forms such as Subscription Email Form and Subscription Feed Widget and today we have yet another but extremely beautiful and easy to edit subscription form dozed with new CSS effects. This widget will keep your sidebar neat and clean and will surely attract visitors to subscribe.

 

Live Demo

 

How To Add this Subscription Form To Blogger?

  1. Go To Blogger > Design > Page Elements
  2. Choose HTML JavaScript Widget
  3. Paste the following code in it,

<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:#9B9895;
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 class="mbt-email">
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=TntByStc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" 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 email address here" type="text" />
<input type="hidden" value="TntByStc" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
</div>

 

 

Now make these changes,

  • Now replace http://feedburner.google.com/fb/a/mailverify?uri=TntByStc with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
  • Replace TntByStc with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=TntByStc

Save your widget and view your blog to see it showcasing live! :)

That’s All!

Do let me know if you needed any help in customizing the widget.





If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

38 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Really Awesome , I Have added it in my blog

    ReplyDelete
  2. Hey Why you deleted my previous comment?

    ReplyDelete
  3. Thanks a lot Mustafa, i changed mine to yours already,love it
    Have a nice day ahead
    http://theasianpunter.blogspot.com

    ReplyDelete
  4. can sometimes occur clashed code, if already been invested tricks
    "Uncustomized and Customized Text Areas"
    must be considered in the code textarea
    hihihi...cheers^^

    ReplyDelete
  5. Another great creation. This widget is to large for the 3 column templates though that somtimes do not even have a 200 width :(

    ReplyDelete
  6. @Myworld4free

    Its due to the new blogger spam thingy. I never delete valuable comments like yours :)


    @TAP
    I am delighted to know that it worked for you brother. :>

    @beben
    Dude I never get what you say :P but I still love your comments.

    @Noor
    Noor you can adjust the width. Simply change the width in,

    .mbt-email{
    background:url(http://i53.tinypic.com/2igja0n.png) no-repeat 0px 12px ;
    width:300px;<--Make it equal to your sidebar size
    padding:10px 0 0 55px;
    float:left;
    font-size:1.4em;
    font-weight:bold;
    margin:0 0 10px 0;
    color:#686B6C;
    }

    and

    .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; <-- Keep it half the size of your sidebar
    color:#666;}


    hope this helps :)

    ReplyDelete
  7. The tinypic image link is dead.Please give another link.

    ReplyDelete
  8. Hello Mohammad,
    i am using your this widget but from today instead of showing the image its show tinypic logo that means the image has been deleted.
    so plz do the need full thing.
    thank you.

    ReplyDelete
  9. Update:

    Here is the new code. Instead of the first CSS property use this,


    .mbt-email{
    background:url(http://4.bp.blogspot.com/-pQIpioiF0d0/TVeTBKPerKI/AAAAAAAADVc/uwcRm4KCa8k/s400/mail2.gif) no-repeat 0px 21px ;
    width:300px;
    padding:10px 0 0 55px;
    float:left;
    font-size:1.4em;
    font-weight:bold;
    margin:0 0 10px 0;
    color:#686B6C;
    }




    Or if you want to use a different icon then use this,

    .mbt-email{
    background:url(http://2.bp.blogspot.com/-4btQQQcE1cc/TVeTBDHQ7RI/AAAAAAAADVk/2d-n5MXzhNE/s400/rss-email-icon.gif) no-repeat 0px 15px ;
    width:300px;
    padding:10px 0 0 55px;
    float:left;
    font-size:1.4em;
    font-weight:bold;
    margin:0 0 10px 0;
    color:#686B6C;
    }



    Humble apologies for the inconvenience.

    ReplyDelete
  10. And to use the same image with same coding use this image link,

    http://4.bp.blogspot.com/_MbejYjGokMM/TSeZHmWJ6oI/AAAAAAAAALE/93ELYyzmi64/s1600/email.png

    ReplyDelete
  11. Hello Mohammad,
    thank you so much for the update.

    ReplyDelete
  12. you are amazing.
    this is what i wanted for ages.
    thank you so much, wonder if you want to check my blog.

    ReplyDelete
  13. Hey, Thanks..
    I have added as u explained..
    http://sms2loveu.blogspot.com

    ReplyDelete
  14. i added this. thank friend:)

    http://www.bloggertrix.com/

    ReplyDelete
  15. great widget! thank you for this!!!!!

    ReplyDelete
  16. Hello how are you brother.i am Mohmmad sajid saleem.i want to know which comments system are you using.can i add this in my blog plz help brother

    ReplyDelete
  17. hey thanks for the widget, can you do the needful for IE7 as you did in here http://www.mybloggertricks.com/2011/05/create-wordpress-subscription-form.html

    ReplyDelete
  18. Good stuf friends
    http://internetricks4u.blogspot.com/

    ReplyDelete
  19. This is a very good thing. I think, we can stop focusing on the technology and just focus on using what we already have, and making interesting and engaging performances instead of spending hours upon hours of learning how to use and configure new gadgets. Thanks for this post.
    web design hampshire

    ReplyDelete
  20. Resources like the one you mentioned here will be very useful to me! I will post a link to this page on my blog. I am sure my visitors will find that very useful.
    Link Building Company India

    ReplyDelete
  21. I installed it on my blog and it works good. You can see this. Many free ways to make money online

    ReplyDelete
  22. Salam bro.
    Thank you for all the help you provide us.
    I used this form, but the window popping contains my blog description not the title :-(

    http://dl.dropbox.com/u/51645745/Images%20CLICKADDICTION/Screenshot_1.png

    How can i change this please ?

    ReplyDelete
  23. very cool and cute..

    work very well

    ReplyDelete
  24. Somehow I keep getting back to your site every time I google a blog problem. I used your drop down menu, customized my comments section with your help and solved various other tweaking problems.
    Also I used - and customized - this email widget. I would like to ask if it is possible to place the submit-button underneath the bar where you type your email address. I've been puzzling over this and cannot find a solution. Maybe it cannot be done, but who knows ...
    Thanks for all your great work and (if it can be done) hope to hear from you.
    Pieter

    ReplyDelete
  25. @Pieter
    You are always welcomed here brother.
    To push the submit button to a new line simple increase the width of the text area from 170px to 250px. Edit the bolded part of this code:

    .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;}


    Change it to width:250px;

    It would work just fine. :)

    ReplyDelete
  26. @Mohammad Mustafa Ahmedzai

    Thanks Mohammad for your speedy reply.

    Tried it and it doesn't work. the email field runs out of the sidebar and the submit button dissappears completely. I've currently set it to 100 px to align with the image I'm using. Not ideal but elegant enough for my tastes.

    Thanks again and if I may I will be back (I'm currently reworking your floating +1 widget to suit my designs),


    Pieter

    ReplyDelete
  27. Hi I am a bit confused with feedburner I think I got my email link but not sure, here is what I put into my gadget on blogger but when I tried subscribing it subscribed me to your tips not my blog? Any tips? Total newbie on HTML btw. The end of my feedburner says travellingfootprints/pNBf would this be right? Appreciate any help you can give me. Thanks Oh and also how do I make it narrower as it goes off my sidebar, thanks.

    ReplyDelete
  28. Sir I have feed burner id. How i can find my id in feed burner for this cute email Subscription form.Please Help me
    Plzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz Help me...

    ReplyDelete
  29. thank you !! I Have added it in my blog.
    nice Post !!

    ReplyDelete
  30. Thanks so much .I've applied your tips to my blog which is ban to yen sao .Your blog is so useful to me.

    ReplyDelete
  31. hey bro thanks for this widget now i using this on my jobs blog

    ReplyDelete
  32. Hello,
    I followed all the instructions however I got this message
    he feed does not have subscriptions by email enabled

    ReplyDelete

Widgets + Web Designing

Workshops

SEO Mashup