Create a Cute Subscription Form

Today i m going to share another beautiful widget with my friends. This widget is effective as well as attractive and are made of new CSS effects Mustafa Ahmadzai of mybloggertricks created this beautiful widget with the help CSS. With this widget your visitors will keep in touch through email. When you update your blog with new posts your visitors your will inform with email through RSS Feeds about posts of your blog if your visitors subscribed you then. This widget will keep your sidebar neat and clean.

Live DemoIf you want to add this cute subscription box into your blog follow the below steps. 

• Login To Blogger>Design >Page Elements
• Goto layout and click on HTML JavaScript
• Copy the below code and paste it in HTML JavaScript

<style> .mbt-email{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipyLlYO65whLcEfkPcIcerSwtmNowKKfmiKdcFlHxBAP6EbMHKdpfzzwYCdVhyphenhyphenwzZ8dq4VvYSNhS4D6P8yX6G7T11MK_QWD0vDCvkRXNmly5f2TwC9opwJzqnax_Fjjf9hmbWLmn-7Wjcg/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=truebloggingtricks', '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="truebloggingtricks" name="uri"/><input type="hidden" name="loc" value="en_US"/> <input class="mbt-emailsubmit" value="Submit" type="submit" /> </form> </div>

• Now just replace http://feedburner.google.com/fb/a/mailverify?uri=truebloggingtricks with your own feed burner link just visit feedburner.com click on Publicize then click on Email Subscription and fined your feed burner link in small box.
• Also replace truebloggingtricks with your feed burner name.
• That's it save your widget and view your blog :)