✅Tips Dan Cara Membuat Rating Bintang Di Blog✅

Cara membuat rating bintang di blog dan membuat rating bintang tersebut menjadi rich snipets yang selanjutnya akan ditampilkan dalam hasil pencarian google tidaklah terlalu sulit. Namun harus tetap memperhatikan cara yang benar, karena bila terdapat kesalahan, google tidak akan menampilkan rating bintang tersebut. Kita juga harus tahu bahwa google tidak menjamin rating bintang tersebut terus muncul, dalam bahasa sederhananya, kadang muncul kadang tidak.

Hal pertama yang harus Anda pahami adalah rating bintang mempunyai 2 tipe, yaitu individual rating dan aggregate rating. Perbedaannya hanya terletak pada kegunaan rating tersebut. Individual rating hanya untuk satu item dari satu ulasan, sedangkan aggregate rating untuk satu item dari beberapa ulasan. Ulasan atau review sendiri merupakan bagian tipe dari microdata dan rating itu merupakan properti dari review.

Dalam pembuatan rating bintang di bawah ini, kode html bisa kita pasang secara manual di tiap postingan atau secara otomatis agar semua postingan terdapat rating.

Rating bintang bertipe individual rating
Kode html yang dipakai bila dipasang secara manual tiap posting (di dalam postingan langsung):

<div itemscope='' itemtype='http://schema.org/Review'>
<div itemprop='itemReviewed' itemscope='' itemtype='http://schema.org/Thing'>
<span itemprop='name'>Cara Membuat Rating Bintang Di Blog</span>
</div>
<div itemprop='reviewRating' itemscope='' itemtype='http://schema.org/Rating'>
<meta content='1' itemprop='worstRating'/>
<span itemprop='ratingValue'>4</span>/
<span itemprop='bestRating'>5</span>
</div>
Oleh
<span itemprop='author'>Clinton Gultom</span>
</div>

Kode html yang dipakai bila dipasang secara otomatis (di dalam template blogger):

<div itemscope='' itemtype='http://schema.org/Review'>
<div itemprop='itemReviewed' itemscope='' itemtype='http://schema.org/Thing'>
<span itemprop='name'><data:post.title/></span>
</div>
<div itemprop='reviewRating' itemscope='' itemtype='http://schema.org/Rating'>
<meta content='1' itemprop='worstRating'/>
<span itemprop='ratingValue'>4</span>/
<span itemprop='bestRating'>5</span>
</div>
Oleh
<span itemprop='author'><data:post.author/></span>
</div>

Rating bintang bertipe aggregate rating
Kode html yang dipakai bila dipasang secara manual tiap posting (di dalam postingan langsung):

<div itemscope='' itemtype='http://schema.org/Review'>
<div itemprop='itemReviewed' itemscope='' itemtype='http://schema.org/Thing'>
<span itemprop='name'>Cara Membuat Rating Bintang Di Blog</span>
</div>
<div itemprop='reviewRating' itemscope='' itemtype='http://schema.org/AggregateRating'>
<meta content='1' itemprop='worstRating'/>
<span itemprop='ratingValue'>4</span>/
<span itemprop='bestRating'>5</span> dari
<span itemprop="reviewCount">1001</span> ulasan
</div>
</div>

Kode html yang dipakai bila dipasang secara otomatis (di dalam template blogger):

<div itemscope='' itemtype='http://schema.org/Review'>
<div itemprop='itemReviewed' itemscope='' itemtype='http://schema.org/Thing'>
<span itemprop='name'><data:post.title/></span>
</div>
<div itemprop='reviewRating' itemscope='' itemtype='http://schema.org/AggregateRating'>
<meta content='1' itemprop='worstRating'/>
<span itemprop='ratingValue'>4</span>/
<span itemprop='bestRating'>5</span> dari
<span itemprop="reviewCount">1001</span> ulasan
</div>
</div>

Rating bintang dengan propertis standar disertai css menarik
Propertis standar yang saya maksud disini adalah format metadata tidak hanya menggunakan name, author, dan rating saja namun ada beberapa tambahan seperti deskripsi. Kode html-nya bisa Anda salin langsung.

1 individual rating tampilan di blog
Kode css yang harus Anda pasang di template, pertama silahkan cari kode ]]></b:skin> kemudian paste kode css berikut di atas ]]></b:skin>

