How To Add Simple Sidebar Social Counter Widget For Blogger

Social media counters are very popular these days, So have brought you a tutorial about How To Add Simple Sidebar Social Counter Widget For Blogger. This is a very simple and sleek widget. It is made with CSS and HTML only, which makes it fast loading and cross browser compatible. It features various social media profile buttons with active link and counting numbers that can be changed easily through layout in simple steps.

With help of this widget you can show your social media followings very elegantly. It doesn't updates automatically because some of the social media sites don't have proper api support for blogger. So we have made it manual where you can showcase your approx number of followers.

See DemoLive Preview

Adding The Widget

The First thing you need to do is to login into your Blogger account and go to >> Layout >> Click add a gadget any where into your layout >> Add HTML/JAVASCRIPT widget and paste the below code in the blank space.

<style>
a.social_item {
position: relative;
display: block;
height: 50px;
line-height: 50px;
overflow: hidden;
border-radius: 4px;
}
li.social_item-wrapper {
float: left;
width: 48%;
text-align: center;
margin-right: 4% !important;
margin-bottom: 10px !important;
color: #fff;
}
.social_item-wrapper:nth-child(2n+2) {
margin-right: 0 !important;
}
.social_icon {
float: left;
line-height: 50px;
width: 41px;
font-size: 1.3rem;
}
a.social_item.social_facebook {
background: #5d82d1 !important;
}
.fa-facebook.social_icon {
background: #2E4372;
}
li.social_item-wrapper:hover .fa-facebook.social_icon {
background: #3F5B9B;
}
li.social_item-wrapper:hover .social_facebook {
background: #2E4372;
}
a.social_item.social_twitter {
background: #40bff5 !important;
}
.fa-twitter.social_icon {
background: #1571A5;
}
li.social_item-wrapper:hover .fa-twitter.social_icon {
background: #1C97DE;
}
li.social_item-wrapper:hover .social_twitter {
background: #1571A5;
}
a.social_item.social_youtube {
background:#ef4e41 !important;
}
.fa-youtube.social_icon {
background: #B31919;
}
li.social_item-wrapper:hover .fa-youtube.social_icon {
background: #E22020;
}
li.social_item-wrapper:hover .social_youtube {
background: #B31919;
}
a.social_item.social_dribbble {
background: #f7659c !important;
}
.fa-dribbble.social_icon {
background: #B51A45;
}
li.social_item-wrapper:hover .fa-dribbble.social_icon {
background: #E82159;
}
li.social_item-wrapper:hover .social_dribbble {
background: #B51A45;
}
a.social_item.social_rss {
background:#ff7e30 !important;
}
.fa-rss.social_icon {
background: #C2521B;
}
li.social_item-wrapper:hover .fa-rss.social_icon {
background: #E86321;
}
li.social_item-wrapper:hover .social_rss {
background: #C2521B;
}
a.social_item.social_google-plus {
background: #eb5e4c !important;
}
.fa-google-plus.social_icon {
background: #BF2424;
}
li.social_item-wrapper:hover .fa-google-plus.social_icon {
background: #E82C2C;
}
li.social_item-wrapper:hover .social_google-plus {
background: #BF2424;
}
a.social_item.social_linkedin {
background: #3897f0 !important;
}
.fa-linkedin.social_icon {
background: #02669E;
}
li.social_item-wrapper:hover .fa-linkedin.social_icon {
background: #0275B6;
}
li.social_item-wrapper:hover .social_linkedin {
background: #02669E;
}
a.social_item.social_instagram {
background: #3f91cb !important;
}
.fa-instagram.social_icon {
background: #6F583C;
}
li.social_item-wrapper:hover .fa-instagram.social_icon {
background: #8E714D;
}
li.social_item-wrapper:hover .social_instagram {
background: #6F583C;
}
a.social_item.social_pinterest {
background: #CA2027;
}
.fa-pinterest.social_icon {
background: #AB1B21;
}
li.social_item-wrapper:hover .fa-pinterest.social_icon {
background: #CA2027;
}
li.social_item-wrapper:hover social_pinterest {
background: #AB1B21;
}
ul.social-counter a {
color: #fff;
}
</style>

<div class="socialcounter">
<ul class="social-counter">
<li class="social_item-wrapper"><a href="#" class="social_item social_facebook">230,000</a></li>
<li class="social_item-wrapper"><a href="#" class="social_item social_twitter">230,000</a></li>
<li class="social_item-wrapper"><a href="#" class="social_item social_youtube">230,000</a></li>
<li class="social_item-wrapper"><a href="#" class="social_item social_dribbble">230,000</a></li>
<li class="social_item-wrapper"><a href="#" class="social_item social_rss">230,000</a></li>
<li class="social_item-wrapper"><a href="#" class="social_item social_google-plus">230,000</a></li>
<li class="social_item-wrapper"><a href="#" class="social_item social_linkedin">230,000</a></li>
<li class="social_item-wrapper"><a href="#" class="social_item social_instagram">230,000</a></li>
</ul>
</div>

Change the highlighted red text with your social media followers and highlighted blue with your social media profiles.

Conclusion

Congrats !! You have made it. now you have learned that How To Add Simple Sidebar Social Counter Widget For Blogger. Visit your blog and check the awesome widget live in action, hope you liked this tutorial, if you enjoyed then please share it with your friends, we are working hard to develop more such awesome widgets please stay tuned with Us. अलविदा !! (Goodbye in Hindi).

How To Add Simple Sidebar Social Counter Widget For Blogger

Read more