Cara Membuat Widget Rating di Postingan Blogger

Sekarang kamu mungkin berfikir bagaimana memasang widget ranting di setiap halaman postingan blog? di platform blog seperti wordpress fitur untuk memasang widget ranting sudah disedikan secara default, tetapi sayangnya layanan Blogger milik Google ini belum memiliki fitur widget ranting 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 ranting 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

Langkah #1 : Login ke Akun dashboard blogger kamu
Langkah #2 : Pergi ke menu Tema > Edit HTML
Langkah #3 : Copy dan Paste kode Style CSS di bawah ini tepat sebelum kode ]]></b:skin> atau </style>

<style type='text/css'>
/* Rating Count Star */#wpac-rating:before {content: "Beri Ranting 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;}
</style>

Langkah #4 : 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>

Langkah #5 : 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 ranting
<div id="wpac-rating"></div>

Langkah #6 : 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

Penutup

Nah itu tadi Cara Membuat Rating Widget di Postingan Blogger, sekarang kamu bisa cek setiap artikel yang ada di blog kamu 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.