Create a Cute Subscription Form

hi
Today we have yet another but extremely beautiful and easy to edit subscription form dozed with new CSS effects. This widget will keep your sidebar neat and clean and will surely attract visitors to subscribe.

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 it, 

<style>
.mbt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDz2dLFVyifLWOOdzTB2o2HEjQ43Bm_Bmi3JhUKDWzijoczN6fu-IOZkYCwBHCCvI6rQjVI9VoYe9FIxUU_W8oDUeaeGsVb0fL4T81E9BIEe5c3xbtVapRbHRaca48BAAnhCRtmxWIKwBy/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=jomonearnmoneyfromblog', '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;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="jomonearnmoneyfromblog" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Now make these changes,

#Now replace

http://feedburner.google.com/fb/a/mailverify?uri=jomonearnmoneyfromblog

with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.

#Replace

jomonearnmoneyfromblog

with your feed title. It appear at the end of your feed link. In my case it is

http://feedburner.google.com/fb/a/mailverify?uri=jomonearnmoneyfromblog

Save your widget and view your blog to see it showcasing live! :)

Take 5 Second And Spread World

Tweet

Stay Connected With Free Updates

Subscribe via Email