AWeber Style Email Subscription Widget Box

aWeber Style email subscription widget
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:


Step #2 Add the Widget To Your Blog


Now simply go to your Blogger Dashboard >> Design >> Add a new Gadget and paste the entire code with in it and hit save. Done! Easy as a pie.smile

I hope you guys would like the widget. Do leave out your feedback in the comment section below. It helps a lot.smile


Previously on BloggingeHow:

COMMENTS

.
Name

AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
false
ltr
item
BloggingeHow | Making Blogging Simpler: AWeber Style Email Subscription Widget Box
AWeber Style Email Subscription Widget Box
http://1.bp.blogspot.com/-jiDPokcDr6A/UCRMOUi2FLI/AAAAAAAAFYU/eZWviDx9MZ8/s1600/aweber+style+email+subscription+widget.png
http://1.bp.blogspot.com/-jiDPokcDr6A/UCRMOUi2FLI/AAAAAAAAFYU/eZWviDx9MZ8/s72-c/aweber+style+email+subscription+widget.png
BloggingeHow | Making Blogging Simpler
http://www.bloggingehow.com/2012/08/aweber-style-email-subscription-widget.html
http://www.bloggingehow.com/
http://www.bloggingehow.com/
http://www.bloggingehow.com/2012/08/aweber-style-email-subscription-widget.html
true
5839591175544873606
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy
Resources

Tools of the Trade