Membuat Rating Blog Pada Postingan Blogger

Assalammualikum Wr. Wb. Sobat Blogger.

Kembali lagi bersama Amri Blog :D.. Kali ini saya akan membagikan tips bagaimana cara membuat rating pada posting blog. Rating yang akan ditampilkan ini bukanlah rating yang akan muncul pada pencarian google, tetapi rating ini akan muncul pada setiap judul postingan anda.. Contohnya kaya yang saya pasang di blog saya ini.

Rating ini berguna untuk mengetahui apakah pembaca menyukai artikel yang kita buat atau tidak.. *Dengan catatan apabila pembaca berkenan mengisi rating tersebut.. :p
Coba lihat rating pada artikel yang saya buat, Love It semua kan? berarti artikel yang saya buat disukai oleh pembaca.. (yaiyalah bintang 5 smua, orang yang ngisi ratingny penulisnya sndiri.. :p)

Ok langsung saja ke laptop.. Cara ini adalah untuk yang menggunakan template yang disediakan oleh blogger.
1.  Pertama yang dilakukan adalah login ke blogger.
2.  Selanjutnya pilih opsi lainnya (yg gambar panah kebawah) , pilih Tata Dado Letak.
3.  Selanjutnya akan tampil bebrapa segmen seperti gambar dibawah ini. Fokuskan ke segmen         Posting Blog.

Klik Untuk Perbesar

     Klik Edit yang ditunjukkan panah bewarna biru.
4.  Maka akan muncul popup pengaturan konfigurasi posting blog. Centang tampilkan rating bintang, Scroll kebawah Pilih Simpan.

Klik Untuk Perbesar

5. Tambahan : Kalo Opsi Tampilkan Rating Bintangnya gak muncul coba akses pengaturan tata letak dari sini, selanjutnya ulangi langkah diatas.
6. Selesai dh.. lihat perubahannya

Ok. Sekarang saatnya menambah rating bintang pada custom template..

1. Login Blogger seperti biasa.
2. Buka dashboard melalui http://draft.blogger.com.
3. Untuk mempersingkat waktu (padahal gk mau capek ngetik :p), ikuti langkah 2-4 di sudah disebutkan atas.
4. Ok. kalo sudah, backup dlu templatenya biar klo kejadian yang tidak diinginkan terjadi kita dapat menaganinya :D. sekarang kita menuju ke menu Template>Edit HTML, centang expand widget.
5. Cari kode berikut ini <div class='post-header-line-1'/> , Gunakan Ctrl+F biar cepet nyarinya.
6. tambahkan kode berikut ini dibawah kode yang talah kita cari tadi.

<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>

Kalo kode <div class='post-header-line-1'/> udah dicari tapi gk ada, gk usah dipaksain. cari aj kode <data:post.body/> lalu letakkan kode yang panjang tadi diatasnya.

7. Cari kode <b:include name='feedLinks'/> Gunakan Ctrl+F biar cepet nyarinya.
letakkan kode berikut dibawahnya

<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>

Klo kode <b:include name='feedLinks'/> tidak ada. Lagi-lagi, jangan dipaksain cari kode <b:includable id='feedLinks'> ini aj.. terus letakkan kode yang panjang diatas ini dibawah kode yang dicari tadi.

8. Klo semua langkah tadi udah diikutin, Save Template. Lihat postingan Blog anda sekarang.
Apakah ada perubahan?

klo gk ada. biasanya emang lama keluarnya. tungguin aj.. widget ini memamng rada pemalu :D

Sekian share dari saya. Wassalamualaikum Wr.
Wb.

Read More