Menambahkan widget penghitung sosial di blogger adalah hal yang sangat penting dan ini adalah salah satu widget paling berguna yang harus Anda pasang untuk pembaca, agar mereka merasa nyaman dan tahu lebih banyak tentang popularitas blog Anda. Dalam beberapa situasi posting blog yang cukup panjang atau memiliki jumlah komentar lebih banyak terlihat bagus dan memberikan kesan blog yang populer dan untuk memamerkan popularitas yang Anda butuhkan dan widget penghitung sosial yang tampak ramping, Anda benar-benar membutuhkan fungsi semacam ini, sehingga pengunjung dapat dengan mudah memeriksa popularitas halaman blog Anda dan menjadi penggemar, pelanggan, atau pengikut Anda.
Menambahkan Widget
Hal pertama yang perlu Anda lakukan adalah masuk ke akun Blogger >> Layout >> Klik tambahkan gadget di mana saja ke dalam layout >> Tambahkan widget HTML / JAVASCRIPT dan tempelkan kode di bawah ini di ruang kosong.
<div class="trendy_counters">
<ul class="sc_vertical">
<li class="count-twitter"><a data-color-hover="#0084b4" 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:24px; 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:#bf2626; padding:10px;" class="icon" href=""><span class="fa fa-fw fa-youtube" 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">subscribers</span></span></a></li>
<li class="count-instagram"><a data-color-hover="#8a3ab9" style="background-color:#cd486b; padding:10px;" 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">266</span><span data-color-hover="#fff" class="label" style="font-size:12px; 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: #f9f9f9;
}
.trendy_counters ul li a {
padding: 10px;
text-decoration:none;
}
.trendy-counters-per-row-2 ul li {
width: 50%;
float: left;
}
.trendy-counters-per-row-3 ul li {
width: 33.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: 3px;
}
.show-labels-No .label {
display: none !important;
}
.trendy-counters-icons-order {
padding: 10px;
background: #f6f6f6;
}
.trendy-counters-icons-order div {
background: #eaeaea;
display: inline-block;
margin-right: 5px;
padding: 10px;
}
.trendy-counters-icons-order div:hover {
cursor: move;
}
.trendy_counters ul li {
text-align: center;
background: #f9f9f9;
width: 33%;
float: left;
padding: 0;
}
</style>
Ubah teks warna merah yang disorot dengan jumlah pelanggan / pengikut / penggemar Anda. dan jika Anda sudah memiliki fontawesome di blog Anda maka hapus kode yang disorot biru.