Add Attractive Subscription Box Widget for Your Blog

Hey Guys, Checkout this cool Attractive Subscription Box   widget for blogger.

 If you want to add this widget to your blog just follow this simple steps.



1.Go to Blogger > Layout
2.Click on 'Add a Gadget'
3.Choose HTML/Javascript
4.Copy Paste the code given below inside it.



<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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXG8faRiA4V1pqRBj59LMCMmop-q7-mCvXDhPZYWvbZ9l059U2jTTDiDL34YtK59geKM3TqmSO2Fv9hDe8TjdMQa8_6trljjsd5ipuz-bmLfpM1GlAbtyzcOoOkw9EdAsMHtXPXcrI33r/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXG8faRiA4V1pqRBj59LMCMmop-q7-mCvXDhPZYWvbZ9l059U2jTTDiDL34YtK59geKM3TqmSO2Fv9hDe8TjdMQa8_6trljjsd5ipuz-bmLfpM1GlAbtyzcOoOkw9EdAsMHtXPXcrI33r/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrg54-16q548LxRf20fHPckTS_ibNkkG0HhygwmEjfd48v9vjxlF71omZkt0iufcaMXHoECHJVL7E3JYjo2HnZol-6ZesWvIJsqydwHfY8LULESll8_lpDhcXya_A_JLoa57shkTMNXqaJ/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 latest posts straight to your Inbox!</h4>
<p>Join us for latest posts as soon as they're published (We 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=zgamerx', '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="zgamerx">
<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  zgamerx to yours .
6. Save the Gadget .


 That's All .

Have any problem, Please comment.