Tuesday, February 19, 2013

Old ShoutMeLoud Style Email Subscribe Under Blog Header

If you are a regular visitor of ShoutMeLoud.com then you might be knowing that before SML chaged its theme, They used to have an awesome Email Subscribe bar under Header. Many people used to like that widget but SML removed it and now they are using a different style subscribe widget.

Live Demo

Yesterday I showed you How to Add New ShoutMeLoud Style Subscribe widget and Today we will show you How to Add old SML style subscribe widget.

Features

Attractive
WordPress Style
Fast Loading
Can be easily added under Header

How to Add SML Style Widget to Blogger

Log in to Blogger account
Go to Template > Edit HTML (Backup your Template First)
Now search for ]]></b:skin>
Add the following code just before ]]></b:skin>

#headline{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCJs0izFm-bYSEhBMVT1ViVykjkgI-N_cSf9lCfPE35RzmoqdiVBLzMDp5qr8-T2jR-MW3bG7sAMstLgvDbAEnRMpIdXDNYZmvekbkSLC1vpns17CKURX-A5_dOPz-bW5bKldym7zw2X81/s1600/headline-bg.png') repeat; color:#fff; margin:0 auto; border-top: 1px solid #000; height:30px; font-size:12px; position:fixed; bottom:0; z-index:1000; width:100%;border-top-left-radius:20px;border-top-right-radius:20px; display:block;}
#headline:hover{background:#333;}
#headline p{line-height:30px; font-size:12px; text-align:center; width:95%; float:left;}
#headline p a{ text-decoration:blink; color:#ffcc00; border-bottom:1px dashed;}
#headline li.widget, #headline li.widget p{margin:0; line-height:30px; list-style:none; font-size:12px; text-align:center;}
.kill-btn{display:block; position:relative; right:15px; float:right;}
.kill-btn a{font-size:18px; font-weight:bold; font-family:"Comic Sans MS"; color:#fc0; line-height:30px;}
/* Subscription Box */
#sleek-subscribe{display: block; margin:0 auto; }
.newsheadline {color:#222; font-size:16px; line-height:50px; float:left; font-weight:bold;}
.newsheadline span{font-size:38px; color:#444; line-height:14px; font-family:"Trebuchet MS"; font-weight:normal;}
.newsheadline cite{font-style:normal; color:#f00;}
.signform{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFN4ycPdWjE5fnULD1bNr5JMPmOUTAA_c-RHWR6iErM6koamzZ0piK8jZQoZ__D1PMHFxXSIQXxnNEWbPac0hND4OoN52I0rrOwb2ZvUQl_pgA314-XGU-H-UpdqcQAVOB0nLvYbGtEhc/s1600/dwd.PNG') no-repeat;padding:0 0 10px 100px; float:right; }
      .txt2, .txt2:focus{width:140px; font-size:15px; background:#fff; color:#000000; border:1px solid #FF9332; margin:0 5px; float:left; padding:10px; width:160px; border-radius: 10px;}
      .btn2, .btn2:focus {background:#E36B0A; margin:0 5px; padding:8px 10px 9px; border:1px solid #FF0000; color:#fff; font-size:15px; border-radius:10px;}
            .btn2:hover{background:#6689b0; }

Now save template.

Next Step is Adding HTML code

Adding HTML Code

From Blogger Dashboard
Go to Layout > Click on 'Add a Gadget'
Choose HTML/Javascript
Add the following code inside it

<div id="sleek-subscribe">
<div class="newsheadline"><span>Sign-up</span> for <cite>FREE</cite> daily Updates.</div>
<form action="http://feedburner.google.com/fb/a/mailverify?uri=trickyblogger" class="signform" method="post" target="_new">
<input class="txt2" name="name" onblur="if (this.value == '') {this.value = 'Your Name...';}" onfocus="if (this.value == 'Your Name...') {this.value = '';}" value="Your Name..." />
<input class="txt2" name="email" onblur="if (this.value == '') {this.value = 'Your Email Address...';}" onfocus="if (this.value == 'Your Email Address...') {this.value = '';}" value="Your Email Address..." />
<input class="btn2" type="submit" value="Subscribe Me!" />

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span class="author-credit" style="font-family: Arial, Helvetica, sans-serif; font-size: xx-small;"><a href="http://www.the-area51.com/" target="_blank" title="Blogger Widget">WidgetÂ»</a></span></div>
></div>
</form>
<div class="clear"></div>
</div>