Cara Membuat Ratings Bintang Votes Blogger

Membuat sebuah widget seo menarik di blog anda yaitu rating bintang di dalam postingan blog tepatnya dibawah judul postingan :D, yang nantinya widget tersebut akan memberikan sebuah penilaian yang diberikan oleh pengunjung blog anda terhadap artikel yang sedang dia baca, baik itu dalam jumlah vote dan view :D. Semakin banyak dan besarnya vote dan view terhadap artikel blog anda maka hal tersebut akan menjadi sebuah penilaian bagi pengunjung blog anda bahwa artikel yang anda buat memang bermanfaat :)

Dalam membuat widget ini kita akan memanfaatkan sebuah jasa dari web yang menyediakan fitur rating bintang ini. Selain widgetnya ringan untuk dipasang di blog anda, widget tersebut juga akan menambah fitur yang ada dan mempercantik blog anda dan terlihat lebih profesional :D tentunya, oke langsung ke proses pemasangan widget rating bintang ini ke blog anda :D.

Tutorial Membuat Rating Bintang Votes Dan Views Dalam Postingan Blog

Pertama anda kunjungi http://www.graddit.com/ratings-widget
Selanjutnya klik tab menu Rating Widgets, dan muncul tampilan seperti gambar dibawah ini

Cara Membuat Ratings Bintang Votes Blogger

Selanjutnya masuk Dashboard blog anda kemudian pilih Template dan klik Edit HTML. Setelah itu copy kode yang ditunjukan No.2 pada gambar, dan paste sesudah kode <head> atau sebelum </head>, tekan Ctrl+F untuk mempercepat pencarian.
<head><link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css"/>
</head>
Kemudian pilih Blogger seperti yang ditunjukan No.3 pada gambar diatas.
Disamping kiri yang ditunjukan No.4 itu desain bentuk rating yang nantinya akan digunakan di blog anda, pilih salah satu yang sesuai dengan desain blog anda :D.
Selanjutnya copy kode yang ditunjukan seperti No. 5 pada gambar diatas, seperti dibawah ini :

<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[["☆","★"]]}</div>
<div expr:id='"ffbs_stats_" + data:post.id' class='ffbs_stats'></div>
<script type='text/javascript' expr:src='"http://www.graddit.com/rate/eng/5/" + data:post.id + "?id=" + data:post.id + "&stats=ffbs_stats_" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + "&views=yes&average=yes&votes=yes"'></script></b:if>
Kemudian paste kode script rating bintang sesudah kode <div class='post-body entry-content'>, jika terdapat lebih dari satu maka pilihlah yang pertama, tekan Ctrl+F untuk mempercepat pencarian dan hasilnya seperti dibawah ini :
<div class='post-body entry-content' ~~expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>~~
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[["☆","★"]]}</div>
<div expr:id='"ffbs_stats_" + data:post.id' class='ffbs_stats'></div>
<script type='text/javascript' expr:src='"http://www.graddit.com/rate/eng/5/" + data:post.id + "?id=" + data:post.id + "&stats=ffbs_stats_" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + "&views=yes&average=yes&votes=yes"'></script></b:if><br/><br/>
<data:post.body/>
~~<div style='clear: both;'/> ~~