4 Sept 2012
How to add a Email Subscription Form to Blogger
Labels:
BLOGGER TRICKS,
BLOGGER WIDGETS,
HOW TO D0,
PLUGINS,
SCRIPTCAMP
How to add a Email Subscription Form to Blogger
The purpose you need a Email Subscription Form in your website is that interested visitors can easily get latest updates from you and can be connected with your blog
1. Go to Design > Page Elements > click on the link. "Add a Gadget"
2. From the pop-up window, click on the "HTML/JavaScript" gadget.
3. Paste the following code
<style>.hl-email{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB4Gxz_SptUio-by_TO68A5Rv8UZr5wmrd1bf0UKHzaJI-XoAx3mHS_RDv0Fcj3byD5yoQN1b4ZRLzkqBa7T234xa758_gE7WqLwlVYjDVV_IWQli8qDz_7D88LbT1QvXRBTqhb8C1lEc/s1600/mail.png)no-repeat 0px 12px ;width:300px; padding:10px 0 0 55px; float:left; font-size:1.4em; font-weight:bold; margin:0 0 10px 0; color:#686B6C; } .hl-emailsubmit{ background:#9B9895; cursor:pointer; color:#fff; border:none; padding:3px; text-shadow:0 -1px 1px rgba(0,0,0,0.25); -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; font:12px sans-serif;} .hl-emailsubmit:hover{ background:#E98313; } .textarea{ padding:2px; margin:6px 2px 6px 2px; background:#f9f9f9; border:1px solid #ccc; resize:none; box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); -moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;width:130px;color:#666;}</style><div class="hl-email">Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Tricks2Blogging', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email address here" type="text" /><input type="hidden" value="Tricks2Blogging" name="uri"/><input type="hidden" name="loc" value="en_US"/><input class="hl-emailsubmit" value="Submit" type="submit" /></form></div>
- Important Notes
- Replace http://feedburner.google.com/fb/a/mailverify?uri=Tricks2Blogging with your Feedburner Email Feed link. You can get it by visiting your feedburner.com account and then navigate to Publicize and then to Email Subscriptions.
- Replace Tricks2Blogging with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri= Tricks2Blogging
