Memasang Fitur Blogger Rating Stars Pada Posting Blogger

Fitur Rating Stars Blogger adalah sebuah fitur resmi dari blogger yang bertujuan untuk memberikan kesempatan kepada pengunjung untuk melakukan penilaian terhadap isi artikel yang dibacanya serta memberikan evaluasi kepada author mengenai artikel yang telah dibuatnya. Fitur yang satu ini berbeda dengan "Cara Menampilkan Rating Bintang Pada Pencarian Search Engine" karena fitur ini hanya untuk menempatkan rating pada setiap postingan/artikel blogspot.

Memasang Fitur Blogger Rating Stars Pada Postingan Blog

Ada dua cara pemasangan fitur rating ini, yang pertama dengan menambahkannya melalui layout/tata letak blog dan dengan melakukan pengeditan HTML. Perlu anda perhatikan, untuk cara pertama bisa anda lakukan jika anda menggunakan Template Official yang disediakan oleh blogger karena pada template official blogger didalamnya sudah terdapat script rating stars, tetapi bagi anda yang menggunakan Costum Template (Template Pihak Ketiga), anda harus melakukannya secara manual yakni dengan dengan melakukan pengeditan kode HTML blog atau bisa juga dengan mengakses / login ke draft.blogger.com.

Pemasangan Rating Stars Melalui Layout

Seperti yang anda telah ketahui bahwa untuk mengakses layout/tata letak, terlebih dahulu anda harus login ke blogger.com (bagi yang menggunakan Template official blogger) atau ke draft.blogger.com (bagi yang menggunakan costum template) kemudian pada menu dashboard pilih tata letak dan pada bagian body post tepatnya di sudut kanan bawah, pilih "Edit". Lihat gambar di bawah ini untuk lebih jelasnya :

Memasang Fitur Blogger Rating Stars Pada Postingan Blog

Lanjutkan dengan memberi checklist/centang "Tampilkan Rating Bintang" dan klik tombol simpan. 

Memasang Fitur Blogger Rating Stars Pada Postingan Blog

Jenis pengaturan seperti di atas adalah menempatkan rating bintang tepat berada di bawah postingan. Apabila langkah-langkah di atas sudah anda lakukan tetapi rating bintang masih belum muncul, maka saya sarankan untuk melakukan pengeditan HTML template dan berikut penjelasannya.

Pemasangan Rating Stars Melalui Edit HTML Template

Untuk pemasangan rating stars dengan melakukan pengeditan kode html, ada dua hal yang dibutuhkan, yakni JavaScript dan Kode HTML. Sebelum saya lanjutkan, terlebih dahulu saya ingin menekankan bahwa untuk menempatkan rating pada posisi yang anda inginkan, anda harus memperhatikan penempatan kode HTMLnya dan jangan sampai ada kesalahan karena jika terjadi kesalahan, maka rating tersebut tidak akan muncul atau bahkan tidak berada pada posisi yang anda inginkan.

1. JavaScript dan Penempatannya

Cari kode <b:include name='feedLinks'/> kemudian tempatkan Javasript di bawah ini tepat di bawahnya.
<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;annotations&quot;, &quot;1&quot;);
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>
Pada tahap ini, janga klik tombol simpan dulu tetapi lanjutkan dengan menempatkan kode HTML di bawah ini.

2. Kode HTML dan Penempatannya

Untuk menempatkan rating bintang tepat di bawah judul postingan, tempatkan kode HTML di bawah tepat dibawah tag <div class='post-header-line-1'/> namun jika anda ingin menempatkan rating bintang di bawah isi postingan/arikel, maka tempatkan kodenya tepat di bawah <data:post.body/>. Catatan : Gunakan Ctrl + F untuk mempermudah pencarian.
<div class='star-ratings' style='float:right;'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
</b:if></div>
Note : Kode yang saya beri tanda warna merah tersebut di atas adalah posisi rating tepatnya berada disebelah kanan, namun jika anda ingin menempatkannya disebelah kiri, anda tinggal menggantinya dengan kata "left".

Lanjutkan dengan menekan tombol simpan/save dan buka postingan anda untuk melihat hasilnya.

Need a Help ?

Jika anda memiliki kendala tentang tuturial pemasangan rating stars terebut di atas, silahkan anda meninggalkan komentar. Terima kasih dan salam blogger...!!!

Muhammad Alfath
Muhammad Alfath

12 comments:
Write comment
  1. gan,. font blog ini pakai apa ya?.,

    ReplyDelete
    Replies
    1. Untuk font postingan saya pakai Monda dan untuk title Sidebar dan Judul Posting saya pakai Oswald.

      Delete
  2. kok gak bisa muncul ya gan ?

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Izin mencobanya gan... buat blog baru ane http://www.kiatkiat.com usianya belum 5 bulan. Semoga dengan menggunakan trik di blog ini blog ane jadi lebih baik lagi kedepannya.
    Thanks infonya
    Salam kenal

    ReplyDelete
  5. permisi... kok saya coba di bawa atau di atas dari post saya di blog tidak muncul rate bintangnya yah..? tolong pencerahannya suhu...

    ReplyDelete
  6. blog saya http://info8unik.blogspot.com

    ReplyDelete
  7. gk keluar gan http://www.8freebetterbaru.com/2016/07/w88-w88com-w88asia-w88id-w88tip.html

    ReplyDelete
  8. mantap sob
    mampir sini juga ya
    puisidankamut.blogspot.com

    ReplyDelete
  9. blog saya nih www.kuliaharsip.web.id

    ReplyDelete
  10. Terimakasih artikelnya sangat membantu dan sudah saya coba terapkan di blog saya Kaos Anak Muslim Be Champ,dan berhasil tampil untuk postingan saya. namun snipper tidak bisa tampil untuk laman (bukan post)
    barangkali ada cara lain atau bisa tolong pencerahannya. terima kasih.

    ReplyDelete