.content-box-infoindong {
border: 4px dashed rgb(204, 204, 204);
margin: 5px;
padding: 10px;
}
.content-box-infoindong:hover {
background-color: rgb(241, 246, 249);
border: 4px dashed rgb(31, 168, 245);
margin: 5px;
padding: 10px;
background:url(http://2.bp.blogspot.com/--5ijAMJ5vTs/URI9b4T2LNI/AAAAAAAAAgE/dD7i7JLBFGc/s1600/author%2Breview%2Binfoindong%2Bdot%2Bcom.png) bottom right no-repeat rgb(241, 246, 249);background-size:150px 39px !important;
}

Kode html yang bisa Anda pasang manual per artikel (bisa dipasang langsung ke postingan melalui editor html)

<div class='content-box-infoindong'>
<div itemscope='' itemtype='http://schema.org/Review'>
<table>
<div itemprop='itemReviewed' itemscope='' itemtype='http://schema.org/Thing'>
<meta content='Tulis judul artikel Anda disini' itemprop='name'/>
</div>
<tr align='justify'>
<td width='20%'>Judul
</td>
<td width='60%'><span itemprop='name'>Tulis judul artikel Anda disini</span>
</td>
</tr>
<tr align='justify'>
<td width='20%'>Deskripsi
</td>
<td width='60%'><span itemprop='description'>Isikan deskripsi singkat artikel Anda disini</span>
</td>
</tr>
<tr align='justify'>
<td width='20%'>Author
</td>
<td width='60%'><span itemprop='author'>Isikan nama Anda disini</span>
</td>
</tr>
<tr align='justify'>
<td width='20%'>Author Rating
</td>
<td width='60%'><div itemprop='reviewRating' itemscope='' itemtype='http://schema.org/Rating'><meta content='1' itemprop='worstRating'/>
<span itemprop='ratingValue'>4</span>/
<span itemprop='bestRating'>5</span> Suara</div>
</td>
</tr>
</table>
</div>
</div>

Bila Anda menginginkan setiap posting memiliki rating bintang, pertama silahkan menuju ke editor template kemudian cari kode

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>

Pencarian kode cepat tekan tombol keyboard CTRL+F .
Silahkan salin kode berikut di bawah kode <data:post.body/>

<div class='content-box-infoindong'>
<div itemscope='' itemtype='http://schema.org/Review'>
<table>
<div itemprop='itemReviewed' itemscope='' itemtype='http://schema.org/Thing'>
<meta expr:content='data:post.title' itemprop='name'/>
</div>
<tr align='justify'>
<td width='20%'>Judul
</td>
<td width='60%'><span itemprop='name'><data:post.title/></span>
</td>
</tr>
<tr align='justify'>
<td width='20%'>Deskripsi
</td>
<td width='60%'><span itemprop='description'><data:post.snippet/></span>
</td>
</tr>
<tr align='justify'>
<td width='20%'>Author
</td>
<td width='60%'><span itemprop='author'><data:post.author/></span>
</td>
</tr>
<tr align='justify'>
<td width='20%'>Author Rating
</td>
<td width='60%'><div itemprop='reviewRating' itemscope='' itemtype='http://schema.org/Rating'><meta content='1' itemprop='worstRating'/>
<span itemprop='ratingValue'>4</span>/
<span itemprop='bestRating'>5</span> Suara</div>
</td>
</tr>
</table>
</div>
</div>

2 individual rating tampilan di blog
Kode css yang harus Anda pasang di template, pertama silahkan cari kode ]]></b:skin> kemudian paste kode css berikut di atas ]]></b:skin>

.content-box-infoindong {
background-color: rgb(241, 246, 249);
border: 4px dashed rgb(31, 168, 245);
margin: 5px;
padding: 10px;
background:url(http://2.bp.blogspot.com/--5ijAMJ5vTs/URI9b4T2LNI/AAAAAAAAAgE/dD7i7JLBFGc/s1600/author%2Breview%2Binfoindong%2Bdot%2Bcom.png) bottom right no-repeat rgb(241, 246, 249);background-size:150px 39px !important;
}

Untuk pemasangan kode html rating bintang sama dengan contoh 1 individual rating di atas, bisa pakai untuk manual per artikel maupun otomatis di semua artikel. Silahkan pilih salah satu.

1 aggregate rating tampilan di blog
Di bawah ini merupakan kode css yang harus Anda pasang di template blogger, pertama silahkan cari kode ]]></b:skin> kemudian paste kode css berikut di atas ]]></b:skin>

