Halo pembaca !!
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 Anda agar mereka merasa nyaman dan mengetahui 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 menunjukkan 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.
Sekarang mari kita kembali ke widget kita, maka ini adalah widget kecil, kami telah membuat widget kecil dan kecil dengan kode sederhana tetapi pada saat yang sama itu memberi blog Anda sentuhan elegan. Widget terlihat sangat lucu dan halus. Anda dapat memeriksa demo di bawah ini sebelum menambahkan widget.
Menambahkan Widget
Hal pertama yang perlu Anda lakukan adalah masuk ke akun Blogger Anda dan pergi ke >> Tata Letak >> Klik tambahkan gadget di mana saja ke dalam tata letak Anda >>
Tambahkan widget HTML / JAVASCRIPT dan rekatkan kode di bawah ini di ruang kosong.
<div class="trendy_counters">
<ul class="sc_vertical">
<li class="count-twitter"><a class="icon" data-color-hover="#0084b4" href="https://twitter.com/trendy_theme" style="background-color: #33ccff; padding: 10px;"><span class="fa fa-fw fa-twitter" data-color-hover="#fff" style="color: white; font-size: 24px;"></span><span class="items"><span class="count" data-color-hover="#fff" style="color: white; font-size: 16px;">114</span><span class="label" data-color-hover="#fff" style="color: white; font-size: 12px;">followers</span></span></a></li>
<li class="count-googleplus"><a class="icon" data-color-hover="#ff9800" href="https://rss.com/" style="background-color: #ff9800; padding: 10px;"><span class="fa fa-fw fa-rss" data-color-hover="#fff" style="color: white; font-size: 24px;"></span><span class="items"><span class="count" data-color-hover="#fff" style="color: white; font-size: 16px;">0</span><span class="label" data-color-hover="#fff" style="color: white; font-size: 12px;">followers</span></span></a></li>
<li class="count-facebook"><a class="icon" data-color-hover="#5E80BF" href="https://www.facebook.com/" style="background-color: #3b5998; padding: 10px;"><span class="fa fa-fw fa-facebook-official" data-color-hover="#fff" style="color: white; font-size: 24px;"></span><span class="items"><span class="count" data-color-hover="#fff" style="color: white; font-size: 16px;">0</span><span class="label" data-color-hover="#fff" style="color: white; font-size: 12px;">likes</span></span></a></li>
<li class="count-vimeo"><a class="icon" data-color-hover="#0088cc" href="https://vimeo.com/" style="background-color: #00adef; padding: 10px;"><span class="fa fa-fw fa-vimeo" data-color-hover="#fff" style="color: white; font-size: 24px;"></span><span class="items"><span class="count" data-color-hover="#fff" style="color: white; font-size: 16px;">0</span><span class="label" data-color-hover="#fff" style="color: white; font-size: 12px;">followers</span></span></a></li>
<li class="count-youtube"><a class="icon" data-color-hover="#90030c" href="https://www.blogger.com/u/4/blogger.g?blogID=1694618596588289951" style="background-color: #bf2626; padding: 10px;"><span class="fa fa-fw fa-youtube" data-color-hover="#fff" style="color: white; font-size: 24px;"></span><span class="items"><span class="count" data-color-hover="#fff" style="color: white; font-size: 16px;">0</span><span class="label" data-color-hover="#fff" style="color: white; font-size: 12px;">subscribers</span></span></a></li>
<li class="count-instagram"><a class="icon" data-color-hover="#8a3ab9" href="https://instagram.com/nayon07" style="background-color: #cd486b; padding: 10px;"><span class="fa fa-fw fa-instagram" data-color-hover="#fff" style="color: white; font-size: 24px;"></span><span class="items"><span class="count" data-color-hover="#fff" style="color: white; font-size: 16px;">266</span><span class="label" data-color-hover="#fff" style="color: white; font-size: 12px;">followers</span></span></a></li>
</ul>
</div>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<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>
Kesimpulan Selamat !!
Anda telah berhasil. sekarang Anda telah belajar bahwa Bagaimana Menambahkan Widget Konter Sosial Sleek Di Blogger. Kunjungi blog Anda dan periksa langsung widget yang luar biasa ini, berharap Anda menyukai tutorial ini, jika Anda menikmati tutorial ini silakan bagikan dengan teman-teman Anda, kami sedang bekerja keras untuk mengembangkan lebih banyak widget yang luar biasa seperti itu, silakan terus memantau kami.
Posting Komentar