Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Widget Rating Bintang di Postingan Blog

Mungkin banyak sekali seorang blogger yang ingin mengetahui seberapa bermanfaat sih artikel yang sudah anda tulis bagi banyak orang. Apakah artikel tersebut disukai hingga membantu para pengunjung atau tidak, meski artikel yang sudah anda publish sebelumnya nangkring di halaman pertama Google. Belum tentu artikel anda tersebut disukai oleh para pembaca meski bagi anda sendiri itu sangat bermanfaat dan berkualitas.

Cara Membuat Widget Rating Bintang di Postingan Blog

Nah, untuk mengetahui apakah artikel anda sangat berkualitas maupun membantu pembaca. Maka, dibutuhkan widget yang bernama Rating Count Star yang merupakan salah satu widget yang menunjukan suatu artikel apakah bermanfaat dan tidaknya. Jika menurut pembaca itu bermanfaat, maka mereka akan memberikan 5 bintang untuk artikel anda. Begitu pula sebaliknya, bila pembaca merasa tidak membantu. Maka, mereka berhak untuk memberikan 1-3 bintang untuk artikel anda.

Sayangnya, platform blogger sendiri tidak menyediakan fitur ini. Beda halnya seperti platform Wordpress yang sudah menyiapkan hanya dengan menggunakan plugin tertentu. Meskipun blogger tidak menyiapkan fitur ini, Anda bisa kok mengaktifkannya dengan menggunakan bantuan widget yang akan saya berikan berikut ini.

Apa itu Widget Rating Count Star?

Widget Rating Count Star adalah salah satu widget yang berperan sangat penting dalam memberikan nilai baik maupun buruk pada suatu artikel yang ada pada situs maupun website tertentu. Semakin banyak rating yang diberikan, maka semakin berkualitas dan semakin baik pula reputasi dari artikel tersebut.

Begitu juga sebaliknya, apabila pembaca tidak merasa puas. Maka, mereka akan memberikan 1-3 bintang untuk artikel dari situs tersebut yang artinya artikel itu tidak bisa menyelesaikan masalah yang sedang dicari oleh pembaca.

Cara Membuat Widget Rating Bintang di Postingan Blogger

Proses pembuatannya juga tergolong mudah dan tidak begitu merepotkan bagi seorang pemula, Anda hanya perlu menyalin CSS dan juga HTML yang akan saya bagikan pada ulasan berikut ini. Dengan membuat widget rating bintang ini juga tentunya tidak akan memperlambat loading situs anda, simak langkah-langkahnya dibawah ini.

  • Langkah #1: Masuk ke akun Blogger anda terlebih dahulu.
  • Langkah #2 : Setelah anda sudah Log In, selanjutnya anda pergi ke menu Tema » Edit HTML.
  • Langkah #3 : Lantas salin dan tempel kode CSS dibawah ini sebelum kode ]]></b:skin> ataupun </style>. Untuk menemukannya, Anda bisa menggunakan bantuan shortcut CTRL + F agar lebih mudah menemukan kode tersebut.
  • <style type="text/css">
    /* Rating Count Star */#wpac-rating:before {content: "Berikan bintang 5 apabila artikel ini bermanfaat!";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 : Selanjutnya, Anda bisa masukan markup kode pemanggil dibawah ini sesuai dengan penempatan widget rating bintang yang ingin anda tampilkan. Jika anda ingin menampilkannya dibawah postingan, maka anda bisa mencari kode berikut <data:post.body/>. Kemudian letakkan kode HTML dibawah ini sebelum kode tersebut.
  • <div id="wpac-rating"></div>
    <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>
  • Langkah #5 : Save Tema dan lihat hasilnya.

Apabila anda ingin menempatkan widget Rating Bintang ini pada artikel tertentu, anda bisa salin kode HTML diatas dan letakkan pada postingan artikel tertentu. Untuk melihat demonya, Anda bisa lihat pada akhir postingan artikel ini.

Demo

Itulah cara membuat widget rating bintang di postingan blogger yang bisa anda praktekkan, apabila ada yang dipertanyakan. Silahkan komentar pada kolom yang sudah disediakan dibawah ini, Selamat mencoba!

Posting Komentar untuk "Cara Membuat Widget Rating Bintang di Postingan Blog"

X