There are several social share buttons available in blogsphare, it is very important to have a social share widget in your blog. Using social media platforms we can promote our blog in easy way. We can get excellent traffic for our blog, i have shared some cool widgets in my previous post, in this post i am here with a beautiful social share widget below of your blog post. Let's have a demo of this awesome widget and be ready to add it to your blog.

Demo

I am a demo page :) CLICK ME !!

How it Works ?

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

How to add  it to blogger ?

Step 1: Open Blogger Dashboard>> Navigate to Template>> Click on Edit Html>> Tick Expand Widget Templates. Now Search For ]]></b:skin> ( use ctrl+f ) And just Above it paste Code given below.
.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/AVvXsEhsb91LHfYoaITxTkvhDZIwEMqGIHTHfYa_LScS9I_6G9miRWsFxHANLNL8O_rEByh1drRbbfjvEOFHTDLuPG24IkldCTnE_HsRnzxJ97FbvL5hy7qqkBU54LPM3K3AcYYzLiL1bkOtXfc/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/AVvXsEh_oU6AbaR_vx7-3ZDaBx1p77KG6M-JV7pJQRGZbkyNZXHDT5TUVd_vaGsxQykrn1G6So2Gz259l8RuGO7vbhC3ZDLk3SClT7z-hGaGS3Z6MP4rPyTKxvq8DuLhona2Oo7rKiFgSSwstqU/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/AVvXsEhO2Ee4mO4S-xXCh7-MageHKqtMKfD6cF3_JIPo-epI88yznohn8bltsjxbkoyRe4jv-Fj5iLe99WyXpD4AI47E7hOk4uTWoQo9FYLyF392e-rJB-UmfOST-J6SOytnQlyNUFoWzFvW3JE/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/AVvXsEgwJtWBSOAEXQZ5vfUhyqjnZsWYj3MMYXOAoRrlW3l4Tuw9f65soF3UJwHQ8wud6CeQ5FFg2ckY_pBUphJFfjVJHRYcidgiE6ZA4Xd3YS8E36L_msrAxfvmX0u63WXhHIPj5jwVTMe55t4/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);
}

Step 2: 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://www.pokharatech.com" style="float: right;">Get It</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>
Note: You're Almost Done to Adding this widget, but if you want to add this to starting of the blog posts, then add last code above <data:post.body/>.
Now Save Template.
That's it, if you face any problem adding this widget feel free to ask in comment box below. Peace, Happy Blogging.