Social Sharing Sliding Widget In Blogger

■ Open Blog Dashboard → Layout
■ Open Add Gadget
■ Add below given code in it.
■ And Hit Save button.

HTML & CSS

#lowerbar3.lowerbar.section{display:block;
background:#fff;
border:1px solid #ccc;width:300px;margin-top:20px;}
h2.title{display:inline-block;background:transparent;
border:0px solid #000;
padding:5px;
margin-top:-.5px;
z-index:50}
#stayconnected{
list-style:none;
text-decoration:none;
font-size:0.9em;
font-family:trebuchet ms,sans-serif;
}
#stayconnected a{
text-decoration:none;
font-family:trebuchet ms,sans-serif;
}
#stayconnected li{
position:relative;
height:38px;
cursor:pointer;
padding: 0 !important;
}
#stayconnected .facebook, .googleplus, .pinterest, .rss, .twitter{
position:relative;
z-index:5;
display:block;
float:none;
margin:10px 0 0;
width:210px;
height:38px;
border-radius:5px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjLvvQc7kffbqgKMcVzciGRs01ZRbYNWEdDnbSaoiLmTJO0Fy9PUqLN93g72kpKr_XUU4FqdjgEJ6OICO0kgHiZpCuqdB2LU_tS3EOhJe23pMBUsVgis-pbjjSEHiuWL_yzzaFCQ6cEEA/s800/sprites.png) no-repeat;
background-color:rgba(217,30,118,.42);
-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
box-shadow:rgba(0,0,0,.28) 0 2px 3px;
color:#141414;
text-align:left;
text-indent:50px;
text-shadow:#333 0 1px 0;
white-space:nowrap;
line-height:32px;
-webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-moz-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-ms-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-o-transition:width .25s ease-in-out,background-color .25s ease-in-out;
transition:width .25s ease-in-out,background-color .25s ease-in-out;
-o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
}
#stayconnected li:after{
position:absolute;
top:0; left:50px;
z-index:2;
display:block;
height:38px;
color:#141414;
content:attr(data-alt);
line-height:32px;
}
#stayconnected .icon{
overflow:hidden;
color:#fafafa;}
#stayconnected .facebook{
width:32px;
height:32px;
background-color:rgba(59,89,152,0.42);
background-position:0 0;
}
#stayconnected .twitter{
width:32px;
height:32px;
background-color:rgba(64,153,255,0.42);
background-position:0 -33px;
}
#stayconnected .googleplus{
width:32px;
height:32px;
background-color:rgba(228,69,36,0.42);
background-position:-3px -66px;
}
#stayconnected .pinterest{
width:32px;
height:32px;
background-color:rgba(174,45,39,0.42);
background-position:0 -95px;
}
#stayconnected .rss{
width:32px;
height:32px;
background-color:rgba(255,102,0,0.42);
background-position:-3px -126px;
}
#stayconnected li:hover .icon,
.touch #stayconnected li .icon{
width:210px;
}
.touch #stayconnected li .facebook, #stayconnected li:hover .facebook{
background-color:rgba(59,89,152,1);
}
.touch #stayconnected li .twitter, #stayconnected li:hover .twitter{
background-color:rgba(64,153,255,1);
}
.touch #stayconnected li .googleplus, #stayconnected li:hover .googleplus{
background-color:rgba(228,69,36,1);
}
.touch #stayconnected li .pinterest, #stayconnected li:hover .pinterest{
background-color:rgba(174,45,39,1);
}
.touch #stayconnected li .rss, #stayconnected li:hover .rss{
background-color:rgba(255,102,0,1);
}
a.quickedit{display:none}

<div class="lowerbar section" id="lowerbar3">
<div class="widget HTML" id="HTML8">
<h2 class="title">Follow Us</h2>
<div class="widget-content">


<ul id="stayconnected">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="http://www.facebook.com/Your FB ID URL" target="_blank">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter">
<a class="icon twitter" href="http://twitter.com/Your twitter ID URL" target="_blank">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+">
<a class="icon googleplus" href="https://plus.google.com/Google+ ID URL" target="_blank">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest">
<a class="icon pinterest" href="http://pinterest.com/pinterest ID URL" target="_blank">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS">
<a class="icon rss" href="http://feeds.feedburner.com/feedburner ID" target="_blank">Subscribe with RSS</a></li>
</ul>

</div>
</div>
</div>

DESIGNER