Custom Header FeedBurner Email Subscription Widget

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 lets heads up and get through the steps you need to apply the widget to your blog.

Before moving on, you may like to see are previous amazing widgets that we shared:

Step #1 Customize the widget

<div class="fixed-widget"><div class="widget-container">

<h1> Get Daily Updates</h1>

<p>Subscribe to BloggingeHow Updates (Free)</p>

<fieldset class="inputs">
<form target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggingehow', '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="bloggingehow" 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="http://www.bloggingehow.com">widgets</a></span>
</div>
</div>
<style>

.fixed-widget p {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVBXT-1qzaPST89lySGBkFj2lovUTG41H3vwsBy51BboKKSap1eyzBT7K3fdpJtn-mOytXFXVnH3vhxIiipbC64cN1zAQHVSs4v7v4vSw6MakGjAyuditSYCxanJtl0EqAaGGSGcXZnsg/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGyZ40EtX1ZkNrltNvMv_oY4XW67ycQ0aXLHnAnqNqD46F9S_zybQtJx2367gO-qS2NmLe2b5bisyRB3tg-O44kE_Txx7s-6S5cPDlX12rzinBGGB5GB71KBAIJ5lCbckaC4LrD9EwFd8/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGyZ40EtX1ZkNrltNvMv_oY4XW67ycQ0aXLHnAnqNqD46F9S_zybQtJx2367gO-qS2NmLe2b5bisyRB3tg-O44kE_Txx7s-6S5cPDlX12rzinBGGB5GB71KBAIJ5lCbckaC4LrD9EwFd8/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbwWS6mV9sWRH8KRqkrhvVc4luZcXM7sdCKCAMHjpHrhGz_CT0ktvsIeK_zZ28YXIsjVbpeIGYkVj108syf7wvwMVlJELx08kHZGBbQu9kXHbb1VlySxNtZxqVnsWL6TZBK8ZWPUdwf9k/s1600/gradient-big-grey2.jpeg") no-repeat scroll center top #F0F1EC;

}
.fixed-widget h1 {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJi9VJp1ndT2rS67QXi4QCa57pWBtZfzuRPpvmJ-_u3sa-PyyBk5iXppkAi6SLJXwN-0BkhyZWK5fKxltlYsaKZCB9eqtYH8Uo_1xcraxZQNduhM2PrHC6IV3jTJ7Tv48M2vHmqW1QewU/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 bloggingehow in both of its occurrence.

That's all, Now in the next step you have to add it to your blog. Before adding the finaly 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 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJi9VJp1ndT2rS67QXi4QCa57pWBtZfzuRPpvmJ-_u3sa-PyyBk5iXppkAi6SLJXwN-0BkhyZWK5fKxltlYsaKZCB9eqtYH8Uo_1xcraxZQNduhM2PrHC6IV3jTJ7Tv48M2vHmqW1QewU/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.

Thats it. Hope that was easy to follow. Now simply place the widget on the places that receive highest CTR and impressions.

For more widgets, you may like to read: