Subscription box: Add this fancy one below all your posts

Subscription box I know this word  is not new to you but if it is, subscription box is a box where visitors on your blog submit their emails and they will be alerted anytime you post new topics, it alerts your visitors and increase your page views

Today I'm bringing a self customised rss subscription box, this box is created mainly with CSS3, so it's very light and easy loading
I initiated it to the point that it will appear below every post just like ours

If you for one reason or the  another,you can't edit your template and you would like to implement any tutorial on this blog including this tutorial,don't worry, just subscribe to this blog below with your email address and then comment on the post you want me to do for you... I'll get it done for you for FREE 

How to add this subscription box below every post 

===)> login to your Blogger dashboard

===)> go to template and then edit html   <always backup your template before editing it >

===)> use control F To find this code below

<data:post.body/>

===)> just below the above code, paste this below code

<style>
#mbt-sub-box{background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#1a2638));;border:1px
solid #1A2638;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #333, #1a2638)}
#mbt-sub-box h1{margin-top:5px; color:#FFF;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}
#mbt-sub-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}
#mbt-sub-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));background: -moz-linear-gradient(center top , #369A18, #205F0D) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}
#mbt-sub-box .submit:hover{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
#mbt-sub-box .submit:active{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='mbt-sub-box'><h1> Subscribe To Get FREE Tutorials!</h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos; http://feedburner.google.com/fb/a/mailverify?uri=waplordcrib&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email Address...&quot;;}' onfocus='if (this.value == &quot;Enter Your Email Address...&quot;) {this.value = &quot;&quot;}' size='30' type='text' value='Enter Your Email Address...'/> <input name='uri' type='hidden' value='waplordcrib'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='Subscribe'/></center></form></div>
</b:if>

                Customise it

• Firstly Edit the highlighted yellow text to anything you like

Note:it  will appear at the top of the subscription box.

 Replace http://feedburner.google.com/fb/a/mailverify?uri=waplordcrib with your Feedburner Email Feed link.

You can get yours by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
Replace waplordcrib  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=waplordcrib

6. Save your template and you are all set!


I'm waiting for your comments and replies 

About author
Crystalblogger is a professional blogger,a skillful Web designer and a freelancer ,he offers services based on blogging and Web designing you can contact him here at info@waplordcrib.com