Ultimate Social Media Counter Widget For Blogger

Home Blogger site is best for you

by homeblogger7

HTML

<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
<div class="HB-socialicons">
<div class="HB-socialInner">
  <!--Facebook-->
    <div class="HB-social">
  <div class="HB-facebook HB-sinn">
      <a href='#' target='_blank' tibse="Facebook">
      <span class="HB-sicon"><i class="fa fa-facebook"></i></span>
      <span class="HB-scount">3.1K</span>
      </a>
      </div>
      </div>
  <!--Google Plus-->
    <div class="HB-social">
  <div class="HB-googleplus HB-sinn">
      <a href='#' target='_blank' tibse="Google Plus">
      <span class="HB-sicon"><i class="fa fa-google-plus"></i></span>
      <span class="HB-scount">2K</span>
      </a>
    </div>
    </div>
  <!--Twitter-->
  <div class="HB-social">
  <div class="HB-twitter HB-sinn">
      <a href='#' target='_blank' tibse="Twitter">
      <span class="HB-sicon"><i class="fa fa-twitter"></i></span>
      <span class="HB-scount">1.4K</span>
      </a>
    </div>
    </div>
  <!--Instagram-->
  <div class="HB-social">
  <div class="HB-instagram HB-sinn">
      <a href='#' target='_blank' tibse="Instagram">
      <span class="HB-sicon"><i class="fa fa-instagram"></i></span>
      <span class="HB-scount">2K</span>
      </a>
    </div>
    </div>
  <!--Pinterest-->
  <div class="HB-social">
  <div class="HB-pinterest bs-sinn">
      <a href='#' target='_blank' tibse="Pinterest">
      <span class="HB-sicon"><i class="fa fa-pinterest"></i></span>
      <span class="HB-scount">4.5K</span>
      </a>
    </div>
    </div>
  <!--Youtube-->
  <div class="HB-social">
  <div class="HB-youtube HB-sinn">
      <a href='#' target='_blank' tibse="YouTube">
      <span class="HB-sicon"><i class="fa fa-youtube"></i></span>
      <span class="HB-scount">2.8K</span>
      </a>
    </div>
    </div>
  <!--Vine-->
  <div class="HB-social">
  <div class="HB-vine HB-sinn">
      <a href='#' target='_blank' tibse="Vine">
      <span class="HB-sicon"><i class="fa...

CSS

/* Social Media with counter by www.homeblog7.blogspot.com */
.list-unstyled {
  padding-left: 0;
  list-style: none;
  margin: 2px
}

.list-inline li {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
  margin-bottom: 10px
}

.HB-colored-social .fa,
.HB-social-icons .fa {
  font-size: 16px
}

.HB-colored-social .fa,
.HB-social-icons .fa {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out
}

.HB-colored-social .fa,
.HB-social-icons .fa {
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #FFF;
  color: rgba(255, 255, 255, 0.8)
}

.HB-colored-social.icon-circle .fa,
.HB-social-icons.icon-circle .fa {
  border-radius: 50%
}

.HB-colored-social.icon-rounded .fa,
.HB-social-icons.icon-rounded .fa {
  border-radius: 2px
}

.HB-colored-social.icon-flat .fa,
.HB-social-icons.icon-flat .fa {
  border-radius: 0
}

.HB-colored-social .fa:hover,
.HB-colored-social .fa:active,
.HB-social-icons .fa:hover,
.HB-social-icons .fa:active {
  color: #FFF
}

.HB-colored-social.icon-zoom .fa:hover,
.HB-colored-social.icon-zoom .fa:active,
.HB-social-icons.icon-zoom .fa:hover,
.HB-social-icons.icon-zoom .fa:active,
.HB-social-sidebar li:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1)
}

.HB-colored-social.icon-rotate .fa:hover,
.HB-colored-social.icon-rotate .fa:active,
.HB-social-icons.icon-rotate .fa:hover,
.HB-social-icons.icon-rotate .fa:active {
  -webkit-transform: scale(1.1) rotate(360deg);
  -moz-transform: scale(1.1) rotate(360deg);
  -ms-transform: scale(1.1) rotate(360deg);
  -o-transform: scale(1.1) rotate(360deg);
  transform: scale(1.1) rotate(360deg)
}

.HB-colored-social .fa-dribbble,
.HB-social-icons .fa-dribbble:hover,
.HB-socialicons .HB-dribbble:hover .HB-sicon {
 ...