Social Media Sharing Widget For Bloggers By Mahable

sharing widget

Today i am sharing the most attracting and most used social Media Sharing widget. Yes i am talking about Mashable Social media sharing widget. This widget is previously shared by mybloggertricks and many other bloggers. It's look very nice on sidebar and attract most of your visitors. I am sharing this on the request of one of my valuable reader. It's very simple and i am using it on my blog also. I am sharing the same code with you. I hope all of you like this simple and attracting widget.
Let's see the code and procedure to add this in blogger template.

For the Demo you can see on Right side of this Blog.

Adding Mashable Sharing Widget

1) : Go to Blogger and select your blog.

2) : Go to Layout ==> Add a Gadget ==> HTML/Javascript.

3) : Now copy the code below and paste it in empty space of HTML/Javascript window.

.gplus-soc {
        background: #fff;
        padding: 0px;
        border: 0px solid #C7DBE2;
        margin-bottom:-13px;}

.twitter-box {
        background: #EEF9FD;
        padding: 10px;
        border: 1px solid #C7DBE2;
        border-top: 0;}
     .pin-it {
        background: #EFFAFD;
        padding: 10px;
        border: 1px solid #C7DBE2;
        border-top: 0;}
     .pin-it span {
        color: #000;
        font-size: 11px;
        position: absolute;
        display:inline-block;
        margin: 5px 70px 5px 90px;}

#mashable {
        background: #EBEBEB;
        border: 1px solid #CCC;
        border-top: 1px solid white;
        padding: 2px 8px 2px 3px;
        text-align: right;
        border-image: initial;}
    #mashable .author-credit {}
    #mashable .author-credit a {
        font-size: 10px;
        font-weight: bold;
        text-shadow: 1px 1px white;
        color: #1E598E;
        text-decoration:none;}
    #email-news-subscribe .email-box{
        padding: 5px 10px;
        font-family: "Arial","Helvetica",sans-serif;
        border-top: 0;
        border-right: 1px solid #C7DBE2;
        border-left: 1px solid #C7DBE2;
        border-image: initial;
       height:35px;}
    #email-news-subscribe .email-box input.email{
        background:#FFFFFF;
        border: 1px solid #dedede;
        color: #999;
        padding: 7px 10px 8px 10px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        border-image: initial;
        font-family: "Arial","Helvetica",sans-serif;}  
    #email-news-subscribe .email-box input.email:focus{color:#333}  
    #email-news-subscribe .email-box input.subscribe{
        background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
        background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
        -pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
        font-family: "Arial","Helvetica",sans-serif;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #cc7c00;
        color:white;
        text-shadow:#d08d00 1px 1px 0;
        padding:7px 14px;
        margin-left:3px;
        font-weight:bold;
        font-size:12px;
        cursor:pointer;
        border-image: initial;}
    #email-news-subscribe .email-box input.subscribe:hover{
        background: #ff9b00;
        background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
        background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
        filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
        outline:0;-moz-box-shadow:0 0 3px #999;
        -webkit-box-shadow:0 0 3px #999;
        box-shadow:0 0 3px #999
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
        background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
        -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #cc7c00;
        color:#FFFFFF;
        text-shadow:#d08d00 1px 1px 0}  
    #other-social-bar {
        background-color: #D8E6EB;
        box-shadow: 0 1px 1px #FFFFFF inset;
        padding: 0px;
        font-family: "Arial","Helvetica",sans-serif;
        font-weight:bold;
        overflow: hidden;
        border: 1px solid #B6D0DA;
           height:37px;
    }
    #other-social-bar ul {list-style: none outside none; padding-left: 4px;}
    #other-social-bar .other-follow {
        float: left;
        color:#1E598E;
        overflow: hidden;
        height:20px;
        padding:5px;
        width: 270px;}
    #other-social-bar .other-follow ul {
        list-style: none outside none;
        padding-left: 4px;}
    #other-social-bar .other-follow ul li {
        font-size: 12px;
        font-weight: bold;
        display:inline;
        border:0;
        text-shadow: 1px 1px white;}  
    #other-social-bar .other-follow ul li a {
        font-size: 12px;
        color:#1E598E;
        font-weight: bold;
        display:inline;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li {
        font-size: 12px;
        font-weight: bold;
        display:inline;
        border:0;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li a {
        font-size: 12px;
        color:#1E598E;
        font-weight: bold;
        display:inline;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li.my-rss {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhWs0gHLjNJmr9GK6iS4kQ4T7xih_1K0PiQJt_v1BGuNfEW9Goa_NiH97SA0LCBxRnyuini5ICGlPSfdJvrhchNRlrbqGpyB_gdPiZeO7wcF4JL5VjdqtXDapbId0ircLuCs4jVfYe9YE/s400/rss-16x16.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;
            margin-left:5px;}

#other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter-box a, 
#other-social-bar .other-follow li.my-gplus-soc a{
    text-decoration:none;
    }

#other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter-box a:hover, #other-social-bar .other-follow li.my-gplus-soc a:hover{
    text-decoration:underline;
    }

#other-social-bar .other-follow li.my-twitter-box {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7HUj5OffkYobLhNCtRIHybS0icimZWWubiEzXRIMWk4a1J0sDvlVWTIGWXW_jmZGpV2_IiqavlRl869fxn1xnH7aewgLj-gRSf5ubjmvCdbfdyseUhFWk3MYX_Tv_C8NyrHjPiLrl-ro/s400/twitter-box%2527.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;}

#other-social-bar .other-follow li.facebook {
        background: url('http://www.chefhangout.com/chef/lib/images/facebook_icon.jpg') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;}

#other-social-bar .other-follow li.my-gplus-soc {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB3DknPVGa0fZOyBfzhx5TNakfOCXbJknDofJm3wy_m0OLaAfaXRc3lPzYgFESQuhKy2t_J-v8SN9kZamMow9I5qiv0uif-9LBsU_bQEDSjS9Qdx8qvFjBPTCEgU0fA_7uPzd922E6Y54/s400/gplus-soc-16x16.png) no-repeat transparent;
        line-height: 1;
        width: 60px;
        padding: 0px 3px 1px 20px;
        margin-bottom:0px;}

</style>

<!--[if IE]>

<![endif]-->

<div style="margin-bottom:10px;">
 <div id="HTB-MSB-bar" >

<g:plus href="https://plus.google.com/u/0/b/114713768214549309979/" width="300" height="131" margin="0px" theme="light"></g:plus> </div>
<div class="fb-box-like">
 <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2FYOUR FACEBOOK PAGE LINK&send=false&layout=standard&width=250&show_faces=false&action=like&colorscheme=light&font=tahoma&height=35&appId=487763874571866" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:35px;" allowtransparency="true"></iframe></div>
<div class="google-plus-box">
  <span>Recommend us on Google!</span><div class="g-plusone" data-size="medium">
</div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div>
<div class="pin-it">
<span>Follow us on Pinterest!</span>
<a href="YOUR PINTERET LINK"><img src="http://passets-lt.pinterest.com/images/about/buttons/pinterest-button.png" width="80" height="28" alt="Follow Me on Pinterest" /></a></div>
<div class="twitter-box">
  <iframe title="" style="width: 300px; height: 20px;" class="twitter-box-follow-button" src="http://platform.twitter-box.com/widgets/follow_button.html#_=1319978796351& align=&button=blue&id=twitter-box_tweet_button_0& lang=en&link_color=&screen_name=twitter-box USER NAME&show_count=& show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe> </div>
<div id="email-news-subscribe">
  <div class="email-box">
 <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('YOUR FEEDBURNER LINK', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
 <input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" /> <input type="hidden" value="YOUR FEED NAME" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form>
</div>
</div>
<div id="other-social-bar">
 
 <ul class="other-follow">
<li class="my-gplus-soc"> <a rel="nofollow" title="Google+" rel="author" href=YOUR GOOGLE+ PAGE LINK target="_blank">Google Plus</a> </li>
<li class="my-rss"> <a rel="nofollow" title="RSS" href="FEEDBURNER LINK" target="_blank">RSS Feeds</a> </li>
<li class="my-twitter-box"> <a rel="nofollow" title="twitter-box" rel="author" href=YOUR twitter-box PROFILE LINK  target="_blank">twitter-box</a> </li>
</ul>
</div>
</div>
</div>

4) : Before saving the code make the necessary changes in the code so that it can work for you perfectly.

5) : Replace facebook, twitter, Google+ and Pinterest links with the links to your pages.

This is all for today. I hope you will like my this sharing and encourage me to share more in future. If you like this widget then subscribe to your blog posts and share it with your friends to. If you feel any problem at any step do mention in comments. Have a Nice Day.