Custom Header FeedBurner Email Subscription Widget

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.

<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/AVvXsEitAv2CD83yznRGh1FzW0sX8FpVyWkwC1Ay16dv-1zmzqsT2S8zAfkoqs0q73vTX_B72sttVvKX-TN2vEgeqdl1iVr3EXZNqdNQy-XFCFz4JIoOpjcREZp9G1iE3smmh5ep2Pv7RUCyTQc/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/AVvXsEiXNd4bOrr96sWDZ37NeqFUPxzsWGQMSs40AwFtyF2VE50Hzv0zKCOnnoD3ZTUvNZCgYew3xD6jW2ws8wtRWZWFUhwPswHV2oD59x_x6sB5V_EABdqUj4IxMCc8mTIuxUy9GmHFN4_D2KI/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/AVvXsEiXNd4bOrr96sWDZ37NeqFUPxzsWGQMSs40AwFtyF2VE50Hzv0zKCOnnoD3ZTUvNZCgYew3xD6jW2ws8wtRWZWFUhwPswHV2oD59x_x6sB5V_EABdqUj4IxMCc8mTIuxUy9GmHFN4_D2KI/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/AVvXsEhk1-jIAnHk5i6IzjlvqCdzGHkGJqk2i7nr7N3QFPvjYGCIOsmmckCJqRo2ONOMEYUW5oiI9CqB74wrHZ1fV53gtizwwjAp0q_2eMUdD0oiaFJIUrY8GOAg1QHT6FUcYIJaP2pjFbxAY7s/s1600/gradient-big-grey2.jpeg") no-repeat scroll center top #F0F1EC;
   
}
.fixed-widget h1 {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_LgprrktoMv_1asPKMvZ-15kUzB5JKG4-Y_aL2WCAfUDOpM3GwCZuWAqoMDxcxvDZsRbCqYT1-KLJxHIn5-x1mZ7nIiabelJR6VTXNyktctfA3zl8UMwfMsEgNY7ey6_hcGDjYQTpbPw/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/AVvXsEi_LgprrktoMv_1asPKMvZ-15kUzB5JKG4-Y_aL2WCAfUDOpM3GwCZuWAqoMDxcxvDZsRbCqYT1-KLJxHIn5-x1mZ7nIiabelJR6VTXNyktctfA3zl8UMwfMsEgNY7ey6_hcGDjYQTpbPw/s1600/fixed-sidebar-header.png link with your new header background link. Make sure that the width of the header is 300x60px.