Attractive Subscription Box Widget for Your Blog

Hello Friends! Now again I have come with Subscription box, Because your Email subscribers are loyal readers of your blog. So we should give more attention on our subscription box. After a long hard work, I have designed this attractive subscription widget for blog. This subscription box is something different from others. Its having in built Subscription heading with a cool message, so It can attract more visitors to use this box and subscribe your blog RSS. through Email. This widget full supported by Blogger as well WordPress blog. To get this widget for your blog follows these steps

LIVE DEMO

Steps to Add Subscription Box Widget [For Blogger Users]

First go Blogger > Design > Page Element
Add a Gadget in Sidebar
Choose "HTML/JavaScript" Gadget
paste the following code in the Gadget Area

<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<style type="text/css" media="all">
.pbtsidebar {
    display: inline;
    float:left;
    font-size: 14px;
    text-shadow: 1px 1px #fff;
    width: 300px;
    margin-left: 10px;
}
.pbtsidebar .widget-wrap {
    padding: 30px;
}
.pbtenews #subbutton {
    -moz-border-radius: 3px;
    -moz-box-shadow: 0 1px 1px #a24a1d;
    -webkit-border-radius: 3px;
    -webkit-box-shadow: 0 1px 1px #a24a1d;
    border-radius: 3px;
    box-shadow: 0 1px 1px #a24a1d;
    background: url("http://3.bp.blogspot.com/-kRxX5fS0DUk/T2rkxrF2ovI/AAAAAAAABJQ/QHd_uiSZdzs/s1600/button-light.png") 0 0;
    border: none;
    color: #333 !important;
    font-size: 14px;
    font-weight: bold;
    margin: 0 auto;
    padding: 10px 15px;
    text-shadow: 1px 1px #fff;
    text-transform: uppercase;
}
.pbtenews #subbutton:hover {
    background: url("http://3.bp.blogspot.com/-kRxX5fS0DUk/T2rkxrF2ovI/AAAAAAAABJQ/QHd_uiSZdzs/s1600/button-light.png") 0 -40px;
}
#pbtsidebar .pbtenews {
    background-color: #e96a2a;
    margin: -30px;
    min-height: 201px;
    padding: 1px 20px 15px;
    text-align: center;
    }
#pbtsidebar .pbtenews p {
    color: #fff;
    text-shadow: 1px 1px #a1491d;
    font-family:'PT sans';
}
.pbtenews #subbox {
    -moz-box-shadow: 1px 1px 3px #ccc inset;
    -webkit-box-shadow: 1px 1px 3px #ccc inset;
    background: #fff url("http://2.bp.blogspot.com/-XUW84Io_4jE/T2rkyvQMOaI/AAAAAAAABJU/rBcfSJOMjNg/s1600/enews.png") center left no-repeat;
    box-shadow: 1px 1px 3px #ccc inset;
    border-left: 1px solid #9e6e56;
    border-top: 1px solid #9e6e56;
    color: #aaa49f;
    font-size: 11px;
    font-weight: bold;
    margin: 0 10px 15px;
    padding: 14px 10px 12px 50px;
    text-transform: uppercase;
    width: 185px;
}
#pbtsidebar .pbtenews h4 {
    margin-bottom: 10px;
    text-shadow: 1px 1px #a1491d !important;
    margin-top:12px;
    line-height: 1.2em;
}
.widgettitle{
font-family:'PT sans';
text-transform:uppercase;
background: none;
    color: #fff;
    font-size: 23px;
    padding: 0;
    text-align: center;
}
</style>
<div id="pbtsidebar" class="pbtsidebar widget-area">
<div id="pbtenews-12" class="widget pbtenews-widget"><div class="widget-wrap"><div class="pbtenews"><h4 class="widgettitle">Get my latest posts straight to your Inbox!</h4>
<p>Join over 100 smart readers who get my latest posts as soon as they're published (I respect your privacy and will never spam you). </p>
<form id="subscribe" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onSubmit="window.open( 'http://feedburner.google.com/fb/a/mailverify?uri=ProBloggingTools', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" value="Enter your email address..." id="subbox" onFocus="if ( this.value == 'Enter your email address...') { this.value = ''; }" onBlur="if ( this.value == '' ) { this.value = 'Enter your email address...'; }" name="email">
<input type="hidden" name="uri" value="ProBloggingTools">
<input type="hidden" name="loc" value="en_US">
<input type="submit" value="Sign up" id="subbutton">
</form>    </div></div></div></div>

5. Edit RSS subscription URI ProBloggingTools to yours
6. Save the Gadget and Visit your blog to see this Widget.

For WordPress Users

Go to Dashboard > Appearance > Widget
Choose "text" widget.
Paste the above code in the Widget area.
Edit according the above steps
Fix the position and save the widget.

Further Customization

If you want more customization, like Widget Message then edit the colored lines in the above code. If more than, do comment here.

Credit

This Subscription is developed by Dannybrown and Further customized by PBT. IF you want to share it with your friends then you have to give a link back to this blog.