How to Add Sleek Social Counter Widget In Blog
Hello readers !! Adding a social counter widget in Blogger is a very important thing and is one of the most useful widgets that you should install to make your readers feel comfortable and learn more about the popularity of your blog.
In some cases a blog post that is long or has a large number of comments looks good and gives the impression of a popular blog and to show the popularity ,you need for a social counter widget and looks sleek, you need to this type of function is required, so that the visitor can easily check the popularity of your blog page and become your fan, customer or follower.
Now come back to our widget, so this is a small widget, we have created a smaller and smaller widget with simple code, but at the same time it gives an elegant touch to your blog. The widget looks very cute and smooth. You can see the demo below before adding the widget.
Add Widget
The first thing you need to do is log into your Blogger account and click on >> Layout >> Add any gadget to your layout >> Add HTML / JAVASCRIPT Widget and in the spaces below Paste the code.
<div class="trendy_counters">
<ul class="sc_vertical">
<li class="count-twitter"><a data-color-hover="#0084b5" style="background-color: rgb(51, 204, 255); padding: 10px;" class="icon" href="https://twitter.com/trendy_theme"><span class="fa fa-fw fa-twitter" style="font-size:28px; color:#fff" data-color-hover="#fff"></span><span class="items"><span data-color-hover="#fff" class="count" style="font-size:16px; color:#fff">114</span><span data-color-hover="#fff" class="label" style="font-size:12px; color:#fff">followers</span></span></a></li>
<li class="count-googleplus"><a data-color-hover="#ff9800" style="background-color:#ff9800; padding:10px;" class="icon" href="https://rss.com/"><span class="fa fa-fw fa-rss" style="font-size:24px; color:#fff" data-color-hover="#fff"></span><span class="items"><span data-color-hover="#fff" class="count" style="font-size:16px; color:#fff">0</span><span data-color-hover="#fff" class="label" style="font-size:12px; color:#fff">followers</span></span></a></li>
<li class="count-facebook"><a data-color-hover="#5E80BF" style="background-color:#3B5998; padding:10px;" class="icon" href="https://www.facebook.com/"><span class="fa fa-fw fa-facebook-official" style="font-size:24px; color:#fff" data-color-hover="#fff"></span><span class="items"><span data-color-hover="#fff" class="count" style="font-size:16px; color:#fff">0</span><span data-color-hover="#fff" class="label" style="font-size:12px; color:#fff">likes</span></span></a></li>
<li class="count-vimeo"><a data-color-hover="#0088cc" style="background-color:#00adef; padding:10px;" class="icon" href="https://vimeo.com/"><span class="fa fa-fw fa-vimeo" style="font-size:24px; color:#fff" data-color-hover="#fff"></span><span class="items"><span data-color-hover="#fff" class="count" style="font-size:16px; color:#fff">0</span><span data-color-hover="#fff" class="label" style="font-size:12px; color:#fff">followers</span></span></a></li>
<li class="count-youtube"><a data-color-hover="#90030c" style="background-color:#bf2627; padding:10px;" class="icon" href=""><span class="fa fa-fw fa-youtube" style="font-size:28px; color:#fff" data-color-hover="#fff"></span><span class="items"><span data-color-hover="#fff" class="count" style="font-size:16px; color:#fff">0</span><span data-color-hover="#fff" class="label" style="font-size:14px; color:#fff">subscribers</span></span></a></li>
<li class="count-instagram"><a data-color-hover="#8a3ab9" style="background-color:#cd488b; padding:20px;" class="icon" href="https://instagram.com/nayon07"><span class="fa fa-fw fa-instagram" style="font-size:24px; color:#fff" data-color-hover="#fff"></span><span class="items"><span data-color-hover="#fff" class="count" style="font-size:16px; color:#fff">267</span><span data-color-hover="#fff" class="label" style="font-size:16px; color:#fff">followers</span></span></a></li>
</ul>
</div>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<style>
.trendy_counters:after {
clear: both;
content: '';
display: block;
}
.trendy_counters ul {
list-style: none;
margin: 0;
padding: 0;
clear: both;
}
.trendy_counters ul li {
text-align: center;
background: #f9f9f8;
}
.trendy_counters ul li a {
padding: 16px;
text-decoration:none;
}
.trendy-counters-per-row-2 ul li {
width: 50%;
float: left;
}
.trendy-counters-per-row-3 ul li {
width: 35.333%;
float: left;
}
.trendy-counters-per-row-4 ul li {
width: 25%;
float: left;
}
.sc_vertical a, .sc_vertical span:not(.fa) {
display: block;
text-align: center
}
.sc_horizontal a {
display: flex;
text-align: center;
align-items: center;
justify-content: center;
}
.sc_horizontal span {
margin-right: 8px;
}
.show-labels-No .label {
display: none !important;
}
.trendy-counters-icons-order {
padding: 16px;
background: #f6f6f6;
}
.trendy-counters-icons-order div {
background: #eaeaea;
display: inline-block;
margin-right: 8px;
padding: 16px;
}
.trendy-counters-icons-order div:hover {
cursor: move;
}
.trendy_counters ul li {
text-align: center;
background: #f9f9f9;
width: 35%;
float: right;
padding: 0;
}
</style>
Replace the highlighted red text with your customer / followers / fan number. And if your blog already has fontvoted, remove the blue highlighted code.
The conclusion
Congratulations !! You made it Now you know how to add Slick Social Counter Widget to Blogger. Go to your blog and see the awesome widget live, hope you liked this tutorial, if you enjoyed it please share it with your friends, we are working hard to develop such awesome widgets Yes, please stay with us.
0 Comments