Rabu, 05 September 2012

Cara Membuat Rating Bintang di Posting Blogger

Membuat Tanda Bintang di Blogger Post


membuat tanda bintang di posting blogspot.

Berbeda dengan trik cara membuat google rich snippet - rating bintang di result page google yang telah dipublikasikan beberapa waktu lalu,kali ini adalah mengaktifkan rating bintang dalam posting blogger itu sendiri.

Sebenarnya fitur ini sudah lama disediakan oleh pihak www.blogger.com,hanya saja untuk sebagian kasus yang saya alami,fitur ini tak tersedia.

Bagaimana Mengaktifkan Rating Bintang untuk Posting Blogger?

Untuk mempersingkat waktu,kegagalan dari pengalaman yang saya alami,sobat langsung aja peri ke draft.blogger.com lalu pilih Rancangan:

trik cara membuat rating bintang di setiap posting blog.


Kemudian,sobat pilih Edit pada page halaman-nya:

snippet blogger post.


Lalu sobat beri tanda pada check box Show Star Rating:

rating bintang.


Setelah itu sobat simpan templates,dan lihat hasilnya.
Sekarang sobat sudah bisa pindah ke blogger.com dengan mengklik di SINI

Mengapa Tanda Rating Bintang hanya tampil di Halaman Utama?

Jika tanda rating bintang hanya tampil pada halaman utama saja,dan tak dapat tampil di halaman posting,sobat ikuti langkah berikut:


Pertama,sobat pilih Dashboard lalu pilih Tata Letak kemudian contreng Expand Widget Templates:

membuat rating bintang dibawah dan diatas setiap posting.
(1)


tanda bintang setiap posting.
(2)


memasang rating bintang setiap posting.
(3)


Lalu sobat cari kode berikut:
<p><data:post.body/></p> atau <data:post.body/>


Jika sudah sobat ketemukan letakkan kode berikut tepat dibawahnya:

<span class='star-ratings'>
<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='280'/>
</b:if>
</span>

Bagaimana jika saya memiliki lebih dari satu kode <data:post.body/>?


Jika sebagian templates yang sobat miliki sudah menggunakan fasilitas read more memang akan memiliki dua kode <data:post.body/> ini,bagaimana solusinya?

Misal templates sobat setelah membuat fitur 'read more' dalam tutorial di SINI seperti ini:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>


Maka untuk menerapkan kodenya,hapus kode tersebut dan rubah menjadi seperti ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
<span class='star-ratings'>
<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='280'/>
</b:if>
</span>

</b:if>
Hasilnya akan seperti ini:

membuat rating bintang dalam posting.


Simpan dan lihat hasilnya,semoga bermanfaat ya :D

Tidak ada komentar:

Posting Komentar