Awesome Social Share counter for Blogger

Social share buttons are really very interesting for creating but mainly if you adding attractive social share buttons then the best way to getting much more subscribers. Also for getting huge amount f traffic also need attractive presentation in social sites. But mostly we are not getting huge subscribers while writing many articles but take look those are using highly attractive social bars. I have found in WordPress sites are getting huge amount of subscribers while starting the websites but in the same case in blogger we are not getting much more amount of subscribers. In this topic have created an image with some avatar effect by using Photoshop and also added some css effects to this widget. Now take look in the codes and demos.

Awesome Social Share counter for Blogger

First visit blogger Dashboard > Design > Edit HTML

Now search below code just using Ctrl + F

]]></b:skin>

Then paste the below code just above it.

#MBC-social-layout{
    min-width:200px; 
    border:5px solid #E2E2E2;
}

#MBC-social-layout h3 {
    font-family:Georgia, "Times New Roman", Times, serif !important;
    background: none repeat scroll 0 0 #DBDBDB;
    border: 1px solid #CCCCCC;
    color: #666666;
    font-weight: normal;
    line-height: 1.8em !important;
    margin: 0 auto;
    text-align:center;
}

a.subscribeSidebarBox {
    border: medium none;
    cursor: pointer;
    display: block;
    height: 55px;
    position: relative;
    min-width: 200px;
}

#sidebarSubscribe .sds_snc_icon {
    background-image: url(http://3.bp.blogspot.com/-4rlLPMFze5I/UBYM4WuhmrI/AAAAAAAACT0/Aasm68clEu4/s1600/social_icon_column_user.png);
    background-repeat:no-repeat scroll 0 0 transparent;
    height: 50px;
    width: 50px;
}

#sidebarSubscribe span {
    color: #6E6E6E;
    display: block;
    padding: 1px;
    position: absolute;
    text-shadow: 1px 1px 0 white;
}

#sidebarSubscribe .title {
    font-family:Helvetica, sans-serif;
    font-size: 10px; font-weight:bold;
    left: 65px;
    top: 8px;
}

#sidebarSubscribe .sds_snc_count {
    font-size: 20px;
    font-weight: bold;
    left: 65px;
    top: 23px;
}

#subscriberRSS .sds_snc_icon { background-position: -300px 0px; }

#sidebarFaceBook .sds_snc_icon { background-position: 0px 0px; }

#followTwitter .sds_snc_icon { background-position: -250px 0; }

#flickerPhoto .sds_snc_icon { background-position: -50px 0; }

#youtubeSubscribers .sds_snc_icon { background-position: -100px 0; }

#vimoVideos .sds_snc_icon { background-position: -150px 0; }

#subscribeEmail .sds_snc_icon { background-position: -200px 0; }

#githubSubscribe .sds_snc_icon { background-position: -600px 0; }
.mbc_snc_compact {
    font-family:Georgia, "Times New Roman", Times, serif !important;
    min-width:200px;
    border:1px solid #CCCCCC;
    text-align:center;
}

.mbc_snc_compact h3 {
    background: none repeat scroll 0 0 #DBDBDB;
    border: 1px solid #CCCCCC;
    color: #444444; font-weight: normal; line-height: 1.8em !important;
    margin: 0; padding: 0 0 0 7px;
    text-align:center;
}

.mbc_snc_compact ul.sds_snc_compact_ul {
    list-style: none outside none !important;
    margin:0; padding:0;
    min-width:inherit;
    text-align:center;
    line-height:15px !important;
}

.mbc_snc_compact ul.sds_snc_compact_ul li {
    float:left;
    list-style: none outside none !important;
    margin:0 0 5px 0px !important;
    padding:0 0 5px 3px !important;
    text-align: center;
    font-size:10px;
    width:90px !important;
    border:0px solid #CCC;
    height:80px !important;
}


.mbc_snc_compact ul.sds_snc_compact_ul li a.compact_a:hover
{
    background: none repeat scroll 0 0 !important;  text-decoration:none !important;
}

.mbc_snc_compact ul.sds_snc_compact_ul li .sds_snc_icon {
    display:block;
    background-image: url(http://3.bp.blogspot.com/-4rlLPMFze5I/UBYM4WuhmrI/AAAAAAAACT0/Aasm68clEu4/s1600/social_icon_column_user.png);
    background-repeat:no-repeat scroll 0 0 transparent;
    height: 50px;
    width: 48px;
    cursor:pointer;
    margin-left:20px;
}

.mbc_snc_compact a.compact_a .sds_snc_count {
    font-family:Arial, Helvetica, sans-serif; color:#666666;
    display:block;
}

.mbc_snc_compact a.compact_a .sds_snc_count:hover 
{
    color:#FF0000; cursor:pointer; font-size:11px;
}

Now save your template.

Then go to design > Page element

Paste the below code in a JavaScript gadget.

<div id="MBC-social-layout"><div class="sidebarContainer" id="sidebarSubscribe"><a href="http://www.facebook.com/pages/Facebook user name" target="_blank" class="subscribeSidebarBox" id="sidebarFaceBook">
                        <span class="sds_snc_icon"></span>
                        <span class="title">Fans On Facebook</span>
                        <span class="sds_snc_count">49</span>
                    </a><a href="http://twitter.com/Twitter user name" target="_blank" class="subscribeSidebarBox" id="followTwitter">
                        <span class="sds_snc_icon"></span>
                        <span class="title">Twitter Followers</span>
                        <span class="sds_snc_count">28</span>
                    </a><a href="http://feeds.feedburner.com/Feedburner user name" target="_blank" class="subscribeSidebarBox" id="subscriberRSS">
                        <span class="sds_snc_icon"></span>
                        <span class="title">Rss Subscribers</span>
                        <span class="sds_snc_count">90</span>
                    </a><a href="http://www.youtube.com/user name" target="_blank" class="subscribeSidebarBox" id="youtubeSubscribers">
                        <span class="sds_snc_icon"></span>
                        <span class="title">Youtube  Subscribers</span>
                        <span class="sds_snc_count">2</span>
                    </a><a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=Feedburner user name&amp;loc=en_US" class="subscribeSidebarBox" id="subscribeEmail">
                        <span class="sds_snc_icon"></span>
                        <span class="title">Subscribe For Updates</span>
                        <span class="sds_snc_count">Email</span>
                    </a> <div class="clear"></div>
                </div>
            </div>

Now change the blue color text with your links.

Also if you have getting problem while the css parts is not connecting in your HTML part then directly paste the css and HTML codes in one widget.

Now save your template.

Visit your blog and enjoy with new widget.