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:
1code-line:2-1<b:if cond='data:blog.pageType == "item"'>...</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:
1code-line:3-12code-line:3-23code-line:3-34code-line:3-45code-line:3-56code-line:3-67code-line:3-7<b:if cond='data:blog.pageType == "item"'>
<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/AVvXsEjdAjcO_M6zpELC87X1W3_06lyC7RKNwvqkgwfaarIiTPbnJpWr2pNviY5Jymww5g_oZKUqKuUjZiv_WXjJ3x4kCdLFESejgfPuqDZ9KEGdSp6OH0E4TqGZs0XI3iM-3ina3nPveUly6YM/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/AVvXsEjdAjcO_M6zpELC87X1W3_06lyC7RKNwvqkgwfaarIiTPbnJpWr2pNviY5Jymww5g_oZKUqKuUjZiv_WXjJ3x4kCdLFESejgfPuqDZ9KEGdSp6OH0E4TqGZs0XI3iM-3ina3nPveUly6YM/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/AVvXsEjdAjcO_M6zpELC87X1W3_06lyC7RKNwvqkgwfaarIiTPbnJpWr2pNviY5Jymww5g_oZKUqKuUjZiv_WXjJ3x4kCdLFESejgfPuqDZ9KEGdSp6OH0E4TqGZs0XI3iM-3ina3nPveUly6YM/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...
13 komentar
wehh mantap nih.. sy suka blog tips trik blog..
BalasHapusfollow ya
oke sob, asal folback aja
HapusWaaah ini yang ane cari, sangat bermanfaat thanx gan..
BalasHapussama sama gan
HapusMenggunakan tag kondisional ya ? hehe
BalasHapusdi gabung dengan css
Hapus{display:none}Yap
Hapussilahkan di coba sob
Hapusmantap dah atikelnya
BalasHapusdari banyak tutorial cuma ini yg bener makasih ya
BalasHapussemoga berguna
Hapusok tanks
BalasHapussip
BalasHapusLink aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>