.png)
If you want a simple E-mail Subscription Form, see the previous tutorial - Tutorial # 36 - How to add “Email Subscription Form” to Blogger/Blogspot. However if you want to make it a little bit fancy, this tutorial will help you in making so.
Customization
- Replace the URL address in line # 3 to change the email icon
- To change the width or the text area, increase/decrease the 190px value in line # 36
- Replace http://feedburner.google.com/fb/a/mailverify?uri=EarningViaBlog with your Feedburner Email Feed link in line # 40. You can get it by visiting your feedburner account then navigate to "Publicize" and then to "Email Subscriptions".
- In line # 42, replace EarningViaBlog with your feed title. It appears at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=EarningViaBlog.
Step 3: Now Save your widget and you're done. Check and Enjoy!
Step 1: Follow the Steps 1-6 of the previous tutorial - Tutorial # 36 - How to add “Email Subscription Form” to Blogger/Blogspot.
Step 2: Now copy and paste the following code into any webpage or HTML JavaScript widget (by going to Blogger Dashboard > Layout) and make the changes given below.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| .hl-email{ | |
| background:url(http://4.bp.blogspot.com/-u3UaeUufpmI/T8lFuelsg8I/AAAAAAAACQY/tOWbHsgTYKc/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:190px; | |
| 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('https://feedburner.google.com/fb/a/mailverify?uri=EarningViaBlog', '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="EarningViaBlog" name="uri"/><input type="hidden" name="loc" value="en_US"/> | |
| <input class="hl-emailsubmit" value="Submit" type="submit" /> | |
| </form> | |
| </div> |
Customization
- Replace the URL address in line # 3 to change the email icon
- To change the width or the text area, increase/decrease the 190px value in line # 36
- Replace http://feedburner.google.com/fb/a/mailverify?uri=EarningViaBlog with your Feedburner Email Feed link in line # 40. You can get it by visiting your feedburner account then navigate to "Publicize" and then to "Email Subscriptions".
- In line # 42, replace EarningViaBlog with your feed title. It appears at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=EarningViaBlog.
Step 3: Now Save your widget and you're done. Check and Enjoy!
0 comments