Add Social Sharing Sliding Widget In Blogger

Social media has a great share in traffic building for blogs, besides the SEO it is the another great factor that can enhance the traffic in your blog. In that case you may also wish of having a beautiful eye catching Social Sharing Widget in your Blog. Today I'm presenting a tutorial on How To Apply This Widget to your Blog.

■ 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/AVvXsEgZczai58upLY8SY3NucWINbiI8_hyphenhyphenuTi8BGjOSwFll6-ZpVZRLbtJQRcGaqlmS5W_xBr8gMVzyEu0QPnolA8hEUymDkGIk8gCX1yk8VB_tBbLEuFM67LpeAzxYQTfW8EWGvN9UN8ONMCg/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">

<!-- Start Social Buttons Widget-->
<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>
<!--End Social Buttons Widget-->
</div>
</div>
</div>

Replace the colored fonts with the Url of your blog pages in given Social Networking Sites.