How To Social Media Counter Widget For Blogger (Sidebar)

Social media helps the Blog owner to grow their Blog traffic indirectly. You won’t able to reach with your publish content towards maximum number of people. But If you share your content on various social media site then this will help you to increase your Blog traffic from social media. Whenever we share any content in social media site like Facebook, Twitter etc then  instantly social media site send the content on their news feed and send a notification to its page Fans and followers. As a result there has a chance to visit read your content through social media site.

Now a day’s social media sites are helping to grow a Blog site from foundation to peak. So we must use social media site to grow our own Blog. However for our existing Blog visitors we should add some social media widget thus they can get connect with it.However this is not possible to add all social media fan box or widget in a Blog because it will affect the Blog loading time. In this case we can use this social counter widget which will take small space on your Blog and you will able to display maximum number of your Blog’s social media site links in one place.

Adding this widget to Blogspot or blogger.com blog is very easy and quick. All you need to do is follow the step by step guide and please do not implement it if you are confused, feel free to question me in the comment section.

Step 1: Simply visit blogger.com locate footer layout section.

Step 2: Click on Add a Gadget.

Step 3: Now click on HTML/JavaScript & Paste the below code inside the box.

<div class="td_block_wrap td_block_social_counter td-social-style5 td-social-boxed td-pb-border-top">
 <div class="td-social-list">
  <div class="td_social_type td-pb-margin-side td_social_facebook">
   <div class="td-social-box">
    <div class="td-sp td-sp-facebook"></div>
    <span class="td_social_info">283</span>
    <span class="td_social_info td_social_info_name">Fans</span>
    <span class="td_social_button">
     <a href="https://www.facebook.com/TheEasilyLearn" target="_blank">Like</a>
    </span>
   </div>
  </div>
  <div class="td_social_type td-pb-margin-side td_social_googleplus">
   <div class="td-social-box">
    <div class="td-sp td-sp-googleplus"></div>
    <span class="td_social_info">26</span>
    <span class="td_social_info td_social_info_name">Followers</span>
    <span class="td_social_button">
     <a href="https://plus.google.com/+TheEasilyLearn" target="_blank">Follow</a>
    </span>
   </div>
  </div>
  <div class="td_social_type td-pb-margin-side td_social_instagram">
   <div class="td-social-box">
    <div class="td-sp td-sp-instagram"></div>
    <span class="td_social_info">144</span>
    <span class="td_social_info td_social_info_name">Followers</span>
    <span class="td_social_button">
     <a href="https://www.instagram.com/easilylearn/" target="_blank">Follow</a>
    </span>
   </div>
  </div>
  <div class="td_social_type td-pb-margin-side td_social_rss">
   <div class="td-social-box">
    <div class="td-sp td-sp-twitter"></div>
    <span class="td_social_info">240</span>
    <span class="td_social_info td_social_info_name">Followers</span>
    <span class="td_social_button">
     <a href="https://feedburner.google.com/fb/a/mailverify?uri=EasilyLearn" target="_blank">Follow</a>
    </span>
   </div>
  </div>

  <div class="td_social_type td-pb-margin-side td_social_twitter">
   <div class="td-social-box">
    <div class="td-sp td-sp-twitter"></div>
    <span class="td_social_info">176</span>
    <span class="td_social_info td_social_info_name">Followers</span>
    <span class="td_social_button">
     <a href="https://twitter.com/TheEasilyLearn" target="_blank">Follow</a>
    </span>
   </div>
  </div>

  <div class="td_social_type td-pb-margin-side td_social_youtube">
   <div class="td-social-box">
    <div class="td-sp td-sp-youtube"></div>
    <span class="td_social_info">16</span>
    <span class="td_social_info td_social_info_name">Subscribe</span>
    <span class="td_social_button">
     <a href="https://www.youtube.com/channel/UCHMjUEGsBgtS9S2JUnC6WuQ" target="_blank">Follow</a>
    </span>
   </div>
  </div>
 </div>
</div>

