Menampilkan Thumbnail yang Berbeda Pada Halaman Home

Maaf Za Sobat Chika kurang tau apakah wordpress menggunakan plugin untuk menampilkan
thumbnail yang berbeda pada halaman home, tapi itu bisa dilakukan dengan lebih
mudah di blogger. Cukup dengan conditional Tag.

Thumbnail ini akan digunakan pada halaman home untuk memberikan gambaran
tentang isi artikel, dan akan hilang setelah visitor masuk ke artikel. Salah
satu blog yang menerapkan system ini adalah bloggerplugin. Disini saya akan
menjelaskan pengaplikasiannya.

Kita akan menggunakan conditional tag yang mengatur penampakan pada halaman
artikel (item).
<b:if cond='data:blog.pageType == &quot;item&quot;'>
Untuk membungkus Class tertentu. Class ini akan diletakkan pada HTML gambar yang
ingin dijadikan thumbnail.

Berikut kodeNya :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.thumb {display:none}
</style>
</b:if>
 

Letakkan kode tersebut diatas </head>

Masuk kehalaman posting & saat memasukkan gambar ke artikel, akan muncul kode berikut:

<a
class="thumb" onblur="try
{parent.deselectBloggerImageGracefully();} catch(e) {}"
href="...s1600/anonymous.png"><img style="display:block; margin:0px
auto 10px; text-align:center;cursor:pointer; cursor:hand;width:
35px; height: 35px;" src="...s400/anonymous.png" border="0"
alt=""id="BLOGGER_PHOTO_ID_5529584144433618498" /></a>

Atau,

<img
class="thumb" src="...s1600/anonymous.png" alt="" />

Tambahkan kode yang berwarna merah seperti yang ditunjukkan pada kode HTML
diatas. Intinya adalah pada class="thumb".
Commons
ini yang mengatur bahwa thumbnail/gambar dihidden jika masuk ke halaman artikel.

Trik ini juga bisa dilakukan untuk mengobati thumbnail yang jelek pada auto read more, tentu saja selain dengan melakukan cropping pada gambar.