Monday, February 18, 2013

ShoutMeLoud Style Subscription Box for Blogger

You must be aware of ShoutMeLoud, It is a very popular blog having an Alexa Rank of 3k and is run by one of the top indian blogger Harsh Agrawal. You must have seen ShoutMeLoud's Subscription widgets, It is an All-in-One Subscribe widget containing buttons to All major social and subscribe networks. If you want to add a similar widget to your blogger blog then you are at the right place. Today I'll show you How to add SML style Subscribe widget to blogger.

Features

All-In-One Subscribe Widget
Beautiful Design
Email Subscription Form
Facebook Like, Twitter Follow, Google+ Buttons
Fast Loading & Professional looking

How to Add SML Subscribe Widget to Blogger

Log in to your Blogger Account
Go to Layout > Click on 'Add a Gadget'
Choose HTML/Javascript widget
Now Copy Paste the following code inside it.

<style type="text/css">
/* kb Style sheet for subscription box */
#kb-subscribe-box .fb-like-box { border: 1px solid #EBEBEB; padding: 5px; background:#fff;}
    #kb-subscribe-box .gplusone { background: #f7fcfc; border: 1px solid #EBEBEB; border-top: 1px solid #fff; color: #000; font-size: 10px; line-height: 1px; padding:5px;}
    #kb-subscribe-box .twitter-follow { background: #eef9f9; border: 1px solid #dff6f6; border-top: 1px solid #fff; padding:5px 11px;}
    #kb-subscribe-box .email-box {background:#e3edf4; padding:11px;}
        #kb-subscribe-box .email-box h4{color: #555;font-family: Arial;font-size: 12px; margin: 0 0 10px;}
        #kb-subscribe-box .email-box .txt,#kb-subscribe-box .email-box .txt:focus{background:#fff; float:left; color:#92c3c3; border:1px solid #E36B0A; border-radius: 3px; padding: 7px 10px 8px; width: 150px;}
        #kb-subscribe-box .email-box .btn,#kb-subscribe-box .email-box .btn:focus{background:#E36B0A; border:1px solid #AD5513; color:#fff; border-radius: 3px; float: right; font-size: 12px; font-weight: bold; padding: 7px 8px; text-shadow: 1px 1px 0 #D08D00;}
            #kb-subscribe-box .email-box .btn:hover{background:#FF9b00;}
input, textarea {
font-family: Georgia, "Times New Roman", Times; font-size: 1em;}
#kb-text {
background:#4376b1;
border: 1px solid #CCC;
box-shadow: 0 0 5px
#EEE;
line-height: 10px;
margin: 10px 10px 15px 0;
padding: 10px;
width:300px;
}
#kb-text h3 {
color:white;
border-bottom: 1px dotted
white;
line-height:1.385em;
font-size: 18px;
padding: 0;
margin: 0 0 10px;
border-bottom: 1px dotted
#AAA;
font-wieght: normal;
text-transform: uppercase;
letter-spacing: 0;
font-family: Georgia,"Times New Roman",Times,serif;
}
</style>
<div class="kb_widget">
<div id="kb-text"><h3>Stay Connected</h3>
<div id="kb-subscribe-box">
<div class="email-box">
<h4>Subscribe FREE updates on your <a href="http://feedburner.google.com/fb/a/mailverify?uri=trickyblogger" target="_blank">Email</a> | <a href="http://feeds.feedburner.com/trickyblogger" target="_blank">RSS</a></h4>
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=trickyblogger', '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="trickyblogger" />
<input type="hidden" value="en_US" name="loc" />
<input type="submit" value="Subscribe" class="btn" />
<div style="clear:both;"></div>
</form>
    </div>
    <div class="fb-like-box">
      <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Ftrickyblogger&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="http://www.facebook.com/trickyblogger" target="_blank" rel="nofollow" style="color: #3B5998; font-family: arial; font-size: 18px; font-weight: bold; line-height: 20px;"> Like us on Facebook </a><div class="clear"></div>
    </div>
    <div class="gplusone">
<div style="float:left;width:90px;">
<g:plusone href="http://www.trickyblogger.com"></g:plusone>
</div>
<a href="https://plus.google.com/117521503834739609237/posts" target="_blank" rel="nofollow" style="color: #d00; font-family: arial; font-size: 18px; font-weight: bold; line-height: 24px;">Circle us on Google+</a><div class="clear"></div>
    </div>
    <div class="twitter-follow">
<a href="https://twitter.com/trickyblogger" class="twitter-follow-button">Follow @Vijesh</a>
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script></div> </div>
</div></div>

Now make the following changes to the code

Replace trickyblogger with your FeedBurner Username

Replace trickyblogger with your Facebook Username

Replace 117521503834739609237 with your Google+ Username

Replace trickyblogger with your TwitterUsername

Replace http://www.trickyblogger.com with your blog address

Save Widget

Adding Google +1 Button to the widget

Go to Blogger > Template > Edit HTML (Backup your template first)
Search for </head>
Paste the following script before </head>

<script type="text/javascript">
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Now you've successfully added ShoutMeLoud Style subscribe widget to your blog. I hopw you liked it, Please share this post and also leave a comment below.

Credit
The Credit of the widget goes to ProBloggingTools