Ads Top

How to Add Email Subscription Form To Blogger Blogspot

Hello and Welcome to GetWebInfo. Here on this post you will learn about that How to Add Email Subscription Form To Blogger Blogspot. Whe you are providing usful 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,



To Add Email Subscription Form To Blogger Blogspot

Step 01: Lot in to Blogger then Go To Layout> Click on "Add a Gadget" Link



Step 02: From the Pop-up window, just scroll down and click on the gadget of HTML/JavaScript.

Step 03: Past 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=GetWebInfo', '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="your Blog Name" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="hl-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Widget Setting


  • Replace the URL Address in to Green to change the email Icon
  • To change the width or the text area. increase/decrease the 130PX value in red 
  • Replace The Feed Burner URL with Your Own Feed Burner URL ( http://feedburner.google.com/fb/a/mailverify?uri=GetWebInfo
  • Replace GetWebInfo with your feed title. It appears at the end of your feed link. 
Step 04: Now save your widget and check your blog and Enjoy!!!

No comments:

Powered by Blogger.