cara pasang rating star dengan JS-KIT

Pasang Star Rating dengan JS-KIT

Dulu saya pernah memposting artikel dengan topik yang sama tentang menambahkan Rating Bintang dari Outbrain yang saya posting disini, tetapi yang lama tersebut tampilannya kurang menarik dan susah diubahsuaikan, nah kali ini ada Rating Bintang yang tampilannya menarik dan tentunya lumayan ringan untuk loading blog, Rating Bintang yang ini kodenya dari js-kit.com.

Berikut contoh Star Rating atau contoh langsungnya ada disini

Bagaimana membuat Star Rating tersebut langkahnya cukup mudah, berikut tutorialnya :
1. Masuk ke Dasboard Blogger ► Tata Letak ► Edit HTML dan beri klick pada "Expand widget template"
2. Cari kode  ]]></b:skin>  dan tambahkan CSS berikut tepat diatasnya!

.js-kit-rating {
height:25px;
width:105px;
right:7px;
bottom:7px;
overflow:hidden;
position:absolute;}

3. Cari kode  </body>  dan tambahkan kode berikut diatasnya!

<!-- JS-KIT FOR STAR RATINGS SHOW -->
<script src='http://js-kit.com/ratings.js'/>

4. Sekarang yaitu penentuan letak dimana Star Rating akan ditampilkan, letakkan saja dibawah posting caranya?
Cari Kode  <data:post.body/>  kemudian letakkan kode berikut tepat dibawahnya  kemudian simpan template.

&lt;div class=&#039;js-kit-rating&#039; expr:path=&#039;data:post.url&#039; expr:permalink=&#039;data:post.url&#039; expr:title=&#039;data:post.title&#039;&gt;

5. Sekarang Lihat halaman postingnya sudah ada Star Ratingnya apa belum.

Langkah diatas menampilkan Star Rating pada halaman postingan saja, bagaimana jika ingin Pasang Star Rating di halaman depan atau homepage berikut langkah yang bisa diikuti!

1. Jangan pergi dari Edit HTML
2. Cari kode  <div class='post-header'>  ada 2 kode seperti ini jadi letakkan saja kode berikut ini tepat setelah kode <div class='post-header'> yang pertama :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title'>
</b:if>

3. Simpan template dan lihat hasilnya

Keterangan Kode CSS :

height:25px; : Tinggi Star Rating

width:105px; : Lebar Star Rating

right:7px; : Jarak sebelah kiri Star Rating

bottom:7px; : Jarak bawah dari Star Rating

Anda dapat merubah nilai angkanya dengan yang diinginkan.

Sebenarnya anda dapat memasang dimana saja Star Rating ingin tampil asalkan anda sudah paham akan tata letak daripada template yang anda pakai, dengan memasang atau memindahkan letak kode pada langkah no.4 (empat) ditempat yang anda sukai.

Silahkan ber-eXperimen.....

from: http://u-sup.blogspot.com/2011/10/pasang-star-rating-dengan-js-kit.html

Do you Like this story..?

Get Free Email Updates Daily!	Follow us!

Posted in: Tips Blogging