Post Tags

Blogger Widget

Pretty posts

By Rubel
Email Newsletter Subscribe for Blogger
From 20+ blogger newsletter email subscribe widget, i have shared one in this post. This newsletter subscribe widget looking gorgeous with it's exclusive design. You can use it anywhere in your website area like sidebar, footer or main content area. Let's see how you use it in your blogger site.

How to Add Stylish Email Subscribe Widget?

To add this email subscribe form on your blogger/blogspot site, follow below step a to z carefully.

  1. Login to your blogger account
  2. Go to Dashboard>Layout
  3. Click on Add a Gadget
  4. Select HTML>Javascript
  5. Paste below code into to the empty Content box and then click on Save button.
<style type="text/css">
#LS-Newsletter4-Box {
    background: url(http://1.bp.blogspot.com/-65PvPzNlUCo/UEEijEFGUdI/AAAAAAAALTI/5UGflvDEMJ8/s1600/Newsletter-5.png)no-repeat scroll center center transparent;
    height: 299px;
    width: 408px;
}
form#LS-Newsletter4-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#LS-Newsletter4-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 37px;
    vertical-align: top;
    width: 275px;
    outline:0px;
    position: relative;
    left: -25px;
}
form#LS-Newsletter4-Form #d {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 38px;
    vertical-align: top;
    width: 275px;
    outline:0px;
    position: relative;
    left: -25px;
}
form#LS-Newsletter4-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 43px;
    position: relative;
    left: -36px;
    top: 25px;
    width: 144px;
    border-radius: 5px;
}
 
</style>
<div id="LS-Newsletter4-Box">
    <form id="LS-Newsletter4-Form" action="https://feedburner.google.com/fb/a/mailverify?uri=codiblog" method="post">
        <input id="d" name="name" value="Enter Your Name"
        onfocus='if (this.value == "Enter Your Name") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your Name";}'/>
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="http://3.bp.blogspot.com/-D4DL8TMRtd0/UCuQt-AVn3I/AAAAAAAAJz8/K1sjzXIxyQk/s1600/blank.gif" id="sbutton"/>
    </form>
</div>


Customize:

Don't forget to change codiblog text with your feedburner shortname from action attributes.