AWeber Style Email Subscription Widget Box

Many praise aWeber (leading auto responder service) for their awesome service powered by, out of the world customer support. With them achieving a remarkable email delivery rates, they have won the hearts of many online. What we really appreciate them is for their amazing, decent email subscription boxes that comes in with the package for free, truly pump up the entire game. There are so many designs to choose from, whether it is for sidebars, footers or headers.

Today we have tried to come up with an elegant looking aWeber Style email subscription box that you apply to your blogs and increase subscription rates. The color scheme its self attracts eye balls, that can boost your email opt in rates.

You may like to read:

There are 2 other email subscription widgets that we shared before.

Simply follow the steps below to add the subscription widget on your blogs.

Step #1 Customize The Code Below

/* BloggingeHow aWeber Style Email Subscription Widget */

<div class="subscribe_outer">
<div class="subscribe_wrapper">
<h5>Subscribe Via Email</h5>

<p>Enter your email to get free access to The Blogger Resources and Updates from bloggingehow.com.</p>
<div id="btntEmailsub">
<form class="btntEmailform" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your Feedburner Username', 'popupwindow', 'scrollbars=yes,width=300,height=520');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="Your Feedburner Username" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<input class="emailText" type="text" value="Enter your email..." onfocus="if (this.value == " enter your email...") {this.value="" }" onblur="if (this.value == " ") {this.value="enter your email..." ;}" name="email" />
<input class="emailButton" type="submit" value="Signup Now! (FREE)" title="" />
</form>
</div>
<p style=" line-height:0px; font-size:7px; font-weight:bold; text-align:right"><a style="color:#D3D3D3;" href="http://www.bloggingehow.com">widgets</a></p>
</div>
</div>

<style>

.subscribe_outer {
    background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/color-chronicl.gif") repeat scroll 0 0 transparent;
    margin: 0 -10px;
    padding: 5px 0;
}
body {
    color: #272727;
    font-family: Georgia,"Times New Roman",Times,serif;
}
body {
    color: #272727;
    font-family: Georgia,"Times New Roman",Times,serif;
}
.sidebar .subscribe_wrapper h5 {
    color: #FFFFFF;
}
.sidebar h5 {
    color: #272727;
    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
    font-size: 15px;
    font-weight: normal;
    padding: 4px 0 10px;
}
h5, h6 {
    letter-spacing: 2px;
    text-transform: uppercase;
}
.sidebar .subscribe_wrapper h5 {
    color: #FFFFFF;
}
.sidebar h5 {
    color: #272727;
    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
    font-size: 15px;
    font-weight: normal;
    padding: 4px 0 10px;
}
h5, h6 {
    letter-spacing: 2px;
    text-transform: uppercase;
}
.subscribe_wrapper {
    background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/pattern-chronicl.png") repeat scroll 0 0 #333333;
    color: #CCCCCC;
    font-size: 14px;
    line-height: 20px;
    padding: 38px 50px 18px 38px;
}
.emailButton {
    background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
    font-weight: bold;
    padding: 10px 40px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    width: 100%;
}
.emailText {
    background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/email.png") no-repeat scroll 10px center #FFFFFF;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset;
    color: #444444;
    margin: 0 0 15px;
    padding: 10px 40px;
    text-decoration: none;
    width: 70%;
}
input, textarea {
    font-family: Georgia,"Times New Roman",Times,serif;
}
.subscribe_wrapper {
    color: #CCCCCC;
    font-size: 14px;
    line-height: 20px;
}
.post-body .emailButton {
    width: 300px;
}
.emailButton {
    background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif;
    font-weight: bold;
    padding: 10px 40px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    width: 100%;
}
</style>

What Do You Need To Do?

Simply replace the highlighted sections in the code above to full your needs. Like Replacing Your Feedburner Username with your Feedburner name. For example in our case bloggingehow.

Secondly, you could edit out the paragraph text, button text. But that's totally optional. Changing out Feedburner user name is all what is required generally.

You may like to read: