Create Subscriber Mail Box on your blog sidebar or footer widget.

Home » Websites » Create Subscriber Mail Box on your blog sidebar or footer widget.

Create Subscriber Mail Box on your blog sidebar or footer widget.

You have Mail ! This time tutorial, you'll be able to customize your own mail box for your rss subscribers either on the sidebar or footer widget .
It's simple & hassle-free for anyone to create this simple mail-box.
Do take note :This widget might not work in certain old browsers !
But it does works well on google chrome though.

To view mail-box demo Click

Step By Step Instructions:

Remember to Back Up your blog template first & open up your blogger Layout template by selecting Edit HTML.

Click to Expand Widget Template ,press control & find button at the same time.

Copy ]]></b:skin> , Paste & Click Find inside control find box that's pop-up at the top left corner of the template.
Copy & paste the css provided below, right above ]]></b:skin>

/* -------Mail-Box----- */
#mail-box{background: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#ADA99F));;border:1px solid #e6e6e6;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;width: 270;height:140px;background: -moz-linear-gradient(top, #F8F8F8, #ADA99F)}
#mail-box h1{margin-top:5px; color:#E9B225;font-family:georgia;font-size:18px;font-weight:bold;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #fff;line-height:20px}
#mail-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px ;padding:10px;text-shadow:1px 1px 0 #FFF;width:200px; color:#666; font-family:georgia; margin-bottom:5px;}
#mail-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));background: -moz-linear-gradient(center top , #369A18, #205F0D) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:130px; font-family:georgia; margin-left:5px;}
#mail-box .submit:hover{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
#mail-box .submit:active{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}

Note : Preview template to check css given are correctly been placed & Save Your Template.

Next step :

Go to your blogger Layout. Either select sidebar or footer HTML widget.

Add div code given below into your sidebar or footer html widget box.

<div id='mail-box'><h1>Subscribe To Our NewsLetter!</h1>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR RSSURL;,&apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<center> <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email Address...&quot;;}' onfocus='if (this.value == &quot;Enter Your Email Address...&quot;) {this.value = &quot;&quot;}' size='30' type='text' value='Enter Your Email Address...'/> 
<input name='uri' type='hidden' value='YOUR RSSURL'/> <input name='loc' type='hidden' value='en_US'/> 
<input class='submit' type='submit' value='Subscribe'/></form></div>

Important : Replace YOUR RSSURL to your own blog url.

Preview your template first & Save it if it's alright !

*For Css Web Template which able to accept html format,

Just add the codes below to your web sidebar*:

<style>
#mail-box{background: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#ADA99F));;border:1px solid #e6e6e6;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;width: 270;height:140px;background: -moz-linear-gradient(top, #F8F8F8, #ADA99F)}
#mail-box h1{margin-top:5px; color:#E9B225;font-family:georgia;font-size:18px;font-weight:bold;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #fff;line-height:20px}
#mail-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px ;padding:10px;text-shadow:1px 1px 0 #FFF;width:200px; color:#666; font-family:georgia; margin-bottom:5px;}
#mail-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));background: -moz-linear-gradient(center top , #369A18, #205F0D) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:130px; font-family:georgia; margin-left:5px;}
#mail-box .submit:hover{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
#mail-box .submit:active{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
</style>
<div id='mail-box'><h1>Subscribe To Our NewsLetter!</h1>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR RSS URL;,&apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<center> <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email Address...&quot;;}' onfocus='if (this.value == &quot;Enter Your Email Address...&quot;) {this.value = &quot;&quot;}' size='30' type='text' value='Enter Your Email Address...'/> 
<input name='uri' type='hidden' value='YOUR RSS URL'/> <input name='loc' type='hidden' value='en_US'/> 
<input class='submit' type='submit' value='Subscribe'/></form></div>