Create Wordpress Subscription Form

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,

• Subscription Form -1
• Subscription Form -2
• Subscription Form -3
• Subscription Form -4

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNDHqd2EnCntBhvN_pMEVMjh9dMw_Mj6Ko705StjOZy3yanwXT8RhcqCQFyd5Dw_B3ngy7oegSSn0EaKiuie_nHC94LMf7x0ugdoMpReTkVrXqOn6M7OgkreiN0s9gpM8ZzEhlPWolWgE/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjszh9RNnEZNIm0NgYU0Bh-tMExkDMYRTjOd37VrGUntyIFwEaOl23TqpOzqBE5K3ji1NWFo-UHR1SoXBbS2fx4zcRFGSxsJYF8dejGBRdVW4SK00jPBEFV6bjchKcZ6_W6Hy8Jwa6YVEs/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLvmWG20lAEOkb8uXstEU8SgFiboQWHdbn7faodvEFSTvS2UgOosZDwbFNlTa3xxMwPdxcMfdNR5_9Shrl_9rSt-4frOn3R6NfN1WB8QxiX5e6PqP0N2x5PD2Ewk0RZwrzD1cZsiLf5hY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguSsr17J4LE6WaGPytUfnyU8YlND2BVH0jnocKrBK8sxfbvKBRsB73SyfGDEG8HwFQ4PkPM5A15m7a7V4qoHbdQxieN7fDNLaFSYnYCNFtDDndBSGvQPW6wNXziutpkS4T-LRhHpnX1p0/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. =)

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

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 »

Mohammad 5/23/2011