Create a Cute E-mail Subscription Form

Wednesday, 23 January 2013

Create a Cute E-mail Subscription Form

Hy,, Guys I have share Many Tricks About Blogger.Like Social Sharing Widget With Cool Hover Effects.Etc But Today About Cute RSS E-Mail Subscripation form .Now this Form Is with great And new CSS effects.This Widget make your sidebar beautiful and will attact visitors To subscribe.If you Want to Add this Cute Subscription Form than follow these Following Steps...

How To Add this Subscription Form To Blogger?

1.Go To Blogger >> Design >> Page Elements.
2.Choose HTML JavaScript Widget
3.Paste the following code in HTML javaScript Widget.

<style>
.mbt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6gKXMgvKoriQ9KPNSraLa-K4GVxA9BRXYhIrbUB9rLop6SKHjMMhnFCx272golHMAssqZfnl-bufv8Pt8mHtng0yzruG_opEd6Lk5lNr3poLYuLuPoCMI_IC2ODRHRswDePhYmvaEfejL/s1600/email.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;
}

.mbt-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;
}
.mbt-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:170px;
color:#666;}

</style>

<div class="mbt-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=TntByStc', '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="TntByStc" name="uri"/><input type="hidden" name="loc" value="en_US"/>

<input class="mbt-emailsubmit" value="Submit" type="submit" />

</form>

</div>

Customization

Now make these changes.

Now replace http://feedburner.google.com/fb/a/mailverify?uri=TntByStc with your Feedburner Email Feed link.
Replace TntByStc with your feed title. It appear at the end of your feed link. In my blogger tricks Case it is http://feedburner.google.com/fb/a/mailverify?uri=TntByStc.

Save your widget and view your blog.

Note:This widget originally share by My Blogger Tricks.

Don't Miss How to Make Money Online with PPC Sites.

Author: Farhan Kayani

I'm Farhan Kayani a Web Designer, Web Developer and Computer Instructor Currently live in Islamabad,I've been interest to forward my experience to the world. . Read More →