Alhamdulillah I am back to work and today we are going to make a high quality RSS subscription box
with no images or complex scripts. Alerting your visitors to subscribe
at the bottom of your posts often help in increasing the number of your
blog subscribers. The more readers you get the faster your blog grow.
Providing visitors with easy and clean options to subscribe and bookmark
should always be your first priority. I managed to design a simple box
using CSS3 gradient and text shadow effect to create a container with
RSS form inside it. The widget will stick to the bottom of your post and
will let your visitors to submit their email addresses and subscribe to
your FEED updates. Surely the best way to draw attention!Add it to Blogger
- Go to Blogger > Design > Edit HTML
- Backup your template
- Check the "Expand Widget Template" box
- Search for this,
<data:post.body/>5. Just below it paste this code,
<style>Now make these changes,
#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 == "item"'>
<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('http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == "") {this.value = "Enter Your Email Address...";}' onfocus='if (this.value == "Enter Your Email Address...") {this.value = ""}' size='30' type='text' value='Enter Your Email Address...'/> <input name='uri' type='hidden' value='tntbystc'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='Subscribe'/></center></form></div>
</b:if>
- Edit the highlighted yellow text to anything you like. It will appear at the top of the input box.
- Now replace http://feedburner.google.com/fb/a/mailverify?uri=tntbystc with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
- Replace tntbystc 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=tntbystc
Visit your blogs to see the new eye-catching change. I am sure this will greatly increase the number of your blog subscribers. My coming posts will share different color variations of the same widget. I hope you find it help. :)