Pasang Star Rating Dengan Gambar Author

Pasang Star Rating Dengan Gambar Author Tanpa Harus Mendaftar Di Google+ dan akan tampil di hasil pencarian Serp Google. kali ini kita akan mudah memasangnya di blogger tanpa harus repot-repot untuk mendaftarkan blog di profil google+ . hanya menggunakan microdata dari Rich Snippets Google. dengan beberapa itemtype vocabulary.org . karena banyak sekali blog pemula yang bingung untuk mendaftarkan diri di google+ yang ingin menampilkan foto profilnya di Serp google. nah berikut test yang saya lakukan pada richsnippet google yang hasilnya akan seperti gambar di bawah :

Berikut kontribusi HTML akan menghasilkan sebuah description penulis dan keterangan secara otomatis di tiap halaman artikel blog.
contoh gambar di bawah :

CARA MEMASANG PADA TEMPLATE BLOGGER

1. Edit template > cheklist expand > kemudian pasang CSS > Cari ]]></skin> lalu simpan CSS letakan tepat di atasnya.

.review-author {
    background-color: rgba(0,0,0,0.1);
    display: inline-block !important;
    height: 100%;
    width: 100%;
    border: 1px solid #afafaf;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.1) inset;
    -moz-box-shadow: 1px 2px 3px rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.1) inset;
    -webkit-box-shadow: 1px 2px 3px rgba(0,0,0,0.5),0 0 10px rgba(0,0,0,0.1) inset;
}

2 . Cari code <data:post.body/>. dan letakan HTML berikut tepat di bawahnya.

Jika pada template anda code <data:post.body/> ada dua. maka pilih yang pertama saja. jika gagal pilih yang kedua. jika masih gagal pasang pada semua code dari pada bingung. hehehe

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='review-author' style='margin-top:30px'>
<div itemscope='' itemtype='http://data-vocabulary.org/Review-aggregate'>
<div style='padding:5px; width:0%; float:left;'>
<img itemprop='photo' src='URL_Gambar_Anda'/></div>
<div style='width: 80%;padding:5px; font-size:11px; float: right;'>
Judul: <span itemprop='itemreviewed'><data:post.title/></span><br/>
Rating: <span itemprop='rating' itemscope='' itemtype='http://data-vocabulary.org/Rating'>
      <span itemprop='average'>10</span>
      out of <span itemprop='best'>10</span>
    </span>
    based on <span itemprop='votes'>24</span> ratings.
    <span itemprop='count'>155</span> user reviews.<br/>
Ditulis Oleh <data:post.author/><br/>
Description : <data:blog.metaDescription/></div>
</div>
</div>
</b:if>       

NB : Ganti src='URL_Gambar_Anda' dengan URL Poto Profil author anda.

Terakhir Simpan template.
untuk melihat hasilnya silahkan anda check di Rich Snippets Testing Tool dan masukan URL Artikel terbaru anda .

---

Post By : denzdii
Terkait : Rich Snippets -Recipes