Add stylish subscription widget to your blog

So in this tutorial i will teach you how to add stylish subscription widget to your blog.As you all know that blog without a subscription box make no sense.I recommend you to keep your blog in a good condition.If you have a subscription box then your blog gain more traffic.you can get any subscription widgets very easily just paste their coding in to your blog.today in this tutorial i have a great looking awesome subscription widget for you which you can add your blogger blog very easily.Adding this stylish subscription widget to your blog is very simple.you may need to follow just simple steps.

HOW TO add this widget to your blog

1. Go to blogger >> Layout
2. Add a Gadget >> Add an HTML/JavaScript Widget
3. Now just copy all below code and paste it inside HTML/JavaScript Widget

<style> #salahuddin-ayubi { border: 0; margin-bottom: 10px; margin: 0 auto; width:300px; } #email-news-subscribe .email-box{ padding: 5px 5px; font-family: "Arial","Helvetica",sans-serif; height:38px;} #email-news-subscribe .email-box input.email{ background:#FFFFFF; border: 1px solid #dedede; color: #999; padding: 7px 10px 8px 10px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; border-image: initial; font-family: "Arial","Helvetica",sans-serif;} #email-news-subscribe .email-box input.email:focus{color:#333} #email-news-subscribe .email-box input.subscribe{ background: -moz-linear-gradient(center top,#666 0,#333 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#666),color-stop(1,#333)); font-family: "Arial","Helvetica",sans-serif; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #333; color:white; padding:7px 14px; margin-left:3px; font-weight:bold; font-size:12px; cursor:pointer; border-image: initial;} #email-news-subscribe .email-box input.subscribe:hover{ background-image:-moz-linear-gradient(top,#333,#666); background-image:-webkit-gradient(linear,left top,left bottom,from(#333),to(#666)); filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb); outline:0;-moz-box-shadow:0 0 3px #999; -webkit-box-shadow:0 0 3px #999; box-shadow:0 0 3px #999 -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00); border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #333; color:#FFFFFF; } #other-social-bar { padding: 0px; overflow: hidden; height:37px; margin-top:-8px; } #other-social-bar ul {list-style: none outside none; padding-left: 4px;} #other-social-bar .other-follow { float: left; overflow: hidden; padding:5px; width: 270px;} #other-social-bar .other-follow ul { list-style: none outside none; padding-left: 4px;} #other-social-bar .other-follow li { display:inline; border:0; } #other-social-bar .other-follow li a { font-size: 12px; color:#666; font-weight: bold; font-family:arial; display:inline; } #other-social-bar .other-follow li.my-rss { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhScklS8sqyf0PHDad_W5hK1f_SwdWtFRx1jYKmVAc8v6t9NZW0UXYE0_meQSjHb72pHbn65rOGOVRL5c7IDAvzBP_IOEp7BJPishp5C0onzEXKQgpwXgNid-Yk_pICvd44HUHJUAOewyI/s400/rss-16x16.png') no-repeat transparent; line-height: 1; padding: 0px 3px 1px 20px; width: 60px; margin-bottom:0px; margin-left:5px;} #other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{ text-decoration:none; } #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{ text-decoration:underline; } #other-social-bar .other-follow li.my-twitter { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4bnfNBzUZviL4XOT-Fk2gNgak0sB25Qo180wNyvxi6alg8yOhuqKh7M1kWI6cvvnxTP8byisZ0vHRcOBqtz-wBr8Tsnt37bVgdP-qXDi1_HeGUWXfpigtzl1NVeAaQ8OfSNcnNgDTg0/s400/twitter%2527.png') no-repeat transparent; line-height: 1; padding: 0px 3px 1px 20px; width: 60px; margin-bottom:0px;} #other-social-bar .other-follow li.my-gplus { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTdEYSy2w-DheU5vbpd8_i6cTGLK56F7cb6jkoGIYaxJ2ONPxzFoUdOZ9V4Oly6yFMtwiViUGY8poRzf_w54R7cebriH0NyGuvASla1mVvYhHqnKI73Uf6IZNjfQpMh8gJjKPKm_kQe1g/s400/gplus-16x16.png) no-repeat transparent; line-height: 1; width: 60px; padding: 0px 3px 1px 20px; margin-bottom:0px;} .emailicon { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm6SASm_z6kC7CDpIJKdtaKoD5KhxFi5G2nDK8B714NrOTJWIUP9blqMRcXCxUICBnAA2IKjcVsjAeYU0tIjc_fdSeOmSGa7uwrgaGWtPqMMVg06rhL3FBwpBAMNZfQOK3aPGtAN3ggleX/s400/MBT-RSS-FEED.gif") no-repeat scroll 0px 2px transparent; padding: 0px 20px 0px 95px; min-height:100px; margin: 0px; width: 183px; line-height: 20px; vertical-align: middle; font-size: 14px; color: rgb(51, 51, 51); } .emailicon p { color:#FF8604; font-size: 20px; font-weight: normal; font-family: impact; padding:40 0px 10px 0px; margin:0; padding-top: 20px; line-height: 25px; text-shadow: 0px 1px 0px #fff, 0px 2px 0px #C6C6C6; } </style> <!--[if IE]> <style> #email-news-subscribe .email-box input.subscribe{ background: #333; } </style> <![endif]--> <div id="salahuddin-ayubi" > <div class="emailicon"> <p> Subscribe to our Free Email Updates! </p> </div> <div id="email-news-subscribe"> <div class="email-box"> <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="email" type="text" style="width: 160px; font-size: 12px;" id="email" name="email"value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" /> <input type="hidden" value="apnichoice" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div> <div id="other-social-bar"> <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/YOURFEEDLINK" target="_blank">RSS Feed</a> </li> <li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="http://twitter.com/YOURNAME" target="_blank">Twitter</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/+yourplusid target="_blank">Google Plus</a> </li> </ul> </div> </div>

CUSTOMIZATION

1. Replace feedburner id with "your feedburner id"
2. Replace twitter username with "your twitter username"
3. Replace google plus id with "your google id"

Thats all save your widget

If you face any problem while adding this widget kindly leave your comment below so I will help you