.content-box-infoindong {
border: 4px dashed rgb(204, 204, 204);
margin: 5px;
padding: 10px;
}
.content-box-infoindong:hover {
background-color: rgb(241, 246, 249);
border: 4px dashed rgb(31, 168, 245);
margin: 5px;
padding: 10px;
background:url(http://2.bp.blogspot.com/--5ijAMJ5vTs/URI9b4T2LNI/AAAAAAAAAgE/dD7i7JLBFGc/s1600/author%2Breview%2Binfoindong%2Bdot%2Bcom.png) bottom right no-repeat rgb(241, 246, 249);background-size:150px 39px !important;
}

Kode html yang bisa Anda pasang manual per postingan (bisa dipasang langsung ke postingan melalui editor html)

<div class='content-box-infoindong'>
<div itemscope='' itemtype='http://schema.org/Review'>
<table>
<div itemprop='itemReviewed' itemscope='' itemtype='http://schema.org/Thing'>
<meta content='Tulis judul artikel Anda disini' itemprop='name'/>
</div>
<tr align='justify'>
<td width='20%'>Judul
</td>
<td width='60%'><span itemprop='name'>Tulis judul artikel Anda disini</span>
</td>
</tr>
<tr align='justify'>
<td width='20%'>Deskripsi
</td>
<td width='60%'><span itemprop='description'>Isikan deskripsi singkat artikel Anda disini</span>
</td>
</tr>
<tr align='justify'>
<td width='20%'>Author
</td>
<td width='60%'><span itemprop='author'>Isikan nama Anda disini</span>
</td>
</tr>
<tr align='justify'>
<td width='20%'>Author Rating
</td>
<td width='60%'><div itemprop='reviewRating' itemscope='' itemtype='http://schema.org/AggregateRating'><meta content='1' itemprop='worstRating'/>
<span itemprop='ratingValue'>4</span>/
<span itemprop='bestRating'>5</span> Suara Dari <span itemprop="ratingCount">1001</span> Ulasan</div>
</td>
</tr>
</table>
</div>
</div>

Bila Anda menginginkan setiap posting memiliki rating bintang secara otomatis, pertama silahkan menuju ke editor template kemudian cari kode

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>

Pencarian kode cepat tekan tombol keyboard CTRL+F .
Silahkan salin kode berikut di bawah kode <data:post.body/>

<div class='content-box-infoindong'>
<div itemscope='' itemtype='http://schema.org/Review'>
<table>
<div itemprop='itemReviewed' itemscope='' itemtype='http://schema.org/Thing'>
<meta expr:content='data:post.title' itemprop='name'/>
</div>
<tr align='justify'>
<td width='20%'>Judul
</td>
<td width='60%'><span itemprop='name'><data:post.title/></span>
</td>
</tr>
<tr align='justify'>
<td width='20%'>Deskripsi
</td>
<td width='60%'><span itemprop='description'><data:post.snippet/></span>
</td>
</tr>
<tr align='justify'>
<td width='20%'>Author
</td>
<td width='60%'><span itemprop='author'><data:post.author/></span>
</td>
</tr>
<tr align='justify'>
<td width='20%'>Author Rating
</td>
<td width='60%'><div itemprop='reviewRating' itemscope='' itemtype='http://schema.org/AggregateRating'><meta content='1' itemprop='worstRating'/>
<span itemprop='ratingValue'>4</span>/
<span itemprop='bestRating'>5</span> Suara Dari <span itemprop="ratingCount">1001</span> Ulasan</div>
</td>
</tr>
</table>
</div>
</div>

2 aggregate rating tampilan di blog
Kode css yang harus Anda pasang di template, pertama silahkan cari kode ]]></b:skin> kemudian paste kode css berikut di atas ]]></b:skin>

.content-box-infoindong {
background-color: rgb(241, 246, 249);
border: 4px dashed rgb(31, 168, 245);
margin: 5px;
padding: 10px;
background:url(http://2.bp.blogspot.com/--5ijAMJ5vTs/URI9b4T2LNI/AAAAAAAAAgE/dD7i7JLBFGc/s1600/author%2Breview%2Binfoindong%2Bdot%2Bcom.png) bottom right no-repeat rgb(241, 246, 249);background-size:150px 39px !important;
}

Untuk pemasangan kode html rating bintang sama dengan contoh 1 aggregate rating di atas, bisa pakai untuk manual per artikel maupun otomatis di semua artikel