All in one subscription widget for bloggers

Hey guys today I going to share all in one subscription box for blogger. I myself have added it in this blog. Every blogger knows that a subscription box is important as helps the visitors to stay connected to your blog. If you create a new post on your blog the visitor who have subscribed will get an email that your blog has new content and then the visitor will visit if he/she is interested. Thus it also increases your visits and makes your visitor a reader of your blog. And so blogger must add convincing content and subscription box so that visitors might end up subscribing your blog. And if the subscription box will have a little bit social touch it will be much better. Rather than adding social buttons and subscription box as different widgets we can add a Hybrid subscription box. Here is a good subscription box by windroid club:

Steps to add this widget:

• Go to your blogger dashboard

• Select your blogger blog

• Click on Layout from Drop Down menu (shown in picture)

• A new Window appear

• Click on Add gadget

• And select HTML/JavaScript

• Next Box of HTML/JavaScript will appear (shown in picture)

   

• Now the box of HTML/JavaScript will appear when you click on the box.

• Now paste the following code to add the All in one subscription widget on your blog.

<style type="text/css">
#wcsub-box
{
box-shadow:1px 1px 4px #dcdcdc;
-moz-box-box-shadow:1px 1px 4px #dcdcdc;
-web-kit-box-shadow:1px 1px 4px #dcdcdc;
-goog-ms-box-shadow:1px 1px 4px #dcdcdc;
margin-bottom:70px;
height:264px;
}
#wc-socico
{
height:33px;
border-bottom:1px solid #dcdcdc;
border-left:1px solid #dcdcdc;
border-right:1px solid #dcdcdc;
padding:2px;
background:#ffffff;
}
#wc-socicoimg
{
height:28px;
width:28px;
}
#wc-socico table
{
border:none;
}
#wc-rscount
{
margin-top:2px;
margin-right:-25px;
}

#wcsub-box .wcsub-fblike { border-bottom: 1px solid #dcdcdc; border-left: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; padding: 5px; background:#fff;}
#wcsub-box .wcsub-email {border: 1px solid #dcdcdc; background: #f8f8f8; padding:11px;}
#wcsub-box .wcsub-email h4{color: #444;font-family: Arial;font-size: 12px; margin: 0 0 10px;}
#wcsub-box .wcsub-email .txt,#wcsub-box .wcsub-email .txt:focus{background:#fff; float:left; color:#777777; border:1px solid #dcdcdc; border-radius: 3px; padding: 7px 10px 8px; width: 140px;}
#wcsub-box .wcsub-email .wcsub-button,#wcsub-box .wcsub-email .wcsub-button:focus{background:#222222; border:1px solid #222222; color:#fff; border-radius: 3px; float: right; font-size: 12px; font-weight: bold; padding:7px 3px; }
#wcsub-box .wcsub-email
input, textarea {
font-family: Georgia, "Times New Roman", Times; font-size: 1em;}
</style>

<div id="wcsub-box">
<div class="wcsub-email">
<h4>Get FREE updates on your <a href="http://feedburner.google.com/fb/a/mailverify?uri=pretoproblogger" target="_blank" style="color:#3b5998;">Email</a> | <a href="http://feeds.feedburner.com/pretoproblogger" target="_blank" style="color:orange;">RSS</a></h4>
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=pretoproblogger', 'popupwindow',
'scrollbars=yes,width=700px,height=700px');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input name="email" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address')
{this.value = '';}" value="Enter your email address" class="txt" />
<input type="hidden" name="uri" value="Pretoproblogger" />
<input type="hidden" value="en_US" name="loc" />
<input type="submit" value="Subscribe" class="wcsub-button" />
<div style="clear:both;"></div>
</form>
</div>



<div id="wc-socico">
<table border="0" cellspacing="0" cellpadding="0" width="298">
<tbody>
<tr>
<td valign="top" ><a href='http://feeds.feedburner.com/pretoproblogger' target='_blank' rel=nofollow' ><img id="wc-socicoimg" src="http://3.bp.blogspot.com/-KjMedajdI2w/UTtUCEg5_zI/AAAAAAAABcQ/K3qUhvOTNrA/s1600/feed.png" alt="Subcribe to our RSS feeds" /></a></td>

<td valign="top" ><a href='http://www.facebook.com/Pretoproblogger' target='_blank' rel='nofollow'><img id="wc-socicoimg" src="http://2.bp.blogspot.com/-7_3aMhrvLq4/UTtUB9H5ZyI/AAAAAAAABcM/JjZGcP7r3_I/s1600/fbb.png" alt="Join Us on Facebook" /></a></td>

<td valign="top" ><a href='https://plus.google.com/102731179322289098765' target='_blank' rel='nofollow'><img src="http://4.bp.blogspot.com/-vnYX9pKHZCU/UTtUCWa3-HI/AAAAAAAABcU/Xi7l4YF136U/s1600/gpp.png" alt="Add to Circles" id="wc-socicoimg" /></a></td>

<td valign="top" ><a href='https://twitter.com/pretoproblogger' target='_blank' rel='nofollow'><img id="wc-socicoimg" src="http://2.bp.blogspot.com/-VXfOkCT43uI/UTtUEItlzyI/AAAAAAAABck/cvROEjW1Vx8/s1600/tww.png" alt="Follow us on Twitter" /></a></td>

<td valign="top" ><p id="wc-rscount"><a href="http://feeds.feedburner.com/PretoproBlogger"><img src="http://feeds.feedburner.com/~fc/PretoproBlogger?bg=000000&amp;fg=ffffff&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a></p></td>
</tr></tbody></table>
</div>



<div class="wcsub-fblike">
<iframe src="//www.facebook.com/plugins/like.php? href=https://www.facebook.com/Pretoproblogger?fref=ts &send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe><a href=" https://www.facebook.com/Pretoproblogger" target="_blank" rel="nofollow" style="color: #3B5998; font-family: arial; font-size: 16px; font-weight: bold; line-height: 20px;"> Like us on Facebook </a><div class="clear"></div>
</div>



<a href="https://twitter.com/pretoproblogger" class="twitter-follow-button" data-show-count="true" data-lang="en-gb">Follow @PreToProBlogger</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>



<div class="wcgplus">
<div class="g-plus" data-href="https://plus.google.com/102731179322289098765" data-width="290" data-height="131" data-theme="light"></div>
</div>
</div>

• Change all the social ids/addresses highlighted in red with your social ids/addresses

• Leave the widget title blank.

• Click save

You are done now.

Comment if you liked the subscription box...