May 23, 2011

Widgets

Create Wordpress Subscription Form


image

It's a long time since we last released a widget. The widget today is really a useful one. It is a smart container which displays the total number of subscribers, contains RSS link, Facebook link and Twitter link. It also contains a beautiful subscription form where visitors can submit there emails to receive free website updates. This Widget is made Compatible to work with all browsers especially with IE8.

I named it Wordpress Subscription Form because you might have seen such widgets on every Wordpress blog and Blogger lacks it.

To have a look at our previously designed Subscription Forms kindly visit these links,

Live Demo


How To Create Wordpress Subscription Form?

The steps are made really simple. Follow these,

  1. Go To Blogger > Design
  2. Select an HTML/JavaScript Widget
  3. Paste the code below into the widget

<style>

.mbtbar{width: 100%; float: left;}

.mbtbar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: #fff; height: 45px; line-height: 45px; vertical-align: middle; width: 100%; padding: 0 10px 0 4px;}

.mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: top; padding-right:3px;}

.mbtbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 14px;}
.mbtbar .subicons a{text-decoration: none; color:#333333;}
.mbtbar .subicons a:hover{text-decoration: underline; color:#333333;}

.mbtbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(http://2.bp.blogspot.com/-39kJ8qyqrVs/TdpYPqKjAhI/AAAAAAAADf8/FDkLDuCwF7E/s400/rss.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}

.mbtbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(http://4.bp.blogspot.com/-6_H2QDYGHpI/TdpYPF7LYmI/AAAAAAAADf0/wBev_aveLGw/s400/facebook.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}

.mbtbar .subicons .twittericon{background: url(http://3.bp.blogspot.com/-rbsZjAPUA2c/TdpYQO7m2zI/AAAAAAAADgE/VLRVbnICkZA/s400/twitter.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}

.mbtbar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;}

.mbtbar .emailsub .emailicon{background: url(http://2.bp.blogspot.com/-h72a-fyDTWw/TdpYO0gOhRI/AAAAAAAADfs/s-5_Ckdp-bQ/s400/email.png) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #333; }

.mbtbar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}

.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 200px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: uppercase; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
</style>

<!--[if IE 7]>
<style>
.mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }

.mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; }
</style>
<![endif]-->

<div class="mbtbar"><div class="count">Join <span class="bigcount">1675+</span> People Following MBT</div><div class="subicons"><div class="rssicon"><a href="http://www.mybloggertricks.com/feeds/posts/default" target="_blank">RSS</a></div><div class="fbicon"><a href="http://www.facebook.com/pages/My-Blogger-Tricks/147104632016744" target="_blank" rel="nofollow">Facebook</a></div><div class="twittericon"><a href="http://twitter.com/mybloggertricks" target="_blank" rel="nofollow">Twitter</a></div></div>
<div class="emailsub">
<div class="emailicon">Stay Updated via Email Newsletter</div>
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" 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="10" class="emailupdatesinput" name="email" value="Enter your email..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email...&#39;;}" onfocus="if (this.value == &#39;Enter your email...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Join" class="joinemailupdates" type="submit" /></form></div></div></div>

 

   4.  Save the widget and you are done!

How To Style and Edit the Widget?

Follow these,

  • To Change the the Blue Colour of the Submit button Change #57ABFE to a Light shade and this #0080ff to a dark shade. Our Colour Generator Can help in this case.
  • Replace 1675+ with your Feed count and always update it manually once a week. To change its colour edit this #F17C18 
  • Replace http://www.mybloggertricks.com/feeds/posts/default with your feedburner RSS Feed link.
  • Replace http://www.facebook.com/pages/My-Blogger-Tricks/147104632016744 with your Facebook profile  Link
  • Replace http://twitter.com/mybloggertricks with your twitter profile link
  • Replace http://feedburner.google.com/fb/a/mailverify?uri=tntbystc with your feedburner RSS Email Link
  • Replace tntbystc with the Feedburner RSS Email Title which is always written at the end of your FEED Email Link as shown below,

http://feedburner.google.com/fb/a/mailverify?uri=tntbystc

 

How did you like it?

I would be really pleased to hear about your suggestions and feedback. If you faced any trouble then do not panic and let me know :>

I would appreciate MBT regular readers to kindly advise me whether or not to change MBT's  current Feed Form with this new one because I personally like this new design. =)



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. Dear Mohd,
    I like this one .Its really getting tough to decide which one is better as you do such great work .Keep it up and I would like to try this one very soon in my website as well.
    great going ....
    tc
    Manisha

    ReplyDelete
  2. You should do a correction to the code. Look at this -->.mbtbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 14px;} and here --> .mbtbar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;} . In both the cases, the width is set to 300px. Lots of people have their sidebar to be of 200px only. Instead set the width in percentages . . .

    ReplyDelete
  3. @Manisha

    I thank you Manisha for the kind suggestion. Waiting for more. :>

    @Amit

    You are right Amit but I guess most will be able to do it themselves. If not then they will ask us for sure. :> The %width property has some limitations as it is auto controlled therefore often dis-alignment occurs and the flexibility of positioning things becomes difficult. For example adding an image or text next to that div will cause many problem in positioning it.

    ReplyDelete
  4. Hello Mohammad,
    very nice ant attractive widget but i need 4 tab like by default it has Rss,Facebook,Twitter but i need to add one more SMS..i tried it but all icons are not coming in same line so can u help me.

    Image Location For Sms : http://i960.photobucket.com/albums/ae87/jeetdholakia/sms.png

    And Link : http://labs.google.co.in/smschannels/subscribe/jeetdholakia

    so can you create this for me?

    ReplyDelete
  5. @Ajeet

    add this code to the CSS part anywhere,

    .mbtbar .subicons .smsicon{border-right: 1px solid #e6e6e6; background: urlundefinedhttp://i53.tinypic.com/14wrkib.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}

    and then replace the HTML part with this,

    <div class="mbtbar"><div class="count">Join <span class="bigcount">1675+</span> People Following MBT</div><div class="subicons"><div class="rssicon"><a href="http://www.mybloggertricks.com/feeds/posts/default" target="_blank">RSS</a></div><div class="fbicon"><a href="http://www.facebook.com/pages/My-Blogger-Tricks/147104632016744" target="_blank" rel="nofollow">Facebook</a></div><div class="twittericon"><a href="http://twitter.com/mybloggertricks" target="_blank" rel="nofollow">Twitter</a></div><div class="smsicon"><a href="http://labs.google.co.in/smschannels/subscribe/jeetdholakia" target="_blank" rel="nofollow">SMS</a></div>
    </div>
    <div class="emailsub">
    <div class="emailicon">Stay Updated via Email Newsletter</div>
    <div class="emailupdatesform">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email..." onblur="if undefinedthis.value == &#39;&#39;) {this.value = &#39;Enter your email...&#39;;}" onfocus="if undefinedthis.value == &#39;Enter your email...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Join" class="joinemailupdates" type="submit" /></form></div></div></div>

    Enjoy! :>

    ReplyDelete
  6. Good for blogger user. I'm searching for such attractive subscription forms for WordPress.

    ReplyDelete
  7. Great bro, you've also started serving WordPress based bloggers

    ReplyDelete
  8. Thank a lot Mohammad,
    buddy you are helping me a lot.
    thank you so much..

    ReplyDelete
  9. @Digital

    It can be added anywhere. It can work on wordpress far better. :>

    @Sreejesh
    Thank you buddy. Great to hear from you after so long. I hope you are doing great. :>

    @Fahad
    Congarts! :d

    @Jeet
    Please do not mention that. You are always welcomed. :)

    ReplyDelete
  10. Thanks a lot for this Mohammad.
    How was the finals?

    ReplyDelete
  11. Hey Good one buddy I dont think so if there are sites like this I need to learn html,css too I added this to my site but dont know nothing appeared atall hmmm trying other forms will update @expertsgalaxy

    ReplyDelete
  12. @G

    Thanks pal. BTW what finals? :>

    @Neeraj
    Thanks bro. You can learn it from www.w3schools.com :>

    ReplyDelete
  13. can you tell me how we remove logo of any template from stylesheet

    ReplyDelete
  14. I have been reading your posts daily and it is really helpful for a newbie like me. I really liked the widget. But I want a google plus icon too. So can you help me with that?
    Please send me the code!!

    ReplyDelete
  15. how i can put my feed counter like you have?

    ReplyDelete
  16. You site is awesome,i come often to find new things that can improve my site.I just opened new blog,and taking lots of trick from your site.
    Now im working on this subscription box,give a look soon at my site
    http://footygo.blogspot.com
    Keep with good work.Best regards

    ReplyDelete
  17. Please help!!! When someone enters the Email in the subscription box, it gives a error saying: The feed does not have subscriptions by email enabled.

    cooltricks.in is my blog.

    Please reply and please help as soon as u can!!!

    ReplyDelete
  18. @kuldeep

    You must make these changes:

    Replace http://feedburner.google.com/fb/a/mailverify?uri=tntbystc with your feedburner RSS Email Link

    Replace tntbystc with the Feedburner RSS Email Title which is always written at the end of your FEED Email Link as shown below,

    http://feedburner.google.com/fb/a/mailverify?uri=tntbystc

    ReplyDelete
  19. @Mohammad Bro,
    Plz add Google + icom to it as you have in your sidebar
    Do follow blogs list,SEO tips

    ReplyDelete
  20. Hello Muhammad, First of all congrats!!! Your all posts are too valuable..:-)
    Would you please help me to add one more icon to this Wordpress Subscription Form.
    I mean I like to include Google+ icon too.. Like in your blog. Please help me..

    ReplyDelete
  21. Hi Mohammed

    great site... and very useful tutorials..

    friend,
    how to link logos instead of text(rss,Facebook and twitter logo )...please help me.

    also tell me how delete the right side text.

    thanks in advance

    ReplyDelete
  22. Wao, this is fantastic, but am having some difficulty integrating it, the icons are not showing, the twitter, facebook and the rss are not aligned side by side, they are lined one after the other, and the colors are not showing, pls what can i do. here is my blog, u might want to check it.www.makeeasymoneyng.com. thanks

    ReplyDelete
  23. hey how can i resize it..? It's too big for my sidebar..? wat to do to resize it without any changes in the form.

    ReplyDelete
  24. Dear...its superb one..still i want to ask..if i want to change width of the box then in code where should i change ?

    ReplyDelete
  25. Hi Mohammad,

    Thank you for this awesome tutorial. Something I have been looking for.
    Just wonder how can I change the facebook to google +1. I don't use facebook , but I use google +1

    thanks

    Fabriano

    ps follow you on google +1

    ReplyDelete
  26. Assalamualaikum, Lot of Thanks. Amazing Post. It is very suitable post.


    Enjoy Freeware Software
    http://freeware9.blogspot.com/

    ReplyDelete
  27. I would like to inform you that your articles are being copied and translated. see here:

    http://www.dicasparablogger.net/2012/05/caixa-simples-de-assinatura-de-feed-no.html

    ReplyDelete
  28. hi plz help me i really like this widget but its not working properly in my blog.

    ReplyDelete
  29. Hi this looks fantastic but I am just trying to figure out the logic and how it keeps the subscriber in WordPress? Or is it that it just subscribes to Twitter etc?

    ReplyDelete
  30. Thanks Alot Sir, i really appreciate this.
    Dailyschoolnews

    ReplyDelete
  31. This comment has been removed by the author.

    ReplyDelete
  32. @Mohammad Mustafa Ahmedzai
    i want this gadget but there is a problem. when i add this gadget 2 show on first the line and another 2 gadget show on second....i am adding this gadget as like u...how to do it.

    ReplyDelete

Support Us

We have educated thousands of bloggers online and made several people Make a living Online. If our Tutorials have really helped you a little, then kindly show your love by using the badge below:-

Blogger Widgets

or try a Beautiful Banner

Widgets

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!

About The Author

Hi! I am Mohammad, a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. STC Network was founded in 2008 and it is currently the country's first registered company of Professional Bloggers. Read More..

Recipes

SEO Affiliate Marketing Social Media

Make Money Online Web hosting

Blogging Tips Web Designing

Plugins and Widgets Blogging Ethics

Subscribe

Recent Comments

Popular Series

Powered by:

My Blogger Tricks © 2013. All Rights Reserved | Contact |