[TIPS DAN TRICK] Cara Membuat Rating Bintang Di Blogspot

Posted by : Unknown Selasa, 19 Februari 2013

Pertama anda harus memiliki akun di Google Plus. Akun google plus anda harus sudah terhubung ke blog anda dimana dalam setting profil anda menjadi kontributor. Jika belum edit dulu profil google plus anda dan masukkan URL homepage sebagai blog yang di kelola
Login ke dashboard blogger anda, pilih Rancangan > Edit HTML, centang Expand Template Widget.
Jika akun Google Plus anda sudah dihubungkan dengan blogger, selanjutnya buat meta tag seperti contoh punya saya dibawah ini dengan menggunakan URL id profil google plus anda. Letakkan meta tag ini dalam susunan meta tag yang telah ada di template anda atau diatas kode <b:skin <![CDATA[/* .
<meta content='general' name='rating'/> <link href='https://plus.google.com/110275608671215455370'rel='publisher'/>.
Selanjutnya letakkan kode dibawah ini tepat dibawah kode <body> pada template. <div itemscope='' itemtype='http://data-vocabulary.org/Review'>
Kemudian letakkan tag penutup </div> diatas kode </body> pada template. Dengan demikian kita sudah memberikan markup (penanda) area posting yang diberi rating yaitu diantara tag <body> dan </body>.
Lanjutkan perburuan (:D) dengan mencari kode HTML judul posting seperti dibawah ini.
<h3 class='post-title entry-title'><b:if cond='data:post.link'><a expr:href='data:post.link'><data:post.title/></a><b:else/><b:if cond='data:post.url'><b:if cond='data:blog.url != data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if><b:else/><data:post.title/></b:if></b:if></h3>
Catatan Penting :Kode heading (h3) pada setiap template berbeda-beda, seperti pada template saya judul posting menggunakan heading (h1). Jadi pastikan dulu keberadaan tag judul posting pada template anda. Bagi yang menggunakan breadcrumbs lebih gampang, kode judul posting biasanya ada dibawah susunan kode breadcrumbs. Trik mudah menemukannya adalah dengan melihat page source halaman posting anda.
Jika sudah ketemu, tambahkan kode HTML yang berwarna merah sehingga susunan kode HTML lengkapnya menjadi seperti dibawah ini.
<span itemprop='itemreviewed'><span itemprop='description'><h3 class='post-title entry-title'><b:if cond='data:post.link'><a expr:href='data:post.link'><data:post.title/></a><b:else/><b:if cond='data:post.url'><b:if cond='data:blog.url != data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if><b:else/><data:post.title/></b:if></b:if></h3></span></span>
Lanjut terus bro dengan mencari kode seperti dibawah ini.
<span class='fn'><data:post.author/></span>
Tambahkan dengan kode yang berwarna merah sehingga menjadi seperti dibawah ini.
<span class='fn'><span itemprop='reviewer'><data:post.author/></span></span>
Langkah terakhir adalah memberikan nilai rating pada bintang sehingga hasil tampilan di pencarian google bintangnya kelihatan bersinar he he. Tambahkan kode yang berwarna biru pada susunan kode diatas, sehingga menjadi seperti dibawah ini.
<span class='fn'><span itemprop='reviewer'><data:post.author/></span></span></b:if></span><span itemprop="rating">4.5</span>
Step by step langkah pembuatan rating bintang rich snippets telah selesai, selanjutnya anda harus melihat preview dari hasil rating bintang yang anda buat melalui Google Rich Snippets Testing Tool. Jika hasil preview terlihat seperti gambar dibawah ini berarti anda telah SUKSES membuat rating bintang ini.

Description: [TIPS DAN TRICK] Cara Membuat Rating Bintang Di Blogspot
Rating: 4.5
Reviewer: Unknown
ItemReviewed: [TIPS DAN TRICK] Cara Membuat Rating Bintang Di Blogspot