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'>Kode html yang dipakai bila dipasang secara otomatis (di dalam template blogger):
<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>
<div itemscope='' itemtype='http://schema.org/Review'>Rating bintang bertipe aggregate rating
<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>
Kode html yang dipakai bila dipasang secara manual tiap posting (di dalam postingan langsung):
<div itemscope='' itemtype='http://schema.org/Review'>Kode html yang dipakai bila dipasang secara otomatis (di dalam template blogger):
<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>
<div itemscope='' itemtype='http://schema.org/Review'>Rating bintang dengan propertis standar disertai css menarik
<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>
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 {Kode html yang bisa Anda pasang manual per artikel (bisa dipasang langsung ke postingan melalui editor html)
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;
}
<div class='content-box-infoindong'>Bila Anda menginginkan setiap posting memiliki rating bintang, pertama silahkan menuju ke editor template kemudian cari kode
<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>
- <b:if cond='data:blog.pageType == "item"'>
- <data:post.body/>
Silahkan salin kode berikut di bawah kode <data:post.body/>
<div class='content-box-infoindong'>2 individual rating tampilan di blog
<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>
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 {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.
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;
}
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 {Kode html yang bisa Anda pasang manual per postingan (bisa dipasang langsung ke postingan melalui editor html)
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;
}
<div class='content-box-infoindong'>Bila Anda menginginkan setiap posting memiliki rating bintang secara otomatis, pertama silahkan menuju ke editor template kemudian cari kode
<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>
- <b:if cond='data:blog.pageType == "item"'>
- <data:post.body/>
Silahkan salin kode berikut di bawah kode <data:post.body/>
<div class='content-box-infoindong'>2 aggregate rating tampilan di blog
<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>
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 {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
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;
}