SLIDING SOCIAL FOLLOW US WIDGET WITH COUNTERS FOR BLOGGER
HTML
<!--Sliding Social Buttons Widget --><div class="tbislso"> <ul> <li><a class="tbisbox facebook" href="#"><p>15K+</p>Facebook </a></li> <li><a class="tbisbox twitter" href="#"><p>10K+</p>Twitter</a></li> <li><a class="tbisbox gplus" href="#"><p>5K+ </p>Google+</a></li> <li><a class="tbisbox pinterest" href="#"><p>4K+ </p>Pinterest</a></li> <li><a class="tbisbox rss" href="#"><p>10K+</p>RSS</a></li> </ul></div><!--Sliding Social Buttons Widget --></br>
</br>
</br>
</br><center>
Widget is Powered by <span style="color: #333333; font-family: Century Gothic, sans-serif;"><span style="font-size: 15px; line-height: 25px;"><a href="http://blogsfunda.com/">blogsfunda.com</a></span></span></div></center>
CSS
/* Sliding Social Buttons Widget */
.tbisbox {
font: 25px/24px normal 'Denk One', sans-serif;
display: inline-block;
position: relative;
width: 95%;
max-width: 280px;
margin: 0 auto 15px auto;
padding: 16px;
background-color: rgba(238, 238, 238, 0.1);
box-shadow: 8px 8px 0 0px rgba(0, 0, 0, 0.1);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.tbislso {
width: 95%;
max-width: 280px;
padding-top: 8px;
padding-left: 8px;
padding-right: 8px;
}
.tbislso a {
text-decoration: none !important;
}
.tbislso ul {
margin: 0;
padding: 0;
list-style: none;
}
.tbislso ul li {
display: inline;
margin: 0;
padding: 0;
text-indent: 0
}
.tbislso ul li a.facebook {
border-left: 65px solid rgba(59, 89, 152, 1);
color: rgba(59, 89, 152, 1);
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.tbislso ul li a.facebook p {
margin: 2px 20px 0 -70px;
display: inline-block;
color: #fff;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.tbislso ul li a.facebook:hover {
background: rgba(59, 89, 152, 1);
border-left: 0px solid rgba(59, 89, 152, 0.1);
color: #fff;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.tbislso ul li a.facebook:hover p {
opacity: 0;
-webkit-transition: all 1ms ease-in-out;
-moz-transition: all 1ms ease-in-out;
-ms-transition: all 1ms ease-in-out;
-o-transition: all 1ms ease-in-out;
...