How To Add Email Subscription Forms To Blogger
- First select your form
- Copy the code of that form
- Replace my username with yours
- Go to Blogger Dashboard > Layout
- Click on Add a Gadget
- Select HTML/JavaScript
- Paste code and save it.
Email Form Style 1
<style type="text/css"> #helperblogger-emailbox { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUo1OmLoYr-_ty04BBOCTq1ZovjtJvYS3PkLe4vEfAB8ip7suJ2vT4tswRx04UWeB_zbih0G5Uj8C3yCZxhLiyFQYS64iKhZoMwmf1GOMLdiBYLwXF230p-LTpcE-L8_Zt9LVFv3TWltM/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNScxR_HcS_Uv8LAt4qgS_iZnOx-9Od6BFJBh9dTRw_6EvwI5YjnWZWDHPVrIHlcftUKh_bCwUjHgdZ_mToMk6hOs-Z1phjUg09XW0gxEAhhFwmF-iGa9MzkzDMcn5ycYvaUkSX7Mo6ZI/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV6F7Sm6fWt0w4c9z5G80W5sDkkReVuvAx5AYRYQkDHB1ef0cgRs5hZWU-RQuUX0jsBVMh2QjW9l4wCGJTTXep0zH-DxfacHI0uVaBp-lSqWBFyL0o7QI-RMpX3dkw6gP_R3ZpyMnvB_o/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