Home / Blogger Widget / Ultimate Social Media Counter Widget For Blogger

Ultimate Social Media Counter Widget For Blogger

in
social counter widget

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.

This is known by almost all Blogger.  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.


The base design of this widget come from WordPress social counter plugin. However I just modified it for Blogger platform users. You can see the demo from below image.

social media widget


To install this cool widget please follow the below steps-

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Locate the <head> by pressing Ctrl+F (Windows) or CMD+F (Mac) 

Step 4 Paste the Font Awesome stylesheet After/Below <head> 
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
Step 5 Again Locate the]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F 

Step 6 Paste the below CSS script Font Awesome Before/Above ]]></b:skin>

/* Social Media with counter by www.bloggerspice.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
}

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

.bs-colored-social .fa,
.bs-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
}

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

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

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

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

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

.bs-colored-social.icon-zoom .fa:hover,
.bs-colored-social.icon-zoom .fa:active,
.bs-social-icons.icon-zoom .fa:hover,
.bs-social-icons.icon-zoom .fa:active,
.bs-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)
}

.bs-colored-social.icon-rotate .fa:hover,
.bs-colored-social.icon-rotate .fa:active,
.bs-social-icons.icon-rotate .fa:hover,
.bs-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)
}

.bs-colored-social .fa-dribbble,
.bs-social-icons .fa-dribbble:hover,
.bs-socialicons .bs-dribbble:hover .bs-sicon {
  background-color: #F46899
}


.bs-colored-social .fa-stumbleupon,
.bs-social-icons .fa-stumbleupon:hover,
.bs-socialicons .bs-stumbleupon:hover .bs-sicon {
  background-color: #eb4924
}

.bs-colored-social .fa-reddit,
.bs-social-icons .fa-reddit:hover {
  background-color: #5f99cf
}

.bs-colored-social .fa-facebook,
.bs-social-icons .fa-facebook:hover,
.bs-socialicons .bs-facebook:hover .bs-sicon {
  background-color: #3C599F
}

.bs-colored-social .fa-rss,
.bs-social-icons .fa-rss:hover,
.bs-socialicons .bs-rss:hover .bs-sicon {
  background-color: #f26522
}

.bs-colored-social .fa-flickr,
.bs-social-icons .fa-flickr:hover,
.bs-socialicons .bs-flickr:hover .bs-sicon {
  background-color: #d51007
}

.bs-colored-social .fa-flickr,
.bs-social-icons .fa-flickr:hover {
  background-color: #FF0084
}

.bs-colored-social .fa-instagram,
.bs-social-icons .fa-instagram:hover,
.bs-socialicons .bs-instagram:hover .bs-sicon {
  background-color: #685243
}

.bs-colored-social .fa-foursquare,
.bs-social-icons .fa-foursquare:hover,
.bs-socialicons .bs-foursquare:hover .bs-sicon {
  background-color: #0086BE
}

.bs-colored-social .fa-github,
.bs-social-icons .fa-github:hover,
.bs-socialicons .bs-github:hover .bs-sicon {
  background-color: #070709
}

.bs-colored-social .fa-google-plus,
.bs-social-icons .fa-google-plus:hover,
.bs-socialicons .bs-googleplus:hover .bs-sicon {
  background-color: #CF3D2E
}

.bs-colored-social .fa-instagram,
.bs-social-icons .fa-instagram:hover {
  background-color: #A1755C
}

.bs-colored-social .fa-linkedin,
.bs-social-icons .fa-linkedin:hover,
.bs-socialicons .bs-linkedin:hover .bs-sicon {
  background-color: #0085AE
}

.bs-colored-social .fa-pinterest,
.bs-social-icons .fa-pinterest:hover,
.bs-socialicons .bs-pinterest:hover .bs-sicon {
  background-color: #CC2127
}

.bs-colored-social .fa-twitter,
.bs-social-icons .fa-twitter:hover,
.bs-socialicons .bs-twitter:hover .bs-sicon {
  background-color: #32CCFE
}

.bs-colored-social .fa-vk,
.bs-social-icons .fa-vk:hover,
.bs-socialicons .bs-vk:hover .bs-sicon {
  background-color: #375474
}

.bs-colored-social .fa-soundcloud,
.bs-social-icons .fa-soundcloud:hover,
.bs-socialicons .bs-soundcloud:hover .bs-sicon {
  background-color: #FF4100
}

.bs-colored-social .fa-vine,
.bs-social-icons .fa-vine:hover,
.bs-socialicons .bs-vine:hover .bs-sicon {
  background-color: #35B57C
}


.bs-colored-social .fa-youtube,
.bs-social-icons .fa-youtube:hover,
.bs-socialicons .bs-youtube:hover .bs-sicon {
  background-color: #C52F30
}

.top-social ul li {
  margin: 0;
  padding: 0
}

div#socialicons-top {
  float: left
}

.top-social .list-unstyled {
  margin: 0
}

.bs-socialicons {
  text-align: center;
  overflow: auto;
  font-size: 22px;
  margin: 0 -8px
}

.bs-socialicons .bs-socialInner {
  position: relative;
  overflow: hidden;
  padding-left: 8px
}

.bs-socialicons .bs-social {
  float: left;
  width: 25%
}

.bs-socialicons .bs-sinn {
  padding-right: 8px
}

.bs-socialicons .bs-sinn:hover .bs-sicon {
  color: #fff
}

.bs-socialicons .bs-sicon {
  display: block;
  padding: 10px 0;
}

.bs-socialicons .bs-facebook .bs-sicon {
  color: #3B5998
}

.bs-socialicons .bs-googleplus .bs-sicon {
  color: #DD4B39
}

.bs-socialicons .bs-twitter .bs-sicon {
  color: #2AA9E0
}

.bs-socialicons .bs-instagram .bs-sicon {
  color: #685243
}

.bs-socialicons .bs-pinterest .bs-sicon {
  color: #CC2028
}

.bs-socialicons .bs-youtube .bs-sicon {
  color: #DE1829
}

.bs-socialicons .bs-vine .bs-sicon {
  color: #35B57C
}

.bs-socialicons .bs-soundcloud .bs-sicon {
  color: #FF4100
}

.bs-socialicons .bs-vk .bs-sicon {
  color: #45668e
}

.bs-socialicons .bs-foursquare .bs-sicon {
  color: #f94877
}

.bs-socialicons .bs-github .bs-sicon {
  color: #333333
}

.bs-socialicons .bs-dribbble .bs-sicon {
  color: #ea4c89
}

.bs-socialicons .bs-stumbleupon .bs-sicon {
  color: #eb4924
}

.bs-socialicons .bs-linkedin .bs-sicon {
  color: #0085AE
}

.bs-socialicons .bs-rss .bs-sicon {
  color: #f26522
}

.bs-socialicons .bs-flickr .bs-sicon {
  color: #FF0084
}

.bs-socialicons .bs-sicon {
  background: #F5F5F5;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease
}

.bs-socialicons .bs-scount {
  display: block;
  color: #FFFFFF;
  background: #007ABE;
  padding: 5px 0;
  position: relative;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600
}

.bs-socialicons .bs-scount:after {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(238, 238, 238, 0);
  border-bottom-color: #007ABE;
  border-width: 4px;
  margin-left: -4px
}

.bs-socialicons .bs-scount:hover {
  background: #222222;
}

Step 7 Now click Save template button.

Step 8 Now go to your Blogger Dashboard

Step 9 Go to your Layout tab.

Step 10 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget. Leave the Title field blank.

Step 11 Now Paste the HTML code for social counter widget in "HTML/JavaScript" Gadget.

<div class="bs-socialicons">
<div class="bs-socialInner">
  <!--Facebook-->
    <div class="bs-social">
  <div class="bs-facebook bs-sinn">
      <a href='#' target='_blank' tibse="Facebook">
      <span class="bs-sicon"><i class="fa fa-facebook"></i></span>
      <span class="bs-scount">3.1K</span>
      </a>
      </div>
      </div>
  <!--Google Plus-->
    <div class="bs-social">
  <div class="bs-googleplus bs-sinn">
      <a href='#' target='_blank' tibse="Google Plus">
      <span class="bs-sicon"><i class="fa fa-google-plus"></i></span>
      <span class="bs-scount">2K</span>
      </a>
    </div>
    </div>
  <!--Twitter-->
  <div class="bs-social">
  <div class="bs-twitter bs-sinn">
      <a href='#' target='_blank' tibse="Twitter">
      <span class="bs-sicon"><i class="fa fa-twitter"></i></span>
      <span class="bs-scount">1.4K</span>
      </a>
    </div>
    </div>
  <!--Instagram-->
  <div class="bs-social">
  <div class="bs-instagram bs-sinn">
      <a href='#' target='_blank' tibse="Instagram">
      <span class="bs-sicon"><i class="fa fa-instagram"></i></span>
      <span class="bs-scount">2K</span>
      </a>
    </div>
    </div>
  <!--Pinterest-->
  <div class="bs-social">
  <div class="bs-pinterest bs-sinn">
      <a href='#' target='_blank' tibse="Pinterest">
      <span class="bs-sicon"><i class="fa fa-pinterest"></i></span>
      <span class="bs-scount">4.5K</span>
      </a>
    </div>
    </div>
  <!--Youtube-->
  <div class="bs-social">
  <div class="bs-youtube bs-sinn">
      <a href='#' target='_blank' tibse="YouTube">
      <span class="bs-sicon"><i class="fa fa-youtube"></i></span>
      <span class="bs-scount">2.8K</span>
      </a>
    </div>
    </div>
  <!--Vine-->
  <div class="bs-social">
  <div class="bs-vine bs-sinn">
      <a href='#' target='_blank' tibse="Vine">
      <span class="bs-sicon"><i class="fa fa-vine"></i></span>
      <span class="bs-scount">3.3K</span>
      </a>
    </div>
    </div>
  <!--SoundCloud-->
  <div class="bs-social">
  <div class="bs-soundcloud bs-sinn">
      <a href='#' target='_blank' tibse="SoundCloud">
      <span class="bs-sicon"><i class="fa fa-soundcloud"></i></span>
      <span class="bs-scount">3.9K</span>
      </a>
    </div>
    </div>
    
      <!--VK-->
      <div class="bs-social">
  <div class="bs-vk bs-sinn">
      <a href='#' target='_blank' tibse="VK">
      <span class="bs-sicon"><i class="fa fa-vk"></i></span>
      <span class="bs-scount">3.9K</span>
      </a>
    </div>
    </div>
      <!---->
      <div class="bs-social">
  <div class="bs-foursquare bs-sinn">
      <a href='#' target='_blank' tibse="Foursquare">
      <span class="bs-sicon"><i class="fa fa-foursquare"></i></span>
      <span class="bs-scount">3.9K</span>
      </a>
    </div>
    </div>
      <!--GitHub-->
      <div class="bs-social">
  <div class="bs-github bs-sinn">
      <a href='#' target='_blank' tibse="GitHub">
      <span class="bs-sicon"><i class="fa fa-github"></i></span>
      <span class="bs-scount">3.9K</span>
      </a>
    </div>
    </div>
      <!--Dribbble-->
      <div class="bs-social">
  <div class="bs-dribbble bs-sinn">
      <a href='#' target='_blank' tibse="Dribbble">
      <span class="bs-sicon"><i class="fa fa-dribbble"></i></span>
      <span class="bs-scount">3.9K</span>
      </a>
    </div>
    </div>
    
     <!--Stumbleupon-->
      <div class="bs-social">
  <div class="bs-stumbleupon bs-sinn">
      <a href='#' target='_blank' tibse="Stumbleupon">
      <span class="bs-sicon"><i class="fa fa-stumbleupon"></i></span>
      <span class="bs-scount">3.4K</span>
      </a>
    </div>
    </div>

     <!--Linkedin-->
      <div class="bs-social">
  <div class="bs-linkedin bs-sinn">
      <a href='#' target='_blank' tibse="Linkedin">
      <span class="bs-sicon"><i class="fa fa-linkedin"></i></span>
      <span class="bs-scount">1.5K</span>
      </a>
    </div>
    </div>

     <!--Rss-->
      <div class="bs-social">
  <div class="bs-rss bs-sinn">
      <a href='#' target='_blank' tibse="Rss">
      <span class="bs-sicon"><i class="fa fa-rss"></i></span>
      <span class="bs-scount">1.9K</span>
      </a>
    </div>
    </div>

     <!--Flickr-->
      <div class="bs-social">
  <div class="bs-flickr bs-sinn">
      <a href='#' target='_blank' tibse="flickr">
      <span class="bs-sicon"><i class="fa fa-flickr"></i></span>
      <span class="bs-scount">2.9K</span>
      </a>
    </div>
    </div>

    </div>
</div>
</div>

Customization


  • Please replace all #from <a href='#' target='_blank' tibse with your social media site’s and profile links.
  • And alter the counter number from <span class="bs-scount">2.9K</span> code.
Step 12 And finally click orange color Save button. You’re done!

Now check your Blogger template and see beautiful social counter widget. However this is a manual social counter widget so you have to edit the number of counter and write manually. For any further help you can leave a comment below. 
Author Image

About shahid Mandokhail
Shahid Khan Mandokhail the Man behind the SH Pashto 4 YOU Living in Zhob City , graduated from University of Balochistan..

You May Also Like:
Labels:

No comments:

Post a Comment