<style>
.td_block_social_counter {
    font-family: 'Open Sans',arial,sans-serif;
    font-weight: bold;
    font-size: 11px;
    color: #fff;
    margin-bottom: 47px;
}
.td-social-style5 .td-social-list {
  margin-left: -8px;
  margin-right: -8px;
  /* responsive portrait tablet */
}
@media (max-width: 1018px) {
  .td-social-style5 .td-social-list {
    margin-left: -2px;
    margin-right: -2px;
  }
}
.td-social-style5 .td-social-list {
  margin-left: -8px;
  margin-right: -8px;
  /* responsive portrait tablet */
}
@media (max-width: 1018px) {
  .td-social-style5 .td-social-list {
    margin-left: -2px;
    margin-right: -2px;
  }
}
.td-social-list {
  *zoom: 1;
}
.td-social-list:before,
.td-social-list:after {
  display: table;
  content: "";
  line-height: 0;
}
.td-social-list:after {
  clear: both;
}
.td-social-boxed .td_social_type {
  text-align: center;
  width: 33.3333%;
  margin: 0;
  float: left;
}
.td_social_type {
  width: 100%;
  margin-bottom: 10px;
  -webkit-transition: background-color 0.2s cubic-bezier(0, 0, 0.58, 1) 0s;
  -moz-transition: background-color 0.2s cubic-bezier(0, 0, 0.58, 1) 0s;
  -o-transition: background-color 0.2s cubic-bezier(0, 0, 0.58, 1) 0s;
  transition: background-color 0.2s cubic-bezier(0, 0, 0.58, 1) 0s;
}
.td-social-style5 .td_social_type .td-social-box {
  margin: 0 8px 16px;
  /* responsive portrait tablet */
  /* responsive portrait phone */
}
@media (min-width: 768px) and (max-width: 1018px) {
  .td-social-style5 .td_social_type .td-social-box {
    margin: 0 2px 4px;
  }
}
@media (max-width: 767px) {
  .td-social-style5 .td_social_type .td-social-box {
    margin: 0 2px 4px;
  }
}
.td-social-boxed .td_social_type .td-social-box {
  height: 100px;
  /* responsive portrait tablet */
}
@media (min-width: 768px) and (max-width: 1018px) {
  .td-social-boxed .td_social_type .td-social-box {
    height: 70px;
  }
}
.td_social_type .td-social-box {
  height: 32px;
  position: relative;
  overflow: hidden;
}
.td_social_type .td-social-box .td-sp {
  display: inline-block;
}
.td-social-boxed .td-sp {
  margin-top: 10px;
  /* responsive portrait tablet */
}
@media (min-width: 768px) and (max-width: 1018px) {
  .td-social-boxed .td-sp {
    margin-top: 4px;
  }
}
.td-social-boxed .td-sp::after {
  display: none;
}

