Home » , » Menampilkan Thumbnail Yang Berbeda Pada Halaman Home

Menampilkan Thumbnail Yang Berbeda Pada Halaman Home

Saya kurang tau apakah wordpress memakai plugin untuk menampilkan thumbnail yang berbeda pada halaman home, tapi itu dapat dilakukan dengan lebih gampang di blogger. Cukup dengan conditional Tag.


Saya kurang tau apakah wordpress memakai plugin untuk menampilkan  thumbnail yang berb Menampilkan Thumbnail yang Berbeda Pada Halaman Home

Thumbnail ini akan dipakai pada halaman home untuk menunjukkan citra wacana isi artikel, dan akan hilang sesudah visitor masuk ke artikel. Salah satu blog yang menerapkan system ini yakni bloggerplugin. Disini saya akan menjelaskan pengaplikasiannya.


Kita akan memakai 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 total kode:


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

.thumb {display:none}

</style>
</b:if>
 

Letakkan isyarat tersebut diatas </head>


***


Masuk kehalaman posting & ketika memasukkan gambar ke artikel, akan muncul isyarat 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 isyarat yang berwarna merah ibarat yang ditunjukkan pada isyarat HTML diatas. Intinya yakni pada class="thumb". Commons ini yang mengatur bahwa thumbnail/gambar dihidden jikalau masuk ke halaman artikel.


Penulis dibalik Artikel ini:
Biyan
 | hhttp://www.dzignine.com

Trik ini juga dapat dilakukan untuk mengobati thumbnail yang buruk pada auto read more, tentu saja selain dengan melaksanakan cropping pada gambar.



0 comments:

Post a Comment

Search

Blog Archive