Cara Membuat Stars Vote Pada Blog

 

Hiirotaku - Pada artikel kali ini kita akan memasang widget stars vote atau rating bintang, ada perbedaan antara stars vote dan rating stars biasa. Perbedaannya yaitu kalau vote para pembaca pada blog akan bisa memberikan nilai dari artikel tersebut mulai dari rating bintang 1 sampai 5, sedangkan jika rating biasa saja tidak bisa karena kita yang memberikan rating itu sendiri contohnya seperti rating anime tertentu mempunyai rating bintang 7 maka kita sendiri yang memberinya bukan orang lain.

Kelebihan memasang stars vote yaitu agar mempercantik blog kita dan juga kita tahu seberapa berguna artikel kita, kalau di kasih rating 1 ya jangan baper karena itu resiko, toh widgetnya juga bisa di hapus lagi kok.

Cara Membuat Stars Vote di Blog

Seperti biasa masuk ke Halaman Blogger > Tema > Edit HTML > lalu salin kode CSS dibawah ini tepat di atas kode ]]></b:skin>

#wpac-rating:before {content: "Berapa bintang untuk postingan ini?";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;}

Kemudian salin kode di bawah ini dan letakkan di bawah kode <data:post.body/> , biasanya kode tersebut memiliki 1 sampai 3 kode dan kalian coba saja satu per satu

<div id="wpac-rating" />

Terakhir letakkan kode ini di atas kode </body>

<script type="text/javascript">
wpac_init = window.wpac_init || [];
wpac_init.push({widget: 'Rating', id: 21697});
(function() {
    if ('WIDGETPACK_LOADED' in window) return;
    WIDGETPACK_LOADED = true; //true ubah ke False
    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>

Yap selesai, mudah bukan? jika tidak berhasil tolong di teliti lagi mungkin ada penempatan yang salah..

Catatan : jangan lupa ganti id dengan punya kalian jika script di atas tidak bisa, caranya yaitu mendaftar di widgetpack disini , Terima Kasih..

DEMO

Sampai Jumpa..