Cara Membuat Rating Bintang dan Gambar Artikel Blog di Penelusuran Google

Rating Bintang dan Gambar Artikel Blog di Penelusuran Google sudah menjadi mainstream diterapkan di template para blogger. Namun, karena banyaknya request artikel tutorial tentang ini saya akan memberikan tutorial dengan sesingkat-singkatnya dan insyaallah mudah dipahami dan dimengeri. Karena banyaknya artikel tutorial di Hack4rt ini yang sulit dimengeri dengan bahasa saya huehehe #curhat. Contoh gambar artikel dan bintang sudah ada di atas artikel. Lanjut ke tutorial

CSS

Sebelumnya letakkan kode CSS berikut tepat di atas kode ]]></b:skin> agar lebih enak dipandang di template bro!

.hrecipe {
box-shadow: 1px 1px 5px rgba(1,1,1,.1);
background: #fafafa;
font-size: 13px;
margin: 15px 0 10px;
padding: 8px 12px;
border: 1px solid #fff;
}
.photo {
padding: 0px;
width: 55px;
float: left;
box-shadow: 0px 0px 0px rgba(1,1,1,.1);
background: #fafafa;
border: 1px solid #fff;
margin: 3px 10px 6px 0px;
}

HTML

Letakkan kode berikut tepat di bawah tag <body>

<div><div itemscope='' itemtype='http://data-vocabulary.org/Review'>

dan letakkan kode penutup berikut tepat di atas tag </body>

</div></div>

Kemudian Letakkan kode berikut tepat di bawah kode <data:post.body/>, jika anda mendapatkan 3 kode <data:post.body/> maka coba satu-satu meletakkan nya. Biasanya berhasil di kode <data:post.body/> yang ketiga.

<b:if cond='data:blog.pageType == "item"'>
<div class='clear'/>
<div class='hrecipe'>
<img class='photo' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
<span class='item'>
<span class='fn'>Hack4rt Blog</span><br/>
</span>
<b>Published:</b> <span class='published'><data:post.timestampISO8601/></span><br/>
<b>Title:</b><span class='summary'><data:post.title/></span><br/>
<b>Rating:</b><span class='review hreview-aggregate'>
<span class='rating'>
<span class='average'>5</span> On
<span class='count'>221210</span> reviews
</span>
</span>
</div>
<div class='clear'/>
</b:if>