How to Get Stylish Email Subscribe Widget for Blogger

As I mentioned in my previous post that Attractive Email Subscription box tend to get good number of subscribers as compared to default unattractive widget. In this post I am going to share a cool and attractive email subscription box which will sure bring you a lot of subscriptions.

Preview of Widget

This widget is SEO optimized with Nofollow tags Added, It is fast and doesn't affect your blog speed, This also works for Wordpress blogs, It can be placed anywhere. This widget is Big in size and will sure attract your visitors to subscribe.

Click on this button to see working demo of the widget.

How to Get this Widget

Step 1: Go to your Blog Dashboard and click on Design > Edit HTML

Step 2: Search for the following code

]]></b:skin>

Step 3: Now just above the code paste this CSS code, then Click on Save Template

/*Custom Header Styling*/

#headline{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1acLszoSrB1czHqgFoTGGzf5Ny5pRlCN4J9MZYc_KjwZ61ch_7ng1ZyQFMRnw53UvDb6xYwXjln6usJ1OUduV3XZAsaEV7Zx__coTTeyx0_jKLD79-fWFmU0QKjZnlTY1xtt8oQqTM0DA/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/AVvXsEioizjByoRVvTWV24NhEA6njPGWNM_Zm-t6CDo4j80oJnYImmNDw72l6CCWnNsl_xqVxXdtUJtpHUOyRwAfaIJ2xQIs05PlHdrWFN-x9VNSmfJKkqrwYIUdFZUtpeSgUuvDzGtJsLB3oOA/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; }

Step 4: Now go to Design > Page Elements and click on 'Add a Gadget', Choose HTML/Javascript.

Step 5: Copy and Paste the following code inside the widget.

<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=The-Area51" 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>

Step 6: Change The-Area51 with your Feedburner Username and Save.

Now you'll be able to see a stylish and attractive subscription widget on your blog. Hope you guys like this widget, leave your comments below and let me know. If you're haveing any problems installing this widget then please feel free to Contact us.

About Jimmie Luthra

Jimmie Luthra is a Mariner, Tech enthusiast, Blogger and Gadget reviewer. He is fond of technology and is usually found playing with some piece of tech. He is also a Guitarist, Music lover & fitness freak.