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>
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.