Email subscription is a very popular way to subscribe any blog/website and get updates directly in the mailbox,that's why you may always notice that number of feeds subscribers is always more that any other social social network subscribers.Today I am going to share some beautiful email subscription forms which are designed by design3edge and I have converted them into a blogger widget from a .psd file.As always I have tried my best to make this tutorial with a one step installation.You just have copy and paste the code.Now lets go to the forms and see how to add them into blogger blog.

How To Add Email Subscription Forms To Blogger

  1. First select your form
  2. Copy the code of that form
  3. Replace my username with yours
  4. Go to Blogger Dashboard > Layout
  5. Click on Add a Gadget
  6. Select HTML/JavaScript
  7. Paste code and save it.

Email Form Style 1



<style type="text/css">
#helperblogger-emailbox {
    background: url(http://3.bp.blogspot.com/-cLUYjqzh-QM/T-cObG0604I/AAAAAAAACCU/xPU8owu6n5U/s1600/helperblogger.com-blue.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}

form#helperblogger-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}

form#helperblogger-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}

form#helperblogger-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style> 

<div id="helperblogger-emailbox">
    <form id="helperblogger-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=HBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="HBlogger" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>

Email Form Style 2



<style type="text/css">
#helperblogger-emailbox {
    background: url(https://lh4.googleusercontent.com/-Guzmo3JRgIw/T-cOdANE43I/AAAAAAAACCk/-QUJXfEELls/s1600/helperblogger.com-silver.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}

form#helperblogger-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}

form#helperblogger-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}

form#helperblogger-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style> 

<div id="helperblogger-emailbox">
    <form id="helperblogger-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=HBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="HBlogger" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>

Email Form Style 3



<style type="text/css">
#helperblogger-emailbox {
    background: url(https://lh6.googleusercontent.com/-hGUwavE-FgM/T-cOcKb-wVI/AAAAAAAACCc/zAeLTDc_EvE/s1600/helperblogger.com-red.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}

form#helperblogger-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}

form#helperblogger-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}

form#helperblogger-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style> 

<div id="helperblogger-emailbox">
    <form id="helperblogger-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=HBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="HBlogger" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>


  • Replace HBlogger with your feedburner username in line number 39 and 40.

I hope that you will not face any problem while implement it into your blog.If you are getting then throw the problem in the comment bin :)

Post a Comment

  1. that's beautiful. thanks
    http://premium-area.blogspot.com

    ReplyDelete
  2. cool stuff. all the forms are really awesome. I like the second subscription form. thanks for sharing.
    regards:
    srinathreddy

    ReplyDelete
  3. When you click on the submit button does not work :)

    ReplyDelete
  4. thanks dude I already apply your tricks on my http://tutbd.blogspot.com

    ReplyDelete
  5. Is there any option to show the no: of subscribers within the subscription box??

    ReplyDelete
  6. is there any option to add subscribers count within the widget??

    ReplyDelete
    Replies
    1. No,we can not add subscribers count within the widget,as it has a whole background picture.

      Delete
  7. How do you adjust the size, without affecting the layout?

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. very nice visit us : www.everypremiumpro.blogspot.com

    ReplyDelete
  10. nice post
    www.smashingsoftwares.blogspot.com

    ReplyDelete
  11. Enterprisesocial networking focuses on the use of online social networks or social relations among people who share business interests and/or activities.

    ReplyDelete
  12. Man This is Awesome , Bro I would like to learn lots of things from you,
    care to Teach me?

    ReplyDelete
    Replies
    1. There is nothing dude . Just Copy And Pasting Technique is required

      Delete
  13. This comment has been removed by a blog administrator.

    ReplyDelete
  14. This is exactly what I am looking for, Thanks a lot for sharing this post. Tiny Serval

    ReplyDelete
  15. Thanks a lot......I put one of them in my blog.... http://trikoblu.bogspot.com

    ReplyDelete
  16. How do you adjust the size, without affecting the layout?

    i really need the adjusted size thanks

    ReplyDelete
  17. Wow..Nice...
    Android Games And Software to plz visit : www.amardroid.net

    ReplyDelete
    Replies
    1. How to create social content locker in blogger?
      http://trickzbucket.blogspot.com/2015/03/how-to-create-social-content-locker-in.html

      Delete
  18. How to create social content locker in blogger?
    http://trickzbucket.blogspot.com/2015/03/how-to-create-social-content-locker-in.html

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top