Hi, guest ! welcome to AM-Shared. | About Us | Contact | Register | Sign In
<div style='background-color: none transparent;'><a href='http://am-shared.blogspot.com/2012/05/memasang-rss-ticker-javascript-hotline.html' title=''>Pasang Rss ticker</a></div>

Sabtu, 27 April 2013

Ditulis Oleh : Unknown - Berbagi Kreasi

Admin : Ali Mahmudi
Email : am.cybers@yahoo.com
Terbit : Sabtu, 27 April 2013
Judul : Cara Menampilkan Gambar Postingan Di Google

:: Lihat info lengkap penulis ::

Cara Menampilkan Gambar Postingan Di Google

Unknown , Sabtu, 27 April 2013

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 :

Cara Menampilkan Gambar Postingan Di Google
Sudah liatkan contoh screnshotnya ?tertarik ?oke ikuti 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,
Cara Menampilkan Gambar Postingan Di Google
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:skin>
 b. jika langkha diatas sudah dilakukan,sekarang silakan anda cari kode <body>

<div><div itemscope='' itemtype='http://data-vocabulary.org/Recipe'>
silakan agan pastekan kode diatas tersebut dibawah kode <body> dan hasilnya seperti dibawah ini :
<body>
<div><div itemscope='' itemtype='http://data-vocabulary.org/Recipe'>
c. setelah itu,cari lagi kode berikut :
<h2 class='post-title entry-title'>
Kira-kira kodenya yang seperti ini :
 <span itemprop='itemreviewed'><span itemprop='description'>
<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>
NB :
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 :
Cara Menampilkan Gambar Postingan Di Google
Yang perlu anda pertimbangkan adalah kode :
<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>
Kenapa ?
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'>
<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>
NB:
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>
</body>
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
ada yang lupa,jika sobat sudah menggunakan rich snippet,mungkin bisa di hapus agar tidak tabrakan,tapi juga gak apa^^hanya saran aja..heheheh

Comments
0 Comments

Join Us!

Site Info


Free PageRank Checker
Review http://am-shared.blogspot.com on alexa.com