Add Social Media Counter Widget Using Font Awesome Icon In Blogger

0
Add Social Media Counter Widget Using Font Awesome Icon In Blogger
Hello Folks,Today in this article we are going to teach you how to add social media Font Awesome Icon with counter widget in blogger template.You can Add Social Counter Widget in your Blogger Sidebar. This will help to Grow your Social Media Fan and Follower. Your Blog or Website visitors will able to visit your social media sites from your Website easily.This design comes from wordpress,but we have modified for blogger platform users.To install this widget/gadget follow the steps mentioned below.

installation steps:

Step 1. Log in to your account and Go to your Blogger Dashboard
Step 2. Now click on -> Template -> Edit HTML
Step 3. Now search for the following <head> tag by pressing Ctrl+F 
Step 4. Paste the FontAwesome Icon stylesheet After/Below <head> "if your blog already have fontawesome icon stylesheet then you don't need to do it again,just skip this step."
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
Step 5. Now Search for ]]></b:skin> by pressing Ctrl+F
Step 6. Now paste the following CSS Before/Above ]]></b:skin>
/* Social Media with counter Widget by www.bloggersstand.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
}
.bsd-colored-social .fa,
.bsd-social-icons .fa {
  font-size: 16px
}
.bsd-colored-social .fa,
.bsd-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
}
.bsd-colored-social .fa,
.bsd-social-icons .fa {
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #FFF;
  color: rgba(255, 255, 255, 0.8)
}
.bsd-colored-social.icon-circle .fa,
.bsd-social-icons.icon-circle .fa {
  border-radius: 50%
}
.bsd-colored-social.icon-rounded .fa,
.bsd-social-icons.icon-rounded .fa {
  border-radius: 2px
}
.bsd-colored-social.icon-flat .fa,
.bsd-social-icons.icon-flat .fa {
  border-radius: 0
}
.bsd-colored-social .fa:hover,
.bsd-colored-social .fa:active,
.bsd-social-icons .fa:hover,
.bsd-social-icons .fa:active {
  color: #FFF
}
.bsd-colored-social.icon-zoom .fa:hover,
.bsd-colored-social.icon-zoom .fa:active,
.bsd-social-icons.icon-zoom .fa:hover,
.bsd-social-icons.icon-zoom .fa:active,
.bsd-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)
}
.bsd-colored-social.icon-rotate .fa:hover,
.bsd-colored-social.icon-rotate .fa:active,
.bsd-social-icons.icon-rotate .fa:hover,
.bsd-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)
}
.bsd-colored-social .fa-dribbble,
.bsd-social-icons .fa-dribbble:hover,
.bsd-socialicons .bsd-dribbble:hover .bsd-sicon {
  background-color: #F46899
}

.bsd-colored-social .fa-stumbleupon,
.bsd-social-icons .fa-stumbleupon:hover,
.bsd-socialicons .bsd-stumbleupon:hover .bsd-sicon {
  background-color: #eb4924
}
.bsd-colored-social .fa-reddit,
.bsd-social-icons .fa-reddit:hover {
  background-color: #5f99cf
}
.bsd-colored-social .fa-facebook,
.bsd-social-icons .fa-facebook:hover,
.bsd-socialicons .bsd-facebook:hover .bsd-sicon {
  background-color: #3C599F
}
.bsd-colored-social .fa-rss,
.bsd-social-icons .fa-rss:hover,
.bsd-socialicons .bsd-rss:hover .bsd-sicon {
  background-color: #f26522
}
.bsd-colored-social .fa-flickr,
.bsd-social-icons .fa-flickr:hover,
.bsd-socialicons .bsd-flickr:hover .bsd-sicon {
  background-color: #d51007
}
.bsd-colored-social .fa-flickr,
.bsd-social-icons .fa-flickr:hover {
  background-color: #FF0084
}
.bsd-colored-social .fa-instagram,
.bsd-social-icons .fa-instagram:hover,
.bsd-socialicons .bsd-instagram:hover .bsd-sicon {
  background-color: #685243
}
.bsd-colored-social .fa-foursquare,
.bsd-social-icons .fa-foursquare:hover,
.bsd-socialicons .bsd-foursquare:hover .bsd-sicon {
  background-color: #0086BE
}
.bsd-colored-social .fa-github,
.bsd-social-icons .fa-github:hover,
.bsd-socialicons .bsd-github:hover .bsd-sicon {
  background-color: #070709
}
.bsd-colored-social .fa-google-plus,
.bsd-social-icons .fa-google-plus:hover,
.bsd-socialicons .bsd-googleplus:hover .bsd-sicon {
  background-color: #CF3D2E
}
.bsd-colored-social .fa-instagram,
.bsd-social-icons .fa-instagram:hover {
  background-color: #A1755C
}
.bsd-colored-social .fa-linkedin,
.bsd-social-icons .fa-linkedin:hover,
.bsd-socialicons .bsd-linkedin:hover .bsd-sicon {
  background-color: #0085AE
}
.bsd-colored-social .fa-pinterest,
.bsd-social-icons .fa-pinterest:hover,
.bsd-socialicons .bsd-pinterest:hover .bsd-sicon {
  background-color: #CC2127
}
.bsd-colored-social .fa-twitter,
.bsd-social-icons .fa-twitter:hover,
.bsd-socialicons .bsd-twitter:hover .bsd-sicon {
  background-color: #32CCFE
}
.bsd-colored-social .fa-vk,
.bsd-social-icons .fa-vk:hover,
.bsd-socialicons .bsd-vk:hover .bsd-sicon {
  background-color: #375474
}
.bsd-colored-social .fa-soundcloud,
.bsd-social-icons .fa-soundcloud:hover,
.bsd-socialicons .bsd-soundcloud:hover .bsd-sicon {
  background-color: #FF4100
}
.bsd-colored-social .fa-vine,
.bsd-social-icons .fa-vine:hover,
.bsd-socialicons .bsd-vine:hover .bsd-sicon {
  background-color: #35B57C
}

.bsd-colored-social .fa-youtube,
.bsd-social-icons .fa-youtube:hover,
.bsd-socialicons .bsd-youtube:hover .bsd-sicon {
  background-color: #C52F30
}
.top-social ul li {
  margin: 0;
  padding: 0
}
div#socialicons-top {
  float: left
}
.top-social .list-unstyled {
  margin: 0
}
.bsd-socialicons {
  text-align: center;
  overflow: auto;
  font-size: 22px;
  margin: 0 -8px
}
.bsd-socialicons .bsd-socialInner {
  position: relative;
  overflow: hidden;
  padding-left: 8px
}
.bsd-socialicons .bsd-social {
  float: left;
  width: 25%
}
.bsd-socialicons .bsd-sinn {
  padding-right: 8px
}
.bsd-socialicons .bsd-sinn:hover .bsd-sicon {
  color: #fff
}
.bsd-socialicons .bsd-sicon {
  display: block;
  padding: 10px 0;
}
.bsd-socialicons .bsd-facebook .bsd-sicon {
  color: #3B5998
}
.bsd-socialicons .bsd-googleplus .bsd-sicon {
  color: #DD4B39
}
.bsd-socialicons .bsd-twitter .bsd-sicon {
  color: #2AA9E0
}
.bsd-socialicons .bsd-instagram .bsd-sicon {
  color: #685243
}
.bsd-socialicons .bsd-pinterest .bsd-sicon {
  color: #CC2028
}
.bsd-socialicons .bsd-youtube .bsd-sicon {
  color: #DE1829
}
.bsd-socialicons .bsd-vine .bsd-sicon {
  color: #35B57C
}
.bsd-socialicons .bsd-soundcloud .bsd-sicon {
  color: #FF4100
}
.bsd-socialicons .bsd-vk .bsd-sicon {
  color: #45668e
}
.bsd-socialicons .bsd-foursquare .bsd-sicon {
  color: #f94877
}
.bsd-socialicons .bsd-github .bsd-sicon {
  color: #333333
}
.bsd-socialicons .bsd-dribbble .bsd-sicon {
  color: #ea4c89
}
.bsd-socialicons .bsd-stumbleupon .bsd-sicon {
  color: #eb4924
}
.bsd-socialicons .bsd-linkedin .bsd-sicon {
  color: #0085AE
}
.bsd-socialicons .bsd-rss .bsd-sicon {
  color: #f26522
}
.bsd-socialicons .bsd-flickr .bsd-sicon {
  color: #FF0084
}
.bsd-socialicons .bsd-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
}
.bsd-socialicons .bsd-scount {
  display: block;
  color: #FFFFFF;
  background: #007ABE;
  padding: 5px 0;
  position: relative;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600
}
.bsd-socialicons .bsd-scount:after {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absdolute;
  pointer-events: none;
  border-color: rgba(238, 238, 238, 0);
  border-bottom-color: #007ABE;
  border-width: 4px;
  margin-left: -4px
}
.bsd-socialicons .bsd-scount:hover {
  background: #222222;
}

Step 7. Now Click Save template.
Step 8. Now go to your Blogger Dashboard
Step 9. Then Go to your Layout Section.
Step 10. Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.
Step 11. Now Paste the following HTML code in "HTML/JavaScript" Gadget.
<div class="bsd-socialicons">
<div class="bsd-socialInner">
  <!--Facebook-->
    <div class="bsd-social">
  <div class="bsd-facebook bsd-sinn">
      <a href='#' target='_blank' tibse="Facebook">
      <span class="bsd-sicon"><i class="fa fa-facebook"></i></span>
      <span class="bsd-scount">3.1K</span>
      </a>
      </div>
      </div>
  <!--Google Plus-->
    <div class="bsd-social">
  <div class="bsd-googleplus bsd-sinn">
      <a href='#' target='_blank' tibse="Google Plus">
      <span class="bsd-sicon"><i class="fa fa-google-plus"></i></span>
      <span class="bsd-scount">2K</span>
      </a>
    </div>
    </div>
  <!--Twitter-->
  <div class="bsd-social">
  <div class="bsd-twitter bsd-sinn">
      <a href='#' target='_blank' tibse="Twitter">
      <span class="bsd-sicon"><i class="fa fa-twitter"></i></span>
      <span class="bsd-scount">1.4K</span>
      </a>
    </div>
    </div>
  <!--Instagram-->
  <div class="bsd-social">
  <div class="bsd-instagram bsd-sinn">
      <a href='#' target='_blank' tibse="Instagram">
      <span class="bsd-sicon"><i class="fa fa-instagram"></i></span>
      <span class="bsd-scount">2K</span>
      </a>
    </div>
    </div>
  <!--Pinterest-->
  <div class="bsd-social">
  <div class="bsd-pinterest bsd-sinn">
      <a href='#' target='_blank' tibse="Pinterest">
      <span class="bsd-sicon"><i class="fa fa-pinterest"></i></span>
      <span class="bsd-scount">4.5K</span>
      </a>
    </div>
    </div>
  <!--Youtube-->
  <div class="bsd-social">
  <div class="bsd-youtube bsd-sinn">
      <a href='#' target='_blank' tibse="YouTube">
      <span class="bsd-sicon"><i class="fa fa-youtube"></i></span>
      <span class="bsd-scount">2.8K</span>
      </a>
    </div>
    </div>
  <!--Vine-->
  <div class="bsd-social">
  <div class="bsd-vine bsd-sinn">
      <a href='#' target='_blank' tibse="Vine">
      <span class="bsd-sicon"><i class="fa fa-vine"></i></span>
      <span class="bsd-scount">3.3K</span>
      </a>
    </div>
    </div>
  <!--SoundCloud-->
  <div class="bsd-social">
  <div class="bsd-soundcloud bsd-sinn">
      <a href='#' target='_blank' tibse="SoundCloud">
      <span class="bsd-sicon"><i class="fa fa-soundcloud"></i></span>
      <span class="bsd-scount">3.9K</span>
      </a>
    </div>
    </div>
 
      <!--VK-->
      <div class="bsd-social">
  <div class="bsd-vk bsd-sinn">
      <a href='#' target='_blank' tibse="VK">
      <span class="bsd-sicon"><i class="fa fa-vk"></i></span>
      <span class="bsd-scount">3.9K</span>
      </a>
    </div>
    </div>
      <!---->
      <div class="bsd-social">
  <div class="bsd-foursquare bsd-sinn">
      <a href='#' target='_blank' tibse="Foursquare">
      <span class="bsd-sicon"><i class="fa fa-foursquare"></i></span>
      <span class="bsd-scount">3.9K</span>
      </a>
    </div>
    </div>
      <!--GitHub-->
      <div class="bsd-social">
  <div class="bsd-github bsd-sinn">
      <a href='#' target='_blank' tibse="GitHub">
      <span class="bsd-sicon"><i class="fa fa-github"></i></span>
      <span class="bsd-scount">3.9K</span>
      </a>
    </div>
    </div>
      <!--Dribbble-->
      <div class="bsd-social">
  <div class="bsd-dribbble bsd-sinn">
      <a href='#' target='_blank' tibse="Dribbble">
      <span class="bsd-sicon"><i class="fa fa-dribbble"></i></span>
      <span class="bsd-scount">3.9K</span>
      </a>
    </div>
    </div>
 
     <!--Stumbleupon-->
      <div class="bsd-social">
  <div class="bsd-stumbleupon bsd-sinn">
      <a href='#' target='_blank' tibse="Stumbleupon">
      <span class="bsd-sicon"><i class="fa fa-stumbleupon"></i></span>
      <span class="bsd-scount">3.4K</span>
      </a>
    </div>
    </div>
     <!--Linkedin-->
      <div class="bsd-social">
  <div class="bsd-linkedin bsd-sinn">
      <a href='#' target='_blank' tibse="Linkedin">
      <span class="bsd-sicon"><i class="fa fa-linkedin"></i></span>
      <span class="bsd-scount">1.5K</span>
      </a>
    </div>
    </div>
     <!--Rss-->
      <div class="bsd-social">
  <div class="bsd-rss bsd-sinn">
      <a href='#' target='_blank' tibse="Rss">
      <span class="bsd-sicon"><i class="fa fa-rss"></i></span>
      <span class="bsd-scount">1.9K</span>
      </a>
    </div>
    </div>
     <!--Flickr-->
      <div class="bsd-social">
  <div class="bsd-flickr bsd-sinn">
      <a href='#' target='_blank' tibsde="flickr">
      <span class="bsd-sicon"><i class="fa fa-flickr"></i></span>
      <span class="bsd-scount">2.9K</span>
      </a>
    </div>
    </div>
    </div>
</div>
</div>

customization

  • Change all # with your profile URLS example:<a href='#' target='_blank' tibse="Facebook"> replace with <a href='https://www.facebook.com/bloggersstand' target='_blank' tibse="Facebook">
  • Change all Social counter number with your desired numbers,example:<span class="bsd-scount">2.9K</span> replace with <span class="bsd-scount">5.9K</span>
Now Save your gadget..Done !


We hope this article helped you to learn How To Add Social Media Counter Widget Using Font Awesome Icon In Blogger template.If you liked this article please Join us on Facebook,Twitter,Google Plus.
How to add install Social Media Counter Widget/gadget/tool Using Font Awesome Icon In Blogger template.
Hello Folks,Today in this article we are going to teach you how to add social media Font Awesom...
SUMMARY

How to add install Social Media Counter Widget/gadget/tool Using Font Awesome Icon In Blogger template.

You Might Also Like:

We hope this article helped you to learn Add Social Media Counter Widget Using Font Awesome Icon In Blogger. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "Add Social Media Counter Widget Using Font Awesome Icon In Blogger" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand