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 :-bd
HapusWaaah ini yang ane cari, sangat bermanfaat thanx gan..
BalasHapussama sama gan :)
HapusMenggunakan tag kondisional ya ? hehe
BalasHapusdi gabung dengan css {display:none}
HapusYap :D
Hapussilahkan di coba sob :-bd
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>