DevAnswer - Developers Answer

HTML Social Buttons on Sidebar with Followers Count

31st October

Preview


Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com  -->


<style>
.share {
  width: 32px;
  height: 144px;
  padding: 5px;
  margin: 0;
  color: #444;
  border-radius: 0 8px 8px 0;
  border: 1px solid #ccc;
  border-left-width: 0;
  box-shadow: 0px 0px 10px #ccc;
  position: fixed;
  top: calc(50% - 75px);
  left: 0px;
  z-index: 295;
}
.share.expanded {
  width: 64px;
}
.share.expanded ul.share-other, .share.expanded .share-less {
  display: block;
}
.share.expanded .share-more {
  display: none;
}
.share ul {
  padding: 0;
  margin: 0;
  display: block;
  float: left;
}
.share ul.share-other {
  display: none;
}
.share ul li {
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  font-size: 22px;
  text-align: center;
  display: block;
  list-style-type: none;
  cursor: pointer;
  transition: all .25s linear;
  z-index: 310;
}
.share ul li:hover {
  background: #aaa;
}
.share ul li a {
  color: #aaa;
}
.share ul li.share-fb:hover {
  background: #3b5999;
}
.share ul li.share-fb a {
  color: #3b5999;
}
.share ul li.share-tw:hover {
  background: #55acee;
}
.share ul li.share-tw a {
  color: #55acee;
}
.share ul li.share-inst:hover {
  background: #ff00b3;
}
.share ul li.share-inst a {
  color: #ff00b3;
}
.share ul li.share-pi:hover {
  background: #cc2127;
}
.share ul li.share-pi a {
  color: #cc2127;
}
.share ul li.share-re:hover {
  background: #336699;
}
.share ul li.share-re a {
  color: #336699;
}
.share ul li.share-tu:hover {
  background: #35465c;
}
.share ul li.share-tu a {
  color: #35465c;
}
.share ul li.share-in:hover {
  background: #007bb6;
}
.share ul li.share-in a {
  color: #007bb6;
}
.share ul li a {
  display: block;
}
.share ul li a:hover {
  color: white;
}
.share .share-more, .share .share-less {
  width: 32px;
  height: 16px;
  line-height: 16px;
  color: #555;
  font-family: sans-serif;
  font-size: 9px;
  text-decoration: none;
  text-align: center;
  display: block;
}
.share .share-less {
  display: none;
}
body {
  font-family: sans-serif;
}
[data-tooltip] {
  position: relative;
}
[data-tooltip]:before, [data-tooltip]:after {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s linear, visibility 0.2s linear, transform 0.2s linear;
  transform: translate3d(0, 0, 0);
  position: absolute;
  bottom: 50%;
  left: 100%;
  pointer-events: none;
}
[data-tooltip]:before {
  content: "";
  margin: 0 0 0 -12px;
  background: transparent;
  border: 6px solid transparent;
  border-right-color: #ccc;
  top: calc(50% - 6px);
  z-index: 1001;
}
[data-tooltip]:after {
  content: attr(data-tooltip);
  height: 30px;
  line-height: 30px;
  padding: 0 8px;
  margin: 0 0 -16px 0;
  color: #444;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  z-index: 1000;
}
[data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after {
  visibility: visible;
  opacity: 1;
  transform: translateX(12px);
}
</style>

</head>
<body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.13/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<aside class="share" ng-app="app" ng-controller="ShareCtrl">
    <ul>
        <li class="share-fb"><a href="#" data-tooltip="{{shares.facebook | shortNumber}}"><i class="fa fa-facebook"></i></a></li>
        <li class="share-tw"><a href="#" data-tooltip="{{shares.twitter | shortNumber}}"><i class="fa fa-twitter"></i></a></li>
        <li class="share-inst"><a href="#"><i class="fa fa-instagram"></i></a></li>
        <li class="share-pi"><a href="#"><i class="fa fa-pinterest"></i></a></li>
    </ul>
    <ul class="share-other">
        <li class="share-in"><a href="#"><i class="fa fa-linkedin"></i></a></li>
        <li class="share-re"><a href="#"><i class="fa fa-reddit"></i></a></li>
        <li class="share-tu"><a href="#"><i class="fa fa-tumblr"></i></a></li>
        <li><a href="#"><i class="fa fa-envelope"></i></a></li>
    </ul>
    <a href="#" class="share-more">more</a>
    <a href="#" class="share-less">less</a>
</aside><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
$(".share-more").click(function(){
  $(this).parent().addClass("expanded");
});
$(".share-less").click(function(){
  $(this).parent().removeClass("expanded");
});
angular.module("app", ["app.directives", "app.filters"]);
function ShareCtrl($scope) {
  var url = "https://codepen.io";
  $scope.shares = {
    facebook: 1234,
    twitter: 5678,
    stumbleupon: 0
  };
  $.getJSON("https://graph.facebook.com/" + url, function(data) {
    $scope.shares.facebook = data.shares;
  });
  $.getJSON("https://cdn.api.twitter.com/1/urls/count.json?url=" + url + '&callback=?', function(data) {
    $scope.shares.twitter = data.count;
  });
};
angular.module("app.directives", []);
angular.module("app.filters", [])
.filter("shortNumber", function () {
  return function (value) {
    if (value >= 1000000) {
      return Math.round(value/1000000) + "M";
    }
    if (value >= 1000) {
      return Math.round(value/1000) + "K";
    }
    return value;
  };
});
</script>

</body>
</html>                        



Other Codes