Cara Menampilkan Gambar Postingan Di Google - Selamat malam sobat Am semuanya ?sambil menunggu bola yakni barcelona vs athetico club malam ini saya akan sedikit menyempatkan diri untuk share tentang Cara Menampilkan Gambar Postingan Di Google yang sebenarnya sudah lama ingin saya share,tapi sebelumnya saya mohon maaf,bukan maksud saya untuk menggurui sobat semuanya,dan satu hal yang perlu diingat,jika ada kesamaan artikel tentang hal ini dan saya tidak mencantumkan link sumbernya saya mohon maaf,karena terus terang,saya dapat trik ini sudah lama sekali dan sayapun lupa dimana saya dapat artikel ini,oke tak perlu panjang lebar,langsung simak aja langkahnya berikut ini :
1. silakan login ke blog sobat,kemudian cari blog sobat,setelah itu,pilih edit html,namun sebelum melakukan hal ini,sebaiknya anda backup terlebih dahulu template agan agar jika ada kesalahan bisa dengan mudah kita kembalikan ke semula,
2. lanjut,disini saya agak merasa bingung dengan tampilan blogger yang sekarang,so template saya terpaksa saya cut dan saya edit melalui notepad,
jika anda merasa demikian berarti kita satu hati..hehehe (honda berkata"one heart")
disini saya akan menjelaskan dengan apa yang saya lakukan yaitu melalui notepad,tapi sebenarnya sama aja kok,kodenya juga sama.
3. saya anggap maslah diatas sudah selesai,kita menuju kelangkah berikutnya,simak kodenya berikut dengan seksama agar tidak salah :
a. Buka Template - Centang Expand Template
silakan sobat cari kode berikut pada template sobat ]]></b:skin>
.hrecipe{font:1px oswald;}silakan agan pastekan code tersebut diatas kode ]]></b:skin> dan hasilnya seperti dibawah ini :
.hrecipe{font:1px oswald;}b. jika langkha diatas sudah dilakukan,sekarang silakan anda cari kode <body>
]]></b:skin>
<div><div itemscope='' itemtype='http://data-vocabulary.org/Recipe'>silakan agan pastekan kode diatas tersebut dibawah kode <body> dan hasilnya seperti dibawah ini :
<body>c. setelah itu,cari lagi kode berikut :
<div><div itemscope='' itemtype='http://data-vocabulary.org/Recipe'>
<h2 class='post-title entry-title'>Kira-kira kodenya yang seperti ini :
<span itemprop='itemreviewed'><span itemprop='description'>NB :
<h2 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</span></span>
silakan samakan peletakannya,mungkin di tempat sobat kodenya seperti ini :
<h3 class='post-title entry-title'>soal H2 maupun H3 saya anggap sama saja tergantung peletakkannya,lihat gambar berikut,ini struktur dalam template saya yang menggunakan H2 :
Yang perlu anda pertimbangkan adalah kode :
<b:if cond='data:post.link'>Kenapa ?
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
sebab didalam template anda mungkin anda kemungkinan akan menemukan banyak kode <h2 class='post-title entry-title'> ataupun <h3class='post-title entry-title'> tapi biasanya dibawahnya itu kode lanjutannya akan berbeda,anda bisa mencermati pada gambar diatas,dan saya anggap langkah ini selesai,kita lajut ke langkah berikutnya.
d. langkah selanjutnya,silakan anda cari kode <data:post.body/>
jika sudah ketemu,silakan anda pastekan kode berikut tepat dibawah kode tersebut :
<div class='hrecipe'>NB:
<span class='item'>
<span class='fn'>Berbagi Kreatifitas</span>
</span>
<img class='photo' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/> By <span class='author'><b><data:blog.title/></b></span> Published: <span class='published'><data:post.timestampISO8601/></span> <span class='summary'><data:post.title/></span> <span class='review hreview-aggregate'> <span class='rating'> <span class='average'>4.5</span> <span class='count'>1993</span> reviews
</span>
</span>
</div>
jika anda menemukan kode <data:post.body/> lebih dari 2 atau tiga,silakan anda tempatkan kode diatas tepat dibawah kode <data:post.body/> yang pertama dan satu hal lagi silakan anda sesuaikan pada kode yang saya beri tanda merah diatas sesuaikan dengan keinginan anda.
e. ini merupakan langkah terakhir,jangan langsung disimpan karena template agan akan eroor sebab harus ada penambahan kode di akhir body,oke ini kodenya,silakan pastekan kode ini diatas kode </body>
</div></div>hasilnya akan seperti ini :
</div></div>Oke,selesai sudah,untuk berhasil atau tidaknya silakan anda menuju ke google rich snippet dan lihat apa yang terjadi. sekian dari saya semoga bermanfaat ya kawan ??THQ
</body>
ada yang lupa,jika sobat sudah menggunakan rich snippet,mungkin bisa di hapus agar tidak tabrakan,tapi juga gak apa^^hanya saran aja..heheheh