2 Shout Me Loud Like Subscription box for Blogger

Shout Me Loud Like Subscription box for Blogger
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">
/* 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 == &#39;&#39;) {this.value = &#39;Enter your email address&#39;;}" onfocus="if (this.value == &#39;Enter your email address&#39;)
{this.value = &#39;&#39;;}" 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&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;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>
4. Change Knoowblog and replace it with your Facebook Page name/id. (Blue Colour in the above code)
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">
  (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>
 12. Save Template and Refresh your Blog.

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

This amazing blog will teach you on blogging depths. Enter your email below to Get Blogging Tips straight to your Inbox

I hate spam just as much as you!

2 comments:

 

About Knoow Blog

Knoow Blog is a simple blog which focuses on various blogging techniques, blogging tips, success stories of people, latest technology developments, top websites and their trends.

About Me

Hi Guys!!! I'm Vijesh founder of knoowBlog (Know about blogging) a simple blog which serves as an informer and an adviser on various blogs, websites along with few blogging tips and tricks. I write articles to help newbies evolve into bloggers.

© 2011 - 2013 KnoowBlog - All Rights Reserved to Knoowblog | Sitemap

Designed by Vijesh Cormaty | Write For KnoowBlog