Cara Membuat Rating Widget di Postingan Blogger

Memasang widget rating bintang dalam setiap postingan blog akan terlihat lebih profesional, selain itu ini juga bisa berfungsi sebagai penilaian dari pandangan pengunjung terkait konten website kamu dan meningkatkan domain authority sekaligus meningkatkan SEO di mesin pencarian Google.

Lalu bagaimana memasang widget rating di setiap halaman postingan blog? di platform blog seperti wordpress fitur untuk memasang widget rating sudah disedikan secara default, tetapi sayangnya layanan Blogger milik Google ini belum memiliki fitur widget rating bawaan. Dengan kata lain kita harus memanfaatkan widget pihak ketiga untuk bisa menerapakan Rating Widget di blogger.

Dipostingan kali ini saya akan berbagi tutorial cara memasang rating widget di blogger, untuk demonya kamu bisa cek diakhir artikel ini. Jika tertarik memasangnya di Blog yang kamu kelola, kamu bisa mengikuti langkah-langkah dibawah ini :

Cara Memasang Widget Rating Bintang Pada Blogger

Login ke Akun dashboard blogger kamu
Pergi ke menu Tema > Edit HTML

Copy dan Paste kode Style CSS di bawah ini tepat sebelum kode ]]></b:skin> atau </style> di dalam template kamu

/* Rating Count Star */#wpac-rating:before {content: "Beri rating Artikel";top: -15px;text-align: center;position: relative;width: 100%;}
#wpac-rating .wp-stars .wp-star:hover:before{z-index: 999;padding: 3px 11px;background: #1a1d23f0;color: #fff;font-size: 12px;border-radius: 2px;white-space: nowrap;position: absolute;line-height: 1.4;text-align: center;-ms-transform: translateX(-30%);-moz-transform: translateX(-30%);-webkit-transform: translateX(-30%);transform: translateX(-30%);top: 100%;margin-top: 9px;}

Lanjut cari kode berikut </body> lagu Copy dan Paste kode JavaScript di bawah ini tepat sebelum kode tersebut

<script type="text/javascript">
wpac_init = window.wpac_init || [];
wpac_init.push({widget: 'Rating', id: 31970});
(function() {
    if ('WIDGETPACK_LOADED' in window) return;
    WIDGETPACK_LOADED = true;
    var mc = document.createElement('script');
    mc.type = 'text/javascript';
    mc.async = true;
    mc.src = 'https://embed.widgetpack.com/widget.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mc, s.nextSibling);
})();
</script>

Kemudian masukan markup kode pemanggil berikut, kamu bisa menempatkan nya sesuai ke inginan

Sebagai contoh saya akan menerapkannya diakhir postingan untuk semua artikel yang ada di Blog ini, maka menerapkannya menyimpan kode pemanggil tepat sesudah kode <data:post.body/> di dalam HTML template kita
```
// Markup kode pemanggil rating
<div id="wpac-rating"></div>
```
Jika sudah, Simpan Template

Kamu juga bisa menempatkan kode pemanggil hanya di artikel tertentu saja, yaitu dengan menyalin kode tersebut ke dalam postingan tertentu pada Mode HTML

Update Membuat Ulasan (Rating) Bintang

Pada point nomor 4 diatas, gunakan kode javascript berikut yang sudah di update

<!--[ Ranting ]-->    
<script type='text/javascript'>
wpac_init = window.wpac_init || [];
wpac_init.push({widget: 'Rating', id: 31970, html: '{{=it.stars}} {{?it.count>0}}Rating: {{=it.rating}} based on {{=it.count}} {{=it.votes}}{{?}}'});
(function() {
    if ('WIDGETPACK_LOADED' in window) return;
    WIDGETPACK_LOADED = true;
    var mc = document.createElement('script');
    mc.type = 'text/javascript';
    mc.async = true;
    mc.src = 'https://cdn.widgetpack.com/widget.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mc, s.nextSibling);
})();

Penutup

Nah itu tadi Cara Membuat rating Widget di Postingan Blogger, sekarang kamu bisa cek di bawah artikel ini untuk melihat hasilnya. Jika kamu mengikuti tutorial dengan teliti dipasikan tidak akan ada masalah. Semoga bermanfaat, jika ada kendala kamu bisa bertanya melalui kolom komentar.