New Social Sharing Buttons for blogger Sidebar

1. Sign-in to Blogger dashboard, select your blog, download a backup of its template and then edit its HTML (if you don't know, how to edit Blogger templates, learn now to edit your blog's template)

2. Now find ]]></b:skin> by pressing Ctrl+F and paste below CSS code just above ]]></b:skin>

    .widget-item-control a{display:none;}

    .widget-item-control a{display:none;}

    #supportive{width: 300px;

    float: left;margin-top: 10px;}

    #supportive li{position:relative; cursor:pointer; padding: 0 !important;}

    #supportive .facebook, .googleplus, .rss, .twitter{

    position: relative;

    -moz-transition: all 0.4s ease-in-out;

    -webkit-transition: all 0.4s ease-in-out;

    -o-transition: all 0.4s ease-in-out;

    transition: all 0.4s ease-in-out;

    z-index: 5;

    display: block;

    float: left;

    margin: 1px;}

    #supportive .icon{overflow:hidden;}

    #supportive .facebook{width: 147px;

    height: 150px;

    background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipzytA5vzBuBhddwSIoDbveD-4ldoEy2cEgI7Hi3_6aJZf1AeoXzVtOULZeAAZYga5_glnwyIlP-heVyDpnTVFlOPVZtd14z4RrGrFILg5UxOINVugKm2YQpIpipp10Z-CS1-23dJeqKw/h120/facebook.png") no-repeat center center;}

    #supportive .twitter{width: 148px;

    height: 74px;

    background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvIei35CVuyBBp0kRS1k4veSb0e2BAKzGreZFnJgdB7143FW97iO1WqKQoUJsDLzWX6ETbs8tCjp3Iwiw1THb04VIEmjtjuwoRqDKgMdjGpQPRSEf6_-ifzdyWnR-siGbYLb3Gs1LjMAoV/s1600/Twitter.png") no-repeat center center;}

    #supportive .googleplus{width: 148px;

    height: 74px;

    background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPJ5FPvmmeT0Udjqlj3p7Z15_kLWFLOdN93bYWId0mAMsj_6qZJHJtzhzRcIGCdtPULsYbc5envaN8mKnua5VMuHXKspUst809etWmTNy54RhGxZvfCKR19peMEAmH54PaiJn4asE0pJys/s1600/google+plus.png") no-repeat center center;}

    #supportive .rss{ width: 299px;

    height: 74px;

    background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM9vE1l3ufERLQn0ESmvG2OVa5ECH18Xqu-vajzmMhVq0z_OnWDqX0G7EhTK_1uKucCZey3rkH0eCLbTtr_8QnorDQBo4UZ7g7Q2OVLJgR_9SlDLm0RlYTmpFaBSHOqQpYZt16lDrPkIBo/s1600/rss.png") no-repeat center center;}

    #supportive li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;

    -webkit-transition: all 0.1s ease-in-out;}

    #supportive li:hover .twitter{background:rgba(64,153,255,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4W0LXfRhfYYctxs3xr46LkzGGJCO3H1EVoSilL-KdVXC-7nYrc2-8grlP3hUyglkcrQecKSbf6HbC5ajvyucmbqz4PK-luBy6eLAtHYlwwzYUFs6Gd4N82VAE4Leq54s92mpELYeBw50/h120/Twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;

    -webkit-transition: all 0.1s ease-in-out;}

    #supportive li:hover .googleplus{background:rgba(228,69,36,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTsQbaHcJ4rWhqFRBEhP6029kH8nVi4T1XbQHOEtweSWRLFSC-VMPtf5xB_wZhA0g7pLabIiqV61PlC6uzjvZn9nH81yZ7Xh2PLml5QkDwF60jPrlJT1DJ2GiH9ULF2tYzzxjxAf_VU58/h120/google+plus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;

    -webkit-transition: all 0.1s ease-in-out;}

    #supportive li:hover .rss{background:rgba(255,102,0,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihTiT-xpm-mlZaNrViROHwrzfg5Djf5v5ycukRjwfKmBgjPtP3gPIs8V0pxYAm1uHMGngLL3oKR4ZZ7Q5B4pWiOBpxNdw-5m_8dCVxbuPfaHs2EODvH92ZDZRdveMLNKI3T0uCdWMyHlk/h120/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;

    -webkit-transition: all 0.1s ease-in-out;}

3. After pasting the code, save your template and close editor
4. Now go to your blog's layout and add a new gadget by selecting HTML/Java Script with below provided code. Add it to your sidebar which is best suited place for this widget.

<ul id='supportive'>

<li><a class='icon facebook' href='http://www.facebook.com/FaceBookPage/'/></a></li>

<li><a class='icon twitter' href='http://twitter.com/TwitterUserName'/></a></li>

<li><a class='icon googleplus' href='https://plus.google.com/GooglePlusUser/PageID/'/></a></li>

<li><a class='icon rss' href='http://feeds.feedburner.com/FeedBurnerUserName'/></a></li>

</ul>

5. After pasting the code in the box, replace highlighted values with your ones and save your gadget. You are all done!!

Please keep it in mind that the CSS code of this widget defines its width as 300px. If your sidebar's width isn't 300px and the widget looks ugly, please modify the CSS code. If you can't do it by yourself, comment below and tell us about what should be the width of the widget for your blog. We will fix it for you.