Add Beautiful Rss Feed Subscription Box to Blogger,WordPress

How to Add Beautiful,Simple Rss Feed Subscription Box For Blogger,WordPress

Today I am going to explain how to add a beautiful Rss Feed subscription box to blogger , WordPress using this simple widget HTML Code. users can add their emails and subscribe your Rss feed.This is a simple and  widget,So you can add it to your blog easily.This is compatible with every browsers.

  <style>
.bordered {
    border: solid #ff7417 2px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;       
}
.bordered2 {
height: 25px;
    background-color: #ff7417;
    -webkit-border-top-left-radius: 6px;
    -khtml-border-radius-topleft: 6px;
    -moz-border-radius-topleft: 6px;
     border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -khtml-border-radius-topright: 6px;
    -moz-border-radius-topright: 6px;
     border-top-right-radius: 6px;     
     text-shadow: 0 1px 0 rgba(255,255,255,.5);
     border-top: solid #ffffff 1px;
}
</style>
<div class="bordered">
<div class="bordered2">
<center>
<span style="color: #ffffff; font-size: 16px;"><b>Subscribe Now</b></span></center></div>
<a href="http://feeds2.feedburner.com/egytricks" rel="alternate" title="Subscribe now to avail the unthinkable" type="application/rss+xml"><img border="0" alt="" style=" padding-bottom:20px; margin: 0pt 10px 10px 0pt; float: left; width:100px; height:100px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib-zJO2dUdLsX7lp93M1JNEMEFusaSJ5X1lGwioIn5lhyphenhyphenz8WxsRXvlQivWRhS7tDYBRIw52xb6uBKmek6xa7Wj14CbUCg_scGfJsJARcEzZCQk-btbuiZeGE9CIB_qVAxz_5vFy-3Cz8k/s1600/RSS-Reader-Book-icon.png"/></a><p><a href="http://feeds2.feedburner.com/egytricks" rel="alternate" title="Subscribe to my feed" type="application/rss+xml">Get free email updates </a><span style="color: #ffffff; font-weight: bold;">By submitting your email address here</span></p>
<style>
input.bt {
color:#fff;
font: bold 10px Arial, sans-serif;
background:#ff7417;
border:0;
padding:3px;

}
input.bthov {
color:#fff;
font: bold 10px Arial, sans-serif;
border:2px solid #ff7417;
padding:3px;
}
</style>
<form action="http://feedburner.google.com/fb/a/mailverify" style="padding: 5px; " target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=egytricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input style=" color:#ffffff; background: #fff; border:1px solid #ff7417; width: 90px;" name="email" type="text"/>
<input value="egytricks" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/> <input onmouseover="this.className='bt bthov'" onmouseout="this.className='bt'" value="GO!" class="bt" type="submit"/></form><br/>
</div>

Now Replace egytricks with you Feed name/URL and #ff7417 with your HTML COLOR CODE

All done enjoy ...