11 March, 2013

Add Attractive Email Subscription Box in Blog

The email subscribers are the plus point in SEO for bloggers. The strength of a website or blog is depends on the social sharing and email subscribers. The email subscribers can be increased easily with adding an attractive email subscriber for on blog. The email subscriber form includes CSS effects that force the users to enter their email address and submit as a feed reader. This form can be easily add anywhere of the blogger template. The user can paste 'subscribe via email form' to the blogger sidebar or below ant post. This form will force the users to subscribe on your blog.

How To Add Subscribe via Email Form to Blogger?

  1. Sign in to Blogger.com
  2. Goto Layout
  3. Choose Add a Gadget (At Sidebar or below Blog Post)
  4. Choose HTML/JavaScript
  5. Write any word in Title of this widget (Recommended: Subscribe Us)
  6. Paste the following code in it,

<style>
.starsblogging-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGTpIM2V3POie_awf05wSUnV0UrXlwhJSrvOv5Qkb5bY4zxozK4YBW57K5trTQYIzYKPeJf6B1fmA2Mgyy2UtJ7kHATeAX5BqF80N1TurhNpbw5GZdbSz6rQ2JOiIpk5jS_CDFAZ2PpfOl/s1600/icon_mail1.png) no-repeat 0px 1px;
width:250px;
padding:0px 0px 0 65px;
float:left;
font: bold 16px 'Trebuchet MS', Trebuchet, Arial,Verdana, Sans-serif;
margin: 0px 0 10px 0;
color:#686B6C;
}
.starsblogging-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:3px;
font:12px sans-serif;
}
.starsblogging-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="starsblogging-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=StarsBlogging', '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;email address here&quot;;}" onfocus="if (this.value == &quot;email address here&quot;) {this.value = &quot;&quot;;}" value="email address here" type="text" />
<input type="hidden" value="StarsBlogging" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="starsblogging-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Now make these changes,


  • Now replace Subscribe via Email bold text with your desired text that will attract users to enter email and submit as a feed reader.
  • Just replace StarsBlogging text at 2 places with your own feedburner user name. Every blog has its own feedburner link. You can get this feedburner username from opening http://feedburner.google.com/fb/a/home. After opening this site click on Feed you want to get user name. Click edit feed details... at top right. and see your feedburner URL at Feed Address: http://feeds.feedburner.com/XXXXX.

Save your widget, Save your blog and view your blog to see it showcasing live.! :)
That’s All!

0 comments:

Post a Comment