>Menampilkan Thumbnail Yang Berbeda Pada Halaman Home

February 1, 2011 at 8:41 pm | Posted in Article, computer and high technology | Leave a comment

>

Saya 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 total kode:

<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.

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

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

Leave a Comment »

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.
Entries and comments feeds.

%d bloggers like this: