Smart Social Share Widget

Blogger is the best platform to presenting your knowledge with an higher way. Also in our previous tutorial i have share simple floating  share bar for blogger but now i am interested to sharing an simple social share widget to easily getting much more subscribers. For getting huge amount of subscribers and likes you need to work an smarter way then you can increasing your social site subscribers. In this tutorial we have not added much more css effects only some simple background and counter background effects for blogger easy loading in slow and speed internet. Now take a look in the full topic to add the widget in your blog.

Smart Social Share Widget

First go to Blogger Dashboard > Design > Page element.

Paste the below code in a JavaScript widget.

<style>
.MBC-social {
    border: 1px solid #EBEBEB;
    padding: 12px 0 0 12px;
    color: #555;
    display: block;
    background: #f8f8f8;

    text-shadow: 1px 0 0 #fff;
    text-transform: capitalize;
    text-decoration: none;
}
.MBC-total {
    width: 100%;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;   
}
.MBC-total li {
    float: left;
    width: 80px;
    background: none;
    padding: 0;
    text-align: center;
    margin: 0 5px 10px 0;
    height: 28px;
    position: relative;
}
.MBC-total li img {
    position: absolute;
    top: 2px;
    left: 0;
}
.MBC-total li span {
    display: block;
    background: url(http://1.bp.blogspot.com/-YburrCMx9LM/UBbCGdCjH-I/AAAAAAAACfc/2zmqFdLuwOU/s320/bg_total.png) no-repeat 100% center;
    width: 50px;
    height: 21px;
    padding: 7px 6px 0 0;
    font-size: 13px;
    font-weight: bold;
    color: #555;
    text-shadow: 0 0 1px #fff;
    float: right;
    text-align: right;
}

</style>

<div class="MBC MBC-social"><ul class="MBC-total"><li><a href="http:///#" target="_blank"><img src="http://2.bp.blogspot.com/-NvsTZqmcXhY/UBa8slsX63I/AAAAAAAACeM/gIHDjlYeNP8/s320/total.png" alt=""></a><span class="count">4,521</span></li><li><a href="http:///#" target="_blank"><img src="http://4.bp.blogspot.com/-X3HJcZvaww4/UBa9qllZBeI/AAAAAAAACeY/AL4TsB2qKr4/s320/twitter.png" alt=""><span class="count">801</span></li><li><a href="http:///#" target="_blank"><img src="http://4.bp.blogspot.com/-geaSui8A_-Y/UBa8rjDBSMI/AAAAAAAACdc/8ZxO4yiqgYQ/s320/facebook.png" alt=""></a><span class="count">1,689</span></li><li><a href="http:///#" target="_blank"><img src="http://1.bp.blogspot.com/-qiAnhQIPCNs/UBa8sPEMfkI/AAAAAAAACd0/YMpLVd_XEos/s320/plusone.png" alt=""></a><span class="count">1,092</span></li><li><a href="http:///#" target="_blank"><img src="http://4.bp.blogspot.com/-Ps_t0s1-WMo/UBa8r6-8yKI/AAAAAAAACds/QhMqbyOuKA8/s320/linkedin.png" alt=""></a><span class="count">255</span></li><li><a href="http:///#" target="_blank"><img src="http://1.bp.blogspot.com/-jfYm6phlKvI/UBa8scCj0jI/AAAAAAAACeA/i1DVerDrnPQ/s320/stumble.png" alt=""></a><span class="count">1,049</span></li><li><a href="http:///#" target="_blank"><img src="http://3.bp.blogspot.com/-KnY16LcQcNc/UBa-NDoaWII/AAAAAAAACe8/ETlD-8sDRgI/s320/digg.png" alt=""></a><span class="count">79</span></li><li><a href="http:///#" target="_blank"><img src="http://2.bp.blogspot.com/-DVsPCKn4UDY/UBa-NKfZu4I/AAAAAAAACfI/fzt8UktcNj8/s320/delicious.png" alt=""></a><span class="count">567</span></li><li><a href="http:///#" target="_blank"><img src="http://3.bp.blogspot.com/-kK21DGVdikY/UBa9q53zhRI/AAAAAAAACew/7L2nHwY9lBg/s320/pinit.png" alt=""></a><span class="count">27</span></li><li><a href="http:///#" target="_blank"><img src="http://2.bp.blogspot.com/-QxitTHij2Nk/UBa9qjoTOzI/AAAAAAAACek/BVArXw4bOh8/s320/reddit.png" alt=""></a><span class="count">6</span></li></ul></div>

Now change all blue color text with your links.

Now save your template.

Bingo! you are done it.