New Shoutmeloud Top Subscribe SignUp Widget For Blogger/Wordpress

Are you currently still using the older subscription common box delivered from FeedBurner.com ? Would you  jealous of whenever various popular wordpress websites have got customizable registration box along with background pictures and also with personalized CSS ? Would you like to find out the way to achieve that , then simply below is really a guide for those Newbie Blogger end users and creative designers. Utilizing this type of tutorial you can able to include a subscription box for your blogger blog.Previous version How To Add Mashable Popup Subscribe Box For Blogger And Wordpress

The Reason Why To Switch To New Shoutmeloud Subscribe Widget:

A large number of the blogosphere desire to learn how to get the 'Add your email to Blog Updates' via Email box and also the huge orange colored 'Sign up to to Blog Feed' buttons links inside their blog. Setting out blog feeds and getting a leading Email subscribe box/buttons are a couple of powerful methods to grow targeted visitors for your blog.

Here is definitely a trendy subscribe box with good sized applying jquery which will really attract visitor towards your blog.

Features Of Shoutmeloud Subscribe Box For Blogger:

1. Fast Loading Doesn't affect blog speed.
2. Seo Optimized Added Nofollow tags.
3. Big size box to force the readers to subscribe to your updates
4. Increase subscribe feed count within few days.
5. You can place this widget anywhere you want.
6. Just one step process.
7. It works on wordpress also.
8. Latest Shoutmeloud Sign-up for FREE weekly Newsletter.
9. Located on top of the blog.
10. Blogger Widget for Subscribe Box

Simply Stick to this detailed process to generate e-newsletter subscription box Plugin for Blogger with your own personal customizable CSS.

Live Demo

Instructions To Install This Shoutmeloud Widget:

Add the CSS code before ]]></b:skin> and save your template.

/*Custom Header Styling*/
#headline{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTnN1h-4KWR462yjaSGTp9WUYsUkCuZZ7AFqkyR_-mORxcXNzeapSbYgq22-NONvTCTw6MZoDCw2Wsz9K0AEiskglEHgZEiB0zajv2wwjpGBNBquWeiPqSOUSVUO6zfLBF-H5ZxM1mY5Os/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/AVvXsEgGrTqWYls6-VsdrGwdzpT2eH5aYTWva0ZuxLgQPd6664qZ4sFfaFQupJFjzyZawhPdMadVaoVSXcJYYKwK9sdW_WyyZRWTc7eLl1Nk_X9etgEE5DTqnBruXHMBv3uD5GzL5Bi1K_WRBJI/s1600/dwd.PNG') no-repeat;padding:0 0 10px 100px; float:right; }
      .txt2, .txt2:focus{width:140px; font-size:15px; background:#fff; color:#92c3c3; border:1px solid #E36B0A; 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 #AD5513; color:#fff; font-size:15px; border-radius:10px;}
            .btn2:hover{background:#6689b0; }

Add HTML/JavaScript widget to your blog and add this following snippet in it and save 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=MtvRodies8" class="signform" method="post" target="_new">
<input class="txt2" name="name" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Your Name...&#39;;}" onfocus="if (this.value == &#39;Your Name...&#39;) {this.value = &#39;&#39;;}" value="Your Name..." />
<input class="txt2" name="email" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Your Email Address...&#39;;}" onfocus="if (this.value == &#39;Your Email Address...&#39;) {this.value = &#39;&#39;;}" value="Your Email Address..." />
<input class="btn2" type="submit" value="Subscribe Me!" />
</form>

<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://softechnogeek.blogspot.com/" target="_blank" title="Blogger Widget">Widget»</a></span></div>
></div>
</form>
<div class="clear"></div>
</div>

Customization For Shoutmeloud Subscribe Widget:

1. Edit the highlighted red coloured text with your RSS id That's it.
2. You can change the Signup free daily updates and Subscribe Me with your own text.

Note: For best results use this widget at top of your blog comment on below for any debug error