Create Simple And Cute Email Subscription Box For Blogger

How To Create Subscription Form For Blogger ?

.mbw-email{
background:url(http://1.bp.blogspot.com/-zLOxMQq0_Ac/UuiBx14E7rI/AAAAAAAABBc/oDfM96NF1ag/s1600/subscribe.png) no-repeat 0px 20px;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.mbw-emailsubmit{
background:#f5bb0d;
cursor:pointer;
color:#fff;
border:none;
padding:4px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
font-size:12px;
font-family:sans-serif;
}
.mbw-emailsubmit:hover{
background:#df8228;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #e3e3e3;
resize:none;
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);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
font-size:13px;
width:170px;
color:#555;}

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=just4hack‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true”>

 

<input type=”hidden” value=”just4hack” name=”uri”/>

4. Now many following changes to the above code.

• Replace http://feedburner.google.com/fb/a/mailverify?uri=just4hack with your feedburner url (You can get that by visiting your feedburner account then navigating to Publicize > Email Subscriptions.)
• Replace coolhackingtrick with your feed title. You can get that from end of your feed link.  http://feedburner.google.com/fb/a/mailverify?uri=just4hack

5. All done now you will have cute email subscription on your blog.

Further Customizing