Thesis Feedburner Email Subscription Widget

How To Add The Widget To Blogger

Navigate towards Blogger Dashboard >> Layout >> Add a new Gadget >> HTML/JavaScript. Then paste the edit code (with all your customization links) in the widget and hit save.

 <!--BloggingeHow Thesis Email Subscription Widget -->

 <div id="singlesubscribe">
<p class="headline">Get Regular Updates, Its FREE!</p>
<span class="arrow"></span>

<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggingehow', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">

<input id="email" class="txt" type="text" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" value="Enter your email :)" name="email" style="margin=left: 20px; width: 290px; font-size: 15px;">

<input type="hidden" name="uri" value="bloggingehow">
<input type="hidden" value="en_US" name="loc">
<input class="btn" type="submit" value="Subscribe" name="commit">

</div>
<span style=" line-height:0px; font-size:8px; font-weight:bold; align:right;
  ">
<a style="color:#D3D3D3;" href="http://www.bloggingehow.com">widgets</a></span>
</form>
</div>

<style>
#singlesubscribe {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieoDBL4F-eoWDnXmmAR_AQmHaIEC-uuJ3QfMJ-JBpIL6hMFc1QfIyJeCJx6yMrZsucOjffZKWE5mJUUYfeTjglnU5ypoTGymBVzmPp1pTcORRnq6L86X9ugDyCG0QDmeijQxYLDI86bgE/s1600/email-icon-1.png") no-repeat scroll 98% center #6C87A6;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 30px #575656 inset;
    margin: 5px auto 0;
    padding: 10px;
}
#singlesubscribe .headline {
    color: #FFFFFF;
    font-size: 24px;
    margin: 5px 0 0 60px;
}
#singlesubscribe .arrow {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBHLW2-mYNWSrIk8ZqySeQdU-_TPD7S9Yjw6ZALIYq4BJCgxGDcb8zixuwUHVNz_6TboI3YhtQEVKyYveF8YshbsRY9d2Vm2jhrdPD0SJaHPSI6Uqvkd42etv5yxbempBAq2QcGmCxqwQ/s1600/arrow-left.png") no-repeat scroll 0 0 transparent;
    float: left;
    height: 60px;
    margin: 0 0 0 20px;
    width: 60px;
}
#singlesubscribe form input.txt {
    background: none repeat scroll 0 0 #FFFFFF;border: 2px solid #575656;border-radius: 15px 15px 25px 5px;box-shadow: 0 0 8px #575656 inset;color: #575656;float: left;margin: 25px 10px 0 0;padding: 5px 10px;width: 145px;
}
#singlesubscribe form input.feedburner {
    width: 250px;
}
#singlesubscribe form input.btn {
    background: none repeat scroll 0 0 #222222;
    border: 0 none;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 5px #000000 inset;
    color: #FFFFFF;
  
    font-weight: bold;
    margin: 25px 0 0;
    padding: 5px 10px;
    width: 100px;
}
#singlesubscribe form input.btn:hover {
    background: none repeat scroll 0 0 #111111;
}

</style>

 Simple replace both the instances of your Feed burner ID (replacing our ID i.e bloggingehow in the code above).


Thats all :)