Many of our readers like to get different styles of email subscription boxes with attractive CSS effects. Another aWeber style email subscription box is here on your disposal. We have an elegant looking header for the widget.
The widget would best suite on a grey background as we have some transparent images filled with few grey backgrounds.
Though you can use it over any other color scheme, but with a little tweak that is listed below too. So let's head up and get through the steps you need to apply the widget to your blog.
Step #1 Customize the widget
<div class="fixed-widget"><div class="widget-container">
<h1> Get Daily Updates</h1>
<p>Subscribe to Blogging eHow Updates (Free)</p>
<fieldset class="inputs">
<form target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=AllBlogThings', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input id="email" class="email" type="text" value="Your Email..." style="width: 192px; font-size: 15px;" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" name="email">
<input type="hidden" value="AllBlogThings" name="uri">
<input type="hidden" value="en_US" name="loc">
<fieldset class="submit">
<input class="sean orange-btn" type="submit" value="Sign up" name="commit">
</fieldset>
</form>
</fieldset>
<span style=" line-height:0px; font-size:8px; font-weight:bold; margin-left:270px;
">
<a style="color:#D3D3D3;" href="https://bloggingehow.com">widgets</a></span>
</div>
</div>
<style>
.fixed-widget p {
background: url("http://1.bp.blogspot.com/-DoJ3WLQmrAY/UCnApalgexI/AAAAAAAAFpo/odnv6uFqyU8/s1600/highlight.png") no-repeat scroll center top transparent;
color: #FFFFFF;
font-size: 14px;
font-weight: 700;
height: 50px;
letter-spacing: 0.08em;
margin: 0 0 10px;
padding-top: 4px;
text-align: center;
text-shadow: 1px 1px 1px #111111;
}
.fixed-widget input[type="text"], .fixed-widget input[type="email"] {
border: 1px solid #D8D9D4;
color: #555555;
display: block;
font-size: 14px;
font-weight: 500;
height: 36px;
margin: 0 0 10px;
padding-left: 6px;
width: 192px;
}
.fixed-widget a:hover {
color: #000000;
text-decoration: none;
}
.fixed-widget fieldset, .fixed-widget form {
margin: 0 auto;
width: 210px;
}
.fixed-widget form {
border-top: 1px solid #E5E5E1;
}
.fixed-widget fieldset.inputs {
border: 0px;
border-top: 1px solid #FFFFFF;
padding-top: 10px;
}
.fixed-widget fieldset.inputs label {
display: block;
padding: 0 0 5px;
}
.fixed-widget fieldset.submit {
border: 0px;
padding: 1 50 10px;
}
.fixed-widget .orange-btn {
background: url("http://2.bp.blogspot.com/-73G7XA1YsAw/UCn6IYKZn_I/AAAAAAAAFr4/b27Pr4zpdjE/s1600/gradient-orange2.png") repeat-x scroll center top #FF6B29;
border: 1px solid #CC5721;
box-shadow: 1px 1px 1px #FFA04D inset;
color: #FFFFFF;
cursor: pointer;
display: block;
align:center;
font-size: 14px;
font-style: normal;
font-weight: 700;
height: 30px;
letter-spacing: 1px;
line-height: 28px;
padding: 0 25 px;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 1px #D35E24;
text-transform: uppercase;
width: auto;
}
.fixed-widget .orange-btn:hover {
background: url("http://2.bp.blogspot.com/-73G7XA1YsAw/UCn6IYKZn_I/AAAAAAAAFr4/b27Pr4zpdjE/s1600/gradient-orange2.png") repeat-x scroll center bottom #FF6B29;
}
.fixed-widget .orange-btn:active {
position: relative;
top: 1px;
}
.fixed-widget {
width: 300px;
}
.widget-container {
background: url("http://4.bp.blogspot.com/-Qnn9-Y1co4o/UCn5-itZlOI/AAAAAAAAFrw/yZ2Jk2uKjtU/s1600/gradient-big-grey2.jpeg") no-repeat scroll center top #F0F1EC;
}
.fixed-widget h1 {
background: url("http://4.bp.blogspot.com/-cnVi7MLrSM8/UCnAocb5GcI/AAAAAAAAFpk/rgBtmoKLHi0/s1600/fixed-sidebar-header.png") no-repeat scroll center top #F0F1EC;
color: #FFFFFF;
font-size: 14px;
font-weight: 900;
height: 60px;
letter-spacing: 0.08em;
line-height: 39px;
margin: 0;
padding-bottom: 10px;
position: relative;
text-align: center;
text-shadow: 1px 1px 1px #D35E24;
}
</style>
Add the title of your choice by replacing the Get Daily Updates text while to replace the paragraph, edit Subscribe to BloggingeHow Updates (Free) text. Next, you have to replace your FeedBurner email ID by replacing AllBlogThings in both of its occurrences.
That's all, Now in the next step, you have to add it to your blog. Before adding the final edited version, you can preview the widget in our Online HTML Editor.
Replacing the header?
To replace the header with a new custom one, simply replace this image http://4.bp.blogspot.com/-cnVi7MLrSM8/UCnAocb5GcI/AAAAAAAAFpk/rgBtmoKLHi0/s1600/fixed-sidebar-header.png link with your new header background link. Make sure that the width of the header is 300x60px.
Step #2 Add the email subscription widget to your blog
Go to Blogger Dashboard >> Layout >> Add a gadget >> HTML/JavaScript. And paste the entire code with in it.
That's it. Hope that was easy to follow. Now simply place the widget on the places that receive the highest CTR and impressions.
Need Help?
In case you're facing any problem, simply leave out your comment below. Stay safe guys!
