Add Social Media to Blogger with Count-Numbers

Add Social Media Icons To Your Blogger With Count-Numbers
Social media is one of the key ways to gain exposure for your blog- and to connect with others. One of the easiest ways to do this is to ensure there are social media icons on your blog.
Today, i will show you how to add social media icons to your blogger with count-numbers. This widget is really a beautiful and yet important part for a blogger.

Many blog designers will create custom icons to go with your blog if you order their services. You can find some adorable designs that are very affordable However, if you are trying to be more thrifty when you are beginning blogging you can find FREE social media icons freely available on the internet. But here, you will find the cool social media icons with count-numbers.

Add Social Media Icons To Your Blogger With Count-Numbers
Demo

How To Add Social Media Icons To Your Blogger With Count-Numbers

Go to Blogger Dashboard  > Layout > Add a Gadget > HTML/JavaScript and past following codes.
<style type='text/css'>
.widget_social_apps{margin-left:-.5%;margin-right:-.5%}
.widget_social_apps:before,
.widget_social_apps:after{content:&quot; &quot;;display:table}
.widget_social_apps:after{clear:both}
.widget_social_apps .app_social{margin:0 .5% .5%;width:24%;float:left;text-align:center;background-color:#111;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}
.widget_social_apps .app_social.facebook{background-color:#3e64ad}
.widget_social_apps .app_social.twitter{background-color:#58ccff}
.widget_social_apps .app_social.pinterest{background-color:#de010d}
.widget_social_apps .app_social.instagram{background-color:#125688}.widget_social_apps .app_social.google{background-color:#dd4b39}
.widget_social_apps .app_social.linkedin{background-color:#007bb6}
.widget_social_apps .app_social.flickr{background-color:#ff0084}
.widget_social_apps .app_social.vine{background-color:#00bf8f}
.widget_social_apps .app_social:hover{background-color:#111}
.widget_social_apps .app_social a{display:block;color:#fff;padding:15px 5px}
.widget_social_apps .app_social span{display:block}
.widget_social_apps .app_social span.app_icon i{font-size:24px;margin-bottom:5px}
.widget_social_apps .app_social span.app_count{font-weight:700;line-height:16px;font-size:13px;}
.widget_social_apps .app_social span.app_type{font-size:14px;line-height:16px}
</style>
<div class="widget_social_apps">
<div class="app_social facebook">
<a href="https://www.facebook.com/username" target="_blank"><span class="app_icon"><i class="fa fa-facebook"></i></span>
<span class="app_count">7845</span>
 <span class="app_type">Fans</span> </a>
</div>
<div class="app_social twitter">
<a href="https://www.twitter.com/username" target="_blank"><span class="app_icon"><i class="fa fa-twitter"></i></span>
<span class="app_count">32</span>
<span class="app_type">Followers</span></a>
</div>
<div class="app_social pinterest">
<a href="https://www.pinterest.com/username" target="_blank"><span class="app_icon"><i class="fa fa-pinterest"></i></span>
<span class="app_count">4774</span>
<span class="app_type">People</span> </a>
</div>
<div class="app_social instagram">
<a href="https://www.instagram.com/username" target="_blank"><span class="app_icon"><i class="fa fa-instagram"></i></span>
<span class="app_count">65684</span>
<span class="app_type">Followers</span> </a>
</div>
<div class="app_social google">
<a href="https://www.google.com/username" target="_blank"><span class="app_icon"><i class="fa fa-google-plus"></i></span>
<span class="app_count">65684</span>
<span class="app_type">People</span> </a>
</div>
<div class="app_social linkedin">
<a href="https://www.linkedin.com/username" target="_blank"><span class="app_icon"><i class="fa fa-linkedin"></i></span>
<span class="app_count">65684</span>
<span class="app_type">Fans</span> </a>
</div>
<div class="app_social flickr">
<a href="https://www.flickr.com/username" target="_blank"><span class="app_icon"><i class="fa fa-flickr"></i></span>
<span class="app_count">44</span>
<span class="app_type">Followers</span></a>
</div>
<div class="app_social vine">
<a href="https://www.vine.com/username" target="_blank"><span class="app_icon"><i class="fa fa-vine"></i></span>
<span class="app_count">574</span><span class="app_type">People</span> </a>
</div>
</div>

Customization: Replace the username with you own username.
Subcribe to Our Newsletter For Free

Subscribe Now

Recommended For You

Speak Your Mind