How to Add Beautiful Email Subscription Form
Log-In to your Blogger Account.
Choose Your Blog.
Move to Template > Edit HTML > Proceed.
Tick mark the box Expand Widget Template.
Take a Backup of your Template before making any alteration.
Press Ctrl+F and Find.
Just above the head tag add the following piece of code and Save Template
|
|
<style>
.sw-email{
background:url(http://2.bp.blogspot.com/
-H6H1-_6JIe4/T4M7lHM4XqI/AAAAAAAABLQ/Csgq37AeqkE/
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;
}
.sw-emailsubmit{
background:#028bc4;
cursor: default;
color:#ffffff;
border: inherit;
padding:2px;
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;
}
.sw-emailsubmit:hover{
background:#06b2f9;
}
.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;}
.textarea1 {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> |
|
Once You saved Template
Move to Layout section of your blog.
Click Add a Gadget
Select HTML/Java Script from the Gadget list.
Copy the following code and Paste it where you want your
Beautiful Email Subscription Form to Appear.
|
|
<div class="sw-email" style="float:left">
<a href='http://tinyurl.com/chbbxym'>
<img alt='Top Softwares and Bogging Tips'
src='http://2.bp.blogspot.com/-y14HwixDKkQ/
T4KL1l3lupI/AAAAAAAABLI/97r5utdAQCs/
s1600/Untitled-3.png'/>
</a>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=freesoftwarewanted', 'popupwindow',
'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea1"
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="sw-emailsubmit" value="Submit" type="submit" />
</form>
</div> |
|
Replace the Red color URL
http://feedburner.google.com/fb/a/mailverify?uri=freesoftwarewanted with your own FeedBurner E-mail link.
You can find your Feed Email Link from your own Feed Burner Account and navigating to Publicize and then to Email Subscriptions.
Or
From abovr Red URL you can only replace freesoftwarewanted with your Feed Burner Title.
Say something about article, THANKS!
|
|
Receive The Latest Posts Directly To Inbox
|
|