1. Login to blogger
2. Go to design - edit HTML - Expand Widget Template
3. Find </b:skin> code and paste this code below before </b:skin> code
4. Now lets find <p><data:post.body/></p> and paste this code after <p><data:post.body/></p>/*stay connected*/
.stay-connected {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background: #ffffff;
margin: 3px 0 3px 0;
padding: 5px;
border: 1px solid #E6E6E6;
overflow: auto;
}
#stay-icons {
float: left;
margin: 0 5px 0 0;
padding: 2px;
}
/*end stay connected*/
.yahya-email{
background:url(http://cdn2.iconfinder.com/data/icons/functionsocial/Social_Email_RSS.png) no-repeat 0px 12px ;
width:250px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.yahya-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
margin:0px 0px 0px 5px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
font:12px sans-serif;
}
.yahya-emailsubmit:hover{
background:#81acc7;
}
<div class='yahya-email' style='margin-left:20px;'>
Subscribe via Email
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=BlogYahyagan', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input class='textarea' gtbfieldid='3' name='email' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='text' value='Enter Your Email'/><input name='uri' type='hidden' value='BlogYahyagan'/><input name='loc' type='hidden' value='en_US'/><input class='yahya-emailsubmit' type='submit' value='Subscribe'/>
</br><a href="http://blogyahyagan.blogspot.com">Want this widget on your blog? Click Here</a>
</form>
</div></td></tr></tbody></table></div>
</b:if>
5. And last step is change the text that colored blue with your feed burner url.
6. Save your template.
7. And you can see how your Subscription box look like
Lets Create Very Beautiful And Simple Subscription Box
Source : http://blogyahyagan.blogspot.com
Inspired by : Spiceupryourblog
love it!
ReplyDelete