Pages

Friday, March 22, 2013

How to Add E-Mail Subscription Box to Blog

When you are providing useful information in your blog, then many times some readers will need to get the latest updates from your blog. For that purpose, you need an Email Subscription Form in your blog, so that the interested visitors can easily get the latest updates.

To add email or Feed Subscription Form to your blogger blog (blogspot) is very easy.
Just follow the next steps:

1. Log in to Blogger, then go to Layout > click on "Add a Gadget" link:


2. From the pop-up window, scroll down and click on the "HTML/JavaScript" gadget:


 3. Paste the following code inside the empty box:

<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: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=helplogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="pinkusays" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="hl-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Settings 

  • Replace the url address in green to change the email icon
  • Increase/Decrease the 130 width value for a wider text area
  • Replace http://feedburner.google.com/fb/a/mailverify?uri=helplogger with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
  • Replace pinkusays 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=pinkusays

4. Now Save your widget and check your blog. Enjoy!


 


How to Add E-Mail Subscription Box to Blog
9out of 10 based on 10 ratings. 9 user reviews.
Posted by: Mayor Botaks Updated at: 11:02 AM

3 comments:

  1. Great post!!

    Earn while you enjoy time with your Family & Loved ones!
    Join us today visit http://www.unemployedpinoys.com

    Unemployed is Brave and a choice to be a Freeman.
    To get a form visit http://www.nheipersonalblog.tk/2014/03/online-work-data-encoder-job.html
    HAPPY WORKING AT HOME :)

    ReplyDelete
  2. Join the finest minds in consumer research. Share your unique opinion and get paid for doing online surveys for money. You can share your opinion and earn per survey by making Money Online Now!

    Earn Per Survey
    Paid Survey Website
    Paid Survey Websites in India
    Survey Websites in India
    Earn Per Survey
    Free Online Surveys
    Free Online Surveys Websites

    ReplyDelete