Membuat thumbnail hanya tampil di homepage

Membuat thumbnail hanya tampil di homepage

CSS sitemap Trik

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:

1code-line:2-1<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:

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 == &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/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...

Artikel Terkait

  • Jenis-jenis Selector Dasar CSS
    CSS memiliki jenis selector yang bervariasi, bahkan sangat beragam tergantung kebutuhan kita untuk mendesain halaman web. Dalam tutorial mengenal dasar selector CSS ini saya akan membahas 5 jenis selector dasar di dalam CSS. Selector CSS tidak hanya 5 jenis ini, namun dalam kebanyakan kasus sudah mencukupi untuk membuat sebuah halaman web HTML…
  • Thread komen blogger dengan commentDay
    gaya commentDay adalah gaya untuk standar Blogger Thread comment. Dengan gaya ini komentar default thread comment blogger lebih menjadi terlihat menarik. Gaya ini dirancang sesuai dengan gaya yang telah lama dicari yaitu: sederhana, jelas dan modern. Demo untuk memasang gaya thread komen ini, ikuti langkah berikut: Tambahkan kode be…
  • Menghitung ke-spesifik-an Selector
    CSS memiliki aturan tertentu tentang ke-spesifik-an selector, yaitu ketika sebuah property dari CSS, saling menimpa satu sama lain, selector yang paling spesifik lah yang akan menang. Aturan ke-spesifik-an CSS dihitung menggunakan formula 4 digit, contohnya: 0,1,0,0. Perhitungannya sama seperti hitung-hitungan kita sehari-hari, dimana 0,1,0,0…
  • Membuat efek gelembung dengan pure CSS
    Efek speech bubbles adalah efek yang populer saat ini, tetapi banyak tutorial mengandalkan presentasi HTML atau JavaScript dalam pembuatannya. Tutorial ini berisi panduan membuatnya yang dibuat menggunakan dengan CSS dan ditingkatkan dengan CSS3. Tidak ada gambar, tidak ada JavaScript dan dapat diterapkan untuk HTML semantik yang ada. Efek i…
  • Edit CSS tanpa masuk ke dalam Edit HTML
    Setiap blogger memang selalu berhubungan dengan CSS terutama dalam gaya tampilan untuk template, terkadang dalam meng-edit CSS kita kerap melakukan hal yang terkadang membuang waktu dan kurang berguna yaitu membuka editor html dan menyimpan CSS secara berulang - ulang. hal ini kita lakukan bukan karena tanpa alasan, selain untuk menciptakan ta…
  • Penggunaan Selector CSS
    Anggap saja  kita telah mengenal 5 jenis selector dalam CSS, yaitu Universal Selector, Tag Selector, Class Selector , ID Selector, dan Attribute Selector. Selector tersebut tidak hanya berdiri sendiri, namun dapat digabung menjadi sebuah selector yang lebih spesifik. CSS memungkinkan kita untuk menggabungkan beberapa jenis selector menja…

13 komentar


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

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...