.td_block_social_counter .td-sp {
  position: relative;
}
.td_block_social_counter .td-sp:after {
  content: '';
  width: 1px;
  height: 16px;
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  right: -1px;
  top: 8px;
}
.td-social-boxed .td_social_info {
  font-size: 17px;
  top: 0;
  /* responsive portrait tablet */
}
@media (min-width: 768px) and (max-width: 1018px) {
  .td-social-boxed .td_social_info {
    font-size: 13px;
    top: -12px;
  }
}
.td-social-boxed .td_social_info_name {
  font-size: 13px;
  font-weight: normal;
  /* responsive portrait tablet */
}
@media (min-width: 768px) and (max-width: 1018px) {
  .td-social-boxed .td_social_info_name {
    top: -17px;
    font-size: 10px;
  }
}
.td-social-boxed .td_social_info {
  font-size: 17px;
  top: 0;
  /* responsive portrait tablet */
}
@media (min-width: 768px) and (max-width: 1018px) {
  .td-social-boxed .td_social_info {
    font-size: 13px;
    top: -12px;
  }
}
.td-social-boxed .td_social_info_name {
  font-size: 13px;
  font-weight: normal;
  /* responsive portrait tablet */
}
@media (min-width: 768px) and (max-width: 1018px) {
  .td-social-boxed .td_social_info_name {
    top: -17px;
    font-size: 10px;
  }
}
.td-social-boxed .td_social_type span {
  display: block;
  width: 100%;
  padding: 0;
}
.td-social-boxed .td_social_button {
  opacity: 0;
  position: absolute;
  height: 100%;
  margin-top: 0;
  top: 0;
}
.td-social-boxed .td_social_button a:after {
  width: 100%;
  height: 100%;
}
.td_social_type .td_social_button {
  float: right;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0 14px;
  margin-top: 8px;
  top: 9px;
  height: 16px;
  line-height: 15px;
  text-transform: uppercase;
}
.td_social_type .td_social_button a {
  color: #fff;
}
.td_social_type .td_social_button a:after {
  content: "";
  display: block;
  height: 32px;
  position: absolute;
  right: 0;
  top: 0;
  width: 324px;
  /* responsive landscape tablet */
  /* responsive portrait tablet */
  /* responsive portrait phone */
}
@media (min-width: 1019px) and (max-width: 1140px) {
  .td_social_type .td_social_button a:after {
    width: 300px;
  }
}
@media (min-width: 768px) and (max-width: 1018px) {
  .td_social_type .td_social_button a:after {
    width: 228px;
  }
}
@media (max-width: 767px) {
  .td_social_type .td_social_button a:after {
    width: 100%;
  }
}
.td_social_type .td_social_button a:hover {
  color: inherit;
  text-decoration: none !important;
}
.td-social-boxed .td_social_button a:after {
  width: 100%;
  height: 100%;
}
.td_social_type .td_social_button a:after {
  content: "";
  display: block;
  height: 32px;
  position: absolute;
  right: 0;
  top: 0;
  width: 324px;
  /* responsive landscape tablet */
  /* responsive portrait tablet */
  /* responsive portrait phone */
}
@media (min-width: 1019px) and (max-width: 1140px) {
  .td_social_type .td_social_button a:after {
    width: 300px;
  }
}
@media (min-width: 768px) and (max-width: 1018px) {
  .td_social_type .td_social_button a:after {
    width: 228px;
  }
}
@media (max-width: 767px) {
  .td_social_type .td_social_button a:after {
    width: 100%;
  }
}
.td_social_googleplus .td-social-box {
    background-color: #eb4026;
}
.td_social_twitter .td-social-box {
    background-color: #29c5f6;
}
.td_social_facebook .td-social-box {
  background-color: #516eab;
}
.td_social_rss .td-social-box {
  background-color: #ff6600;
}
.td_social_soundcloud .td-social-box {
  background-color: #ff5419;
}
.td_social_twitter .td-social-box {
  background-color: #29c5f6;
}
.td_social_vimeo .td-social-box {
  background-color: #006599;
}
.td_social_youtube .td-social-box {
  background-color: #e14e42;
}
.td_social_googleplus .td-social-box {
  background-color: #eb4026;
}
.td_social_instagram .td-social-box {
  background-color: #417096;
}
@media (max-width: 1018px) and (min-width: 768px)
.td-social-boxed .td_social_info {
    font-size: 13px;
    top: -12px;
}
.td_social_type .td_social_info {
  padding: 0 0 0 9px;
  position: relative;
  top: 0px;
  font-size: 17px;
}
.td_social_type .td_social_info_name {
  /* responsive portrait tablet */
}
@media (min-width: 768px) and (max-width: 1018px) {
  .td_social_type .td_social_info_name {
    display: none;
  }
}
.td-sp {
    background-image: url(https://easily-learn.000webhostapp.com/wp-content/themes/Newspaper/images/sprite/elements.png);
    background-repeat: no-repeat;
    display: block;
}
.td-sp-twitter {
    width: 32px;
    height: 32px;
    background-position: -20px -436px;
}
.td-sp-googleplus {
  width: 32px;
  height: 32px;
  background-position: -20px -280px;
}
.td-sp-facebook {
  width: 32px;
  height: 32px;
  background-position: -20px -20px;
}
.td-sp-pinterest {
  width: 32px;
  height: 32px;
  background-position: -20px -72px;
}
.td-sp-rss {
  width: 32px;
  height: 32px;
  background-position: -20px -124px;
}
.td-sp-soundcloud {
  width: 32px;
  height: 32px;
  background-position: -20px -176px;
}
.td-sp-instagram {
  width: 32px;
  height: 32px;
  background-position: -20px -228px;
}
.td-sp-vimeo {
  width: 32px;
  height: 32px;
  background-position: -20px -332px;
}
.td-sp-youtube {
  width: 32px;
  height: 32px;
  background-position: -20px -384px;
}
.td_social_type:hover .td-social-box{
    background-color:#222;
}
</style>

Customization

Replace the below codes with your link and Likes

After pasting, save your widget and view your blog!