Awesome Social Sharing Widget For Blog

Click to Zoom

Live Demo

Live Demo is in this blog at post footer, you may find and share within few clicks!

How it Works ?

 This widget working with Pure CSS, And not containing any Javascript or jQuery code.

How to add ?

1. Open Blogger Dashboard
2. Navigate to Template
3. Click on Edit Html
4. Tick Expand Widget Templates
5. Search For ]]></b:skin> And just Above it paste below Code.

.scial a
{
  text-decoration:none;
  color:rgba(0,0,0,.5);
}
.scial
{
display:inline-block;
  transition:.3s;
  -webkit-transition:.3s;
  -o-transition:.3s;
  -moz-transition:.3s;
  -ms-transition:.3s;
cursor:pointer;
margin:10px 0px;
width:50px;
padding:0px;
height:50px;
font-size:22px;
color:rgba(0,0,0,.5);
text-shadow: 1px 0 0 rgba(0,0,0,.2);
}
.scial:hover
{
padding-right:160px;
}
.scial > span
{
font-weight:900;
display:inline-block;
text-decoration:none;
color:rgba(0,0,0,.5);
margin:5px 7px;
transform:scale(0);
-webkit-transform:scale(0);
-moz-transform:scale(0);
-ms-transform:scale(0);
-o-transform:scale(0);
}

.scial:hover > span
{
transform:scale(1);
transition:0.5s linear;
-webkit-transform:scale(1);
-webkit-transition:0.5s linear;
-moz-transform:scale(1);
-moz-transition:0.5s linear;
-o-transform:scale(1);
-o-transition:0.5s linear;
-ms-transform:scale(1);
-ms-transition:0.5s linear;
}
.fbs
{
background:#5A5AFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhwL1ODoKkgkZHJwGzDgXw1vckubzbqINZl4I3AuNwg2kUlGz6X6cO9x_moD_V2a8Vd7qrzrF0L6IeUPs_9SeYlr67U56yRPpoly6oLPVltrdQSsU7XlMV4lwv-j2vchAIFN89uczy3WM/s1600/facebook.png) center no-repeat;
background-size:40px;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-ms-border-radius:40px;
border:1px solid transparent;
}
.fbs:hover
{
background-position:95% 50%;
box-shadow:0 0 0 3px #5A5Aff;
border:1px dashed rgba(0,0,0,1);
}
.gp
{
background:#FF4949 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Yk0nwjhVYkWnJcPp83Jvdq5J7Ne2R2zStbez8Yj3MIdAOULbIFK_Qm54dgzmZcpfSl1qaYvCb8EjIzuzmUXzIwgThtHWCinlfZ5w2726Ahv8O_l3YQszimpmcARb0arqmjNVvXfCW9s/s1600/gplus.png) center no-repeat;
background-size:40px;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-ms-border-radius:40px;
border:1px solid transparent;
}
.gp:hover
{
background-position:95% 50%;
box-shadow:0 0 0 3px #FF4949;
border:1px dashed rgba(0,0,0,1);
}
.tw
{
background:#00EBFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYo1FUMKJA7A46wRisOBYohK8nKZqAFLCKkXueNgDM97-UCXQFHsGFbxlftJyhgIx0dcq5aTCo3xXZkanNtLphieGWoT69T-g8Fjn2dtGn1uGVdpX4qnY8rlON75Jp2NqryriojnVLoNY/s1600/twitter.png) center no-repeat;
background-size:40px;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-ms-border-radius:40px;
border:1px solid transparent;
}
.tw:hover
{
background-position:95% 50%;
box-shadow:0 0 0 3px #00EBFF;
border:1px dashed rgba(0,0,0,1);
}

.st
{
background:#FFB6B3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0-NVP7RQOVwSKmQurANcZzi9yTUkjuX-S1_TpeBd1reGKlpWQTGSDnhkl3GvHr6nduc8oeC020FPTTDR1DGPROO0e6MByvEg1LKsHL-0lq5EwkAK8A033XJPMdLpXcRsjhEGKxJO7CFI/s1600/stumbleupon.png) center no-repeat;
background-size:40px;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-ms-border-radius:40px;
border:1px solid transparent;
}
.st:hover
{
background-position:95% 50%;
box-shadow:0 0 0 3px #FFB6B3;
border:1px dashed rgba(0,0,0,1);
}

6. Now Search for <div class='post-footer'> And paste the below code just below it.

<em>Share This Post, If You Find This Awesome</em><span><a href="http://creative-blogging-tips.blogspot.in/2013/03/awesome-social-sharing-widget-for-blog.html" style="float: right;">Powered By CBT</a></span><hr/><div class='scial fbs'><span><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'>Facebook</a></span></div>
<div class='scial tw'><span><a expr:href='&quot;http://twitter.com/home/?status=Check this out: &quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'>Twitter</a></span></div>
<div class='scial gp'><span><a expr:href='&quot;https://plus.google.com/share?url=&quot; + &quot;en&amp;url=&quot; + data:post.url' target='_blank' title='Share On Google Plus !'>Google+</a></span></div>
<div class='scial st'><span><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'>Stumbleupon</a>
</span></div>

7. You're Almost Done Adding this widget, but if you want to add this to starting of the blog posts, then add last code above <data:post.body/>.
8. If still any problem persists then Ask in comment.

More Widgets
Responsive Footer for Blogger
Setting Up Linkwithin On Your Blog(Direct Install)
Recent Comment Widget