Add a ShoutMeLoud Like Social Widget to Your Blogger Blog

Learn how to add ShoutMeLoud like Social Widget in your blogger blog. This is so simple as 1-2-3...

You may heard about ShoutMeLoud the Popular blog run by Harsh Agarwal {I would like to call it a Blogger Community }.harsh is of the top Indian pro blogger he is known for his awesome tip and tutorials on various stuff related to blogging , so basically he writes about is blogging.

So if you take a look at the site (ShoutMeLoud.com) you will see a good looking social sidebar on the right side of the sidebar. So today I’m going to show how you can add that good looking and professional social widget to your own blogger site.
I’m not going to write about the importance of social widget in your blog. We all know that it’s very important to have social account and followers.
So is the screenshot of this widget to show you how it looks: --

How TO add this in your blogger site :>>
Step 1 > Go to your blogger dashboard

Step 2> Go to Layout

Step 3> Click On Add Widget and Select HTML/JavaScript

Step 4> Copy the code form below and replace the red marked URLs with your URLs after that Paste It On HTML/JavaScript Box

<style type="text/css">
#mut-subscribe-box .fb-like-box { border: 1px solid #EBEBEB; padding: 5px; background:#fff;}
    #mut-subscribe-box .gplusone { background: #f7fcfc; border: 1px solid #EBEBEB; border-top: 1px solid #fff; color: #000; font-size: 10px; line-height: 1px; padding:5px;}
    #mut-subscribe-box .twitter-follow { background: #eef9f9; border: 1px solid #dff6f6; border-top: 1px solid #fff; padding:5px 11px;}
    #mut-subscribe-box .email-box {background:#e3edf4; padding:11px;}
        #mut-subscribe-box .email-box h4{color: #555;font-family: Arial;font-size: 12px; margin: 0 0 10px;}
        #mut-subscribe-box .email-box .txt,#mut-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;}
        #mut-subscribe-box .email-box .btn,#mut-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;}
            #mut-subscribe-box .email-box .btn:hover{background:#FF9b00;}
input, textarea {
font-family: Georgia, "Times New Roman", Times; font-size: 1em;}
#mut-text {
background:#4376b1;
border: 1px solid #CCC;
box-shadow: 0 0 5px
#EEE;
line-height: 10px;
margin: 10px 10px 15px 0;
padding: 10px;
width:280px;
}
#mut-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="mut_widget">
<div id="mut-text"><h3>Stay Connected</h3>
<div id="mut-subscribe-box">
<div class="email-box">
<h4>Subscribe FREE updates on your <a href="http://feedburner.google.com/fb/a/mailverify?uri=MostUsefulTricks" target="_blank">Email</a> | <a href="http://feeds.feedburner.com/MostUsefulTricks" target="_blank">RSS</a></h4>
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MostUsefulTricks', '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="MostUsefulTricks" />
<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%2FMostUsefulTricks&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/MostUsefulTricks" 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.MostUsefulTricks.com"></g:plusone>
</div>
<a href="https://plus.google.com/+MostUsefulTricksBlog/posts" target="_blank" rel="nofollow" style="color: #d00; font-family: arial; font-size: 18px; font-weight: bold; line-height: 24px;">Circle on Google+</a><div class="clear"></div>  
    </div>
    <div class="twitter-follow">
  <a href="https://twitter.com/MostUsefulTrick" class="twitter-follow-button">Follow @MostUsefulTrick</a>
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script></div> </div>
</div></div>

Step 5> that’s it you are Done Click on Save

<<< Please Do Comment What You Think >>>

• Share ▼
  • Twitter
  • Share
  • Comment
  • Google+
• Subscribe ▼
  • RSS
  • Newsletter
• Connect ▼
  • Follow
  • Fanpage
  • YouTube
  • Google+