12/11/2012

Beautiful Email Suscriber Form For Blogger

Beautiful Email form for your blogger if you design the blogger site you need to use the email subscriber form to increase the visiter throw the email. And its is used to send the your post and new information post on your blog its will send to your follower throw the email.

Blogger can give the Email subscriber form in blogger Gadget.You can also add your own email subscriber form to your blog with Html/CSS Gadget.

  • First Logon to your Blogger account.
  • And select the Layout Option on blogger Database.
  • Now its will open the Layout of you blogger design.
  • And select the Add Gadget its will open the blogger Gadget Page .
  • Select the Html/CSS option on the Gadget Page by clicking + option.
  • And now Html/CSS configure page will be open. Select the below code and Past on it.

Demo Live
subscriber form


<!----https://tricksschool.blogspot.com email form Start-----> <style>
.ts-email{
background:url(https://4.bp.blogspot.com/-aLZuqonorzs/UMc59yQYgiI/AAAAAAAAA64/rwuug0IFsD8/s1600/mail.jpg) no-repeat -8px 10px ;
width:235px;
height:70px;
padding:10px 0 0 65px;
float:left;
font-size:1.2em;
font-weight:bold;
margin:0 0 10px 0;
color:#0084CE;
box-shadow: 1px 1px 5px 1px #eee;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.ts-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:4.4px;
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; box-shadow:inset 4px 4px 3px rgba(0,0,0,0.1);
}
.ts-emailsubmit:hover{
background:#0084CE; box-shadow:inset 8px 8px 6px rgba(0,0,0,0.1);
}
.textarea{background: #fff !important;box-shadow:inset 4px 4px 3px rgba(0,0,0,0.1);
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #888; font-size: 12px;
height: 25px; width: 150px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:0px; }
</style>
<div class="ts-email">
Subscribe via Email
<form action="https://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" onsubmit="window.open('https://feeds.feedburner.com/TricksSchool','popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="textarea" gtbfieldid="3" 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;;}" type="text" value="Enter email address here" />
<input name="uri" type="hidden" value="TricksSchool" /><input name="loc" type="hidden" value="en_US" />
<input class="ts-emailsubmit" type="submit" value="Submit" />
</form>
</div>
<!----https://tricksschool.blogspot.com email form end----->
Note:

Remove this Red Line with https://feeds.feedburner.com/TricksSchool with your Feed Burner url of account.
Remove the Pink Line with TricksSchool with your Fedd Burner Name.

Share this: