Facebook Facebook Facebook Facebook

ANDROID

How to Add Beautiful Email Subscription Form

Earlier at Software Wanted  we share How to Create Beautiful RSS Feed Banners to Add Below Your Blog Posts. Today we have another beautiful and smart looking Email Subscription Form, injected with new CSS effects, for your Blogs/Websites.

We have designed neat and clean yet beautiful and cute Email Subscription Form you. 

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.



</head>

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 == &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="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.   

0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...
 
Mr. Android © 2011 Design by Army Boots