Membuat thumbnail hanya tampil di homepage

Untuk sahabat yang belum tahu bagaimana menerapkan trik dan cara ini mungkin sering punya pertanyaan, kok bisa ya ketika di halaman beranda/depan/homepage blog image/gambarnya muncul tetapi ketika di halaman posting kok hilang...?, mungkin ini bukan bahasan baru lagi, hanya saja saya menulis ini untuk sobat yang ingin tahu trik dan caranya. jika anda sudah memahami CSS dan tag conditional, cara dan trik ini sangat mudah sebenanya untuk di terapkan. simak saja cara untuk memasang trik yang memunculkan image/gambar posting hanya dihomepage di bawah ini:

Pertama kita akan membuat sebuah class CSS yang nilainya akan menyembunyikan, lihat dibawah ini:

misalkan image/gambar yang akan kita munculkan dihalaman depan saja kita beri class gambar-depan, maka cssnya sbb

.gambar-depan {display:none}

nilai css di atas adalah memerintahkan, agar image/gambar yang berkelas .gambar-depan untuk di sembunyikan {display:none}.

lalu kita buat conditional untuk halaman posting:

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

sekarang kita jadikan css dan conditional diatas menjadi sebuah perintah ketika halaman posting dibuka image/gambar yang memiliki class .gambar-depan untuk disembunyikan. bungkus kode css dengan kode tag <style type='text/css'>...</style>, hasilnya seperti kode berikut:

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

.gambar-depan {display:none}

</style>
</b:if>

Sejauh ini perintah untuk menghilangkan image/gambar pada halaman posting/artikel telah seslesai, jangan lupa letakkan kode conditional diatas sebelum kode tag </head>.

Sekarang bagaimana cara menempatkannya didalam posting, silahkan ikuti langkah dibawah ini.

Ketika anda telah membuat posting dan mengunggah/memasang gambar pada postingan, silahkan sisipkan kode class berikut ini:

class="gambar-depan"

Letakkan kode class diatas antara kode tag link seperti berikut:

<a class="gambar-depan" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjurVENd8MUDtoD1vWEhLAIc9S4jZWG2rusP8ePMUUZKzLsbzrITBfsDpmvo3DzS2-YyJis5xMAIdK31DlMwe_z5sZJu4X8Z177MMLbkwRYBaBEyQcZUGyEJK60LaP0Svd3EmPNAnftpPc/s1600/YUI+Compressor+Online+2013-08-17+16-51-26.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjurVENd8MUDtoD1vWEhLAIc9S4jZWG2rusP8ePMUUZKzLsbzrITBfsDpmvo3DzS2-YyJis5xMAIdK31DlMwe_z5sZJu4X8Z177MMLbkwRYBaBEyQcZUGyEJK60LaP0Svd3EmPNAnftpPc/s400/YUI+Compressor+Online+2013-08-17+16-51-26.png" width="400" /></a>

atau juga bisa seperti ini:

<img class="gambar-depan" border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjurVENd8MUDtoD1vWEhLAIc9S4jZWG2rusP8ePMUUZKzLsbzrITBfsDpmvo3DzS2-YyJis5xMAIdK31DlMwe_z5sZJu4X8Z177MMLbkwRYBaBEyQcZUGyEJK60LaP0Svd3EmPNAnftpPc/s400/YUI+Compressor+Online+2013-08-17+16-51-26.png" width="400" />

Tambahkan kode yang berwarna merah seperti yang ditunjukkan pada kode HTML diatas. Intinya adalah pada class="gambar-depan". Commons ini yang akan mengatur bahwa thumbnail/gambar akan dihidden/disembunyikan pada saat halaman posting/artikel dibuka.

Semoga berguna...

Belum berminat? tak apa 😊 bantu kami dengan membagikan link ini ke teman, siapa tahu, justru mereka sedang mencari ini!