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 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>
