Cara Menampilkan Rating Snippet di Google

\ \ 0 comments
Assalamu 'alaikum wr.wb

Setelah lama berdiam diri dan berhenti sejenak mengupdate blog ini, akhirnya saya diberi kesempatan lagi buat nulis di blog ini. Sebenarnya sudah lama mau nulis lagi, tapi masih sibuk ngurusi template blog ini. Sekalian mau hijrah ke HTML5, entah sampai kapan bisa bertahan pakai HTML5, yah dicoba saja dulu.
blogger

Oke oke, mau curhat dulu nih, template udah baru, yang punya blog juga udah dapat suasana baru (lulus sekolah), tinggal tampilan di Google kok gak ada yang baru. Iseng-iseng nyobain Google Rating Snippet, ini tutorial cuman saya muat ulang aja, kredit kepada penulis aslinya Iskaruji.com .

Cara untuk menggunakan Rating Snippet silahkan ikuti petunjuk di bawah ya !

Sobat mesti punya akun Google + dulu, atau lebih baik sinkronisasikan akun Google + sobat dengan Blogger dengan meng-upgrade profil Blogger sobat.

Silahkan masuk ke akun Google + sobat terus dapatkan kode profil sobat seperti ini
https://plus.google.com/116202145555225092502
Kemudian masuk ke tab Rancangan Blogger ==> Edit HTML (Tampilan Lama), backup dulu template sobat untuk mencegah hal-hal yang tak diinginkan.<br /> Letakkan kode di bawah ini di bawah tag <head><br />
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<link href='https://plus.google.com/116202145555225092502' rel='author'/>
</b:if>
Lalu cari kode <body> , lalu letakkan kode di bawah ini setelah kode tersebut
<div itemscope='' itemtype='http://data-vocabulary.org/Review'>
 Jangan lupa tambahkan kode berikut sebelum </body>
</div>
 Kemudian cari kode berikut <div class='post-footer-line post-footer-line-1'> lalu tambahkan kode di bawah setelahnya
Description: <span itemprop='description'><data:post.title/></span><br/>
Rating: <span itemprop='rating'>5</span><br/>
Reviewer: <span itemprop='reviewer'><data:post.author/></span><br/>
ItemReviewed: <span itemprop='itemreviewed'><data:post.title/></span><br/> 
Kode di atas terserah pada sobat mau diletakkan di mana di line 1, 2, atau 3. Setelah itu cari kode yang mirip seperti ini
<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span>
Lalu ganti dengan kode berikut
<span class='post-author vcard' id='hcard'>
                <b:if cond='data:top.showAuthor'>
                  <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn'><span class='given-name'>
                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <data:post.author/>
                      </a>
                    </span></span>
                  <b:else/>
                    <span class='fn'><span class='given-name'><data:post.author/></span></span>
                  </b:if>
                </b:if>
              </span>
Lalu cari kode yang mirip seperti ini
<span class='post-timestamp'>
                <b:if cond='data:top.showTimestamp'>
                  <data:top.timestampLabel/>
                  <b:if cond='data:post.url'>
                    <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
                  </b:if>
                </b:if>
              </span>
Lalu ganti dengan kode ini
<span class='post-timestamp'>
                <b:if cond='data:top.showTimestamp'>
                  <data:top.timestampLabel/>
                  <b:if cond='data:post.url'>
                    <a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
                  </b:if>
                </b:if>
              </span>
Untuk 2 kode di atas sebaiknya diletakkan pada kode post-header-line-1. Selanjutnya tambahkan kode berikut sebelum setelah kode ]]></b:skin>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer{display:none;}
</style>
</b:if>

Terakhir simpan template sobat

Wassalamu 'alaikum wr.wb

Tidak ada komentar: