Pasang Star Rating dengan JS-KIT

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.

<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title'></div>

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'></div>
</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.....

source : dimari

Posted in: