Blogger Tips
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.
Related: How to Burn Blogger RSS Feeds at Feedburner
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:
Settings
- Replace the url address in green to change the email icon
- To change the width or the text area, increase/decrease the 130px value in red
- 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 helplogger 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=helplogger
4. Now Save your widget and check your blog. Enjoy!
- Add 6 Stylish Custom Search Boxes To Blogger
There's an unspoken rule in the world of web design that says that every website have a search box. You can, and should, design a custom search gadget to Blogger that contributes to the theme of your site while providing some key benefits to both...
- How To Add Neat Css3 Dropdown Menu In Blogger
Here's another simple yet amazing dropdown menu with pure CSS3 made by Andrew from script-tutorials.com to which I have made some slight modifications so that it could easily adapt in our Blogger template. In the upper right corner of this menu we...
- Jquery Sliding Panel With Expanding/collapsing Content For Blogger
Many times when we think about making a blog, we want to put many gadgets, although many are not necessary, or perhaps only a few of them. But to add the gadgets that we want, we need to have enough space. A solution would be using an expanding/collapsing...
- How To Burn Blogger Rss Feeds At Feedburner
What is RSS? A RSS (Really Simple Syndication) feed is a XML-based format for your content. Most blogging platforms, for example, will have an RSS feed built in. Whenever you start publishing posts, your latest posts will be updated in the RSS feed. Visitors...
- Add Email Subscription Form And Links To Blogger Blogspot
In this tutorial you will learn how to add an email subscription form to your Blogger Blogspot blog so that your visitors will have easy access to your latest updates via email. Adding an email subscription form to your blog is very easy to do and is...
Blogger Tips
How to add “Email Subscription Form” to Blogger Blogspot
Related: How to Burn Blogger RSS Feeds at Feedburner
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,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="helplogger" 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
- To change the width or the text area, increase/decrease the 130px value in red
- 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 helplogger 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=helplogger
4. Now Save your widget and check your blog. Enjoy!
- Add 6 Stylish Custom Search Boxes To Blogger
There's an unspoken rule in the world of web design that says that every website have a search box. You can, and should, design a custom search gadget to Blogger that contributes to the theme of your site while providing some key benefits to both...
- How To Add Neat Css3 Dropdown Menu In Blogger
Here's another simple yet amazing dropdown menu with pure CSS3 made by Andrew from script-tutorials.com to which I have made some slight modifications so that it could easily adapt in our Blogger template. In the upper right corner of this menu we...
- Jquery Sliding Panel With Expanding/collapsing Content For Blogger
Many times when we think about making a blog, we want to put many gadgets, although many are not necessary, or perhaps only a few of them. But to add the gadgets that we want, we need to have enough space. A solution would be using an expanding/collapsing...
- How To Burn Blogger Rss Feeds At Feedburner
What is RSS? A RSS (Really Simple Syndication) feed is a XML-based format for your content. Most blogging platforms, for example, will have an RSS feed built in. Whenever you start publishing posts, your latest posts will be updated in the RSS feed. Visitors...
- Add Email Subscription Form And Links To Blogger Blogspot
In this tutorial you will learn how to add an email subscription form to your Blogger Blogspot blog so that your visitors will have easy access to your latest updates via email. Adding an email subscription form to your blog is very easy to do and is...