Monday, February 27, 2012

cara memasang fitur star rating di blog

Cara Memasang Star Ratings Widget Pada Official Blogger Templates
Template Blogger resmi (non custom templates) telah memiliki bagian yg berisi kode-kode widget star rating. Apabila ingin mengaktifkannya, cukup dengan melakukan beberapa langkah berikut:
1. Masuk ke dashboard Blogger.
2. Buka halaman layout (page elements).
3. Klik "edit" pada bagian badan posting (blog posts).
4. Klik/centang "Show Star Ratings"
5. Setelah itu save.
Cek posting blog, widget star ratings blogger ditampilkan pada bagian bawah posting.

Note: Pada beberapa kasus tertentu, opsi "Show Star Ratings" tidak ada. Jika sobat menemui kasus demikian, akses Blogger melalui draft.blogger.com.

Cara Memasang Star Ratings Widget Pada Custom Blogger Templates

Pada template blogger yg tidak disediakan oleh Blogger sendiri, star ratings tidak akan muncul meskipun sudah diaktifkan dengan cara seperti di atas. Hal ini karena pada template Blogger yg disediakan oleh pihak ketiga tidak diberikan script serta HTML star ratings. Melihat hal demikian, saya mencoba menengok template-template resmi Blogger dan menemukan beberapa bagian widget star ratings. Sebagai uji coba, saya kemudian mengekstraknya & mengaplikasikannya pada template blog ini.
Ada dua langkah penting untuk memasang star rating blogger:
  • Memasang Kode HTML star ratings:
1. Aktifkan terlebih dahulu fitur star ratings seperti cara di atas. Apabila tidak ditemukan, akses dashboard melalui draft.blogger.com. Save.
2. Buka edit HTML ( template > edit HTML), jangan lupa centang "Expand Widget Templates".
3. Jika ingin memasang star ratings di bawah judul posting, cari <div class='post-header-line-1'/> (gunakan Ctrl+F), simpan kode berikut di bawahnya. Jika ingin memasang di bawah isi posting, cari <data:post.body/>, letakkan kode berikut di bawahnya:
<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>

  • Memasang Script star ratings:
1. Masih pada edit HTML, cari <b:include name='feedLinks'/>, letakkan script berikut 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>
Note: Jika <b:include name='feedLinks'/> tidak ditemukan, cari <b:includable id='feedLinks'>.
2. Save template.


No comments:

Post a Comment