You all might know one of the top technology blog Shout Me Loud run by Harsh Agarwal in short it is called SML. You can read about Top 10 Indian Blogs at Top 10 Indian bloggers for 2012 based on Alexa Ranking. Recently Harsh has changed the look of his blog and his subscription widget too. It is simple yet loved by many as it features Facebook, Google + and Twitter in a miniature. This subscription widget was redesigned for blogger by PBT. I have just made few modifications to the code and re posted it here for all those who like to have this widget. Just follow the below steps to have it on your blog.
1. Go to Blogger Dashboard> Layout > Add a Gadget
2. After clicking Add a Gadget click on HTML/JavaScript, where you want this Widget
3. Paste the following code in the Gadget (before adding replace all links with yours see steps 4 to 8 given below the code.)
<style type="text/css">4. Change Knoowblog and replace it with your Facebook Page name/id. (Blue Colour in the above code)
/* 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=knoowblog" target="_blank">Email</a> | <a href="http://feeds.feedburner.com/knoowblog" target="_blank">RSS</a></h4>
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=knoowblog', '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="knoowblog" />
<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%2Fknoowblog&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/knoowblog" 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.knoowblog.in"></g:plusone>
</div>
<a href="https://plus.google.com/108654208062343204213/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/vijeshcormaty" class="twitter-follow-button">Follow @Vijesh</a>
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script></div> </div>
</div></div>
5. Edit Twitter Name with yours twitter id. (Green colour in the above code)
6. Edit Google Plus Link url with yours
7. Edit Feed burner URI with your, Knoowblog (Red colour in the above code)
8. Change 108654208062343204213 Google plus Circle ID with yours Circle id. (Orange Colour)
9. Now, Go to Blogger > Design > Edit Html
10.Backup your template
11. Add Google Plus Script before </head>
<script type="text/javascript">12. Save Template and Refresh your Blog.
(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>
You can also adjust the width and colours as per your requirements. If you want any adjustments or having any doubts comment below I will try to resolve it soon.
Credits: Pro Blogging Tools
Post a Comment