Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Menampilkan Thumbnail Hanya di Halaman Depan

Cara menampilkan thumbnail pada halaman depan saja dan tidak tampil pada halaman postingan. Pada WordPress dikenal dengan istilah Featured Image.
Menampilkan Thumbnail Hanya di Halaman Depan. Mungkin trik ini sobat sudah pada tau, ya itung2 sharing buat pemula aja, bagaimana cara menampilkan thumbnail gambar hanya pada halaman depan (home page), dan tidak akan tampil pada halaman postingan. Apabila menggunakan platform WordPress istilah ini disebut Featured Image.

Supaya lebih jelas silahkan lihat contoh gambar, pada halaman depan blog saya muncul thumbnail gambar, sedangkan pada halaman postingan akan hilang / tidak ditampilkan.

thumbnail

Langkah ke-1 (Pastikan gambar sudah diupload)


Sebelum melanjutkan ke cara menampilkan thumbnail hanya pada halaman depan, pastikan gambar sudah diupload ke Blogger. Bagi yang belum tau caranya (Baca: Cara Menyimpan Gambar di Blogger)

Langkah ke-2 (Menyimpan kode Kondisional di Template)


1. Login ke Blogger
2. Klik Template > Edit HTML
3. Simpan kode di bawah ini sebelum </head>

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

4. Simpan Template

Langkah ke-3 (Saat membuat Postingan)


Pada saat membuat postingan, masuk ke mode HTML kemudian sisipkan kode class="thumbnail" sebelum kode gambar. Penerapannya kurang lebih seperti contoh di bawah

<img class="thumbnail" src="link-gambar-yang-sudah-diupoad" alt="penjelasan gambar" />

pada contoh gambar di atas, kode yang saya pakai seperti ini :

<img class="thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPhbdQ9LSwW19T3SnqhwQqn1W-aRZJFxx3P-Zf6QtMV2ggpFgcZ1RJXNz-pr7LhnzAOX60-3WVHYs0ZMwP0vPx7CNKz6QPhRCmvRCpg0xGn4FicuNZUhuhaLWLcGtf2lhmQne1sRvLXeU/s1600/blogger-3d.png" alt="blogger logo" />

Apabila masuk mode Compose, gambar itu muncul, akan tetapi setelah di Publish akan disembunyikan pada halaman posting.

Semoga bermanfaat buat sobat !

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

48 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Maksudnya halaman depan itu homepage blog kita gitu ya, kang?
    Makasih banyak kang sharing tutor bagusnya.
    1. Iya sob, homepage blog kita :)
  2. sek asek...
    coba ahh.... Bljr lage
    Mksh KAng :)
    1. BERHASIL :)
      Mksh KAng :)
      :D
  3. Waduh, saya belum berhasil :(
    Masih belum ngerti dengan kode2
    1. gampang ko.. tinggal ikuti caranya aja :)
  4. owh jadi mainan css ya kang, trus di tag image nya mesti disisipi kode tambahan lagi :)
    1. Betul banget sob
  5. Kapan-kapan dicoba deh. makasih kang ismet
    1. Silahkan sob, smoga bermanfaat
  6. ini bagus kang..
  7. keren sob, membuat lebih profesional jadinya..tapi kalau gambar tutorialnya jangan di sembunyikan..hehe
  8. jadi hambar dong nanti kalo postingannya gak ada gambarnya, bukan begitu gan?
    1. iya gan,,kan yang bikin menarik gambarnya
  9. Kang ISmet, gimana bikin twitter kaya punya sampean itu ?? hehe
  10. Sip lah bos....
  11. ada dengan menunya, bagian tool dan contact us kang? koq item
    1. iya tuh, kayaknya img nya diremove lewat picasa :(
  12. bermain lagi saja...
  13. wuis mantaf gant ane mau coba dech ntar ke tkp..
    gant tx tas infonya..
    ane copy dulu dech scrift nya..
    eh ya ane folow mhon folback ya gant..buat persahabatan bloger..
  14. Wihhii dapet info baruu.. terimakasih Kang udh di share Tutor nya ...
    Btw buka jasa Pembuatan Blog tidak terus kalo ada biaya nya brp ?

  15. wah mantap nih themnya download dimana bang ?

    Atau bikin sendiri ya ? bisa minta code comment bloknya ?
    1. Kebetulan acak2 sendiri sob, belom ada link downloadnya :)
  16. Trina kasing sudah berbagi ilmunya, kang.
    Salam kenal dari kami :)
  17. saya follow nih, berharap followback nya..
  18. Wow boleh juga dicoba bang, nambah terus nih tips triknya. Izin baca2 bang :)
  19. Wah dapat ilmu baru ane... Salam sukses selalu Mas...
  20. tampalte ane udah otomatis isi thumbnail. tapi ukuranya ke gendean deh gan. ngatur ukuran thumbnail nya gimana gan????
    Mohon Saranya

    kirim ke e-mail ane gan: [email protected]
    terima kasih!
    1. Cari kode

      img_thumb_height = 100;
      img_thumb_width = 120;

      ukuran di atas hanya contoh saja, silahkan sesuaikan dengan keinginan kita

  21. bagus nih kang buat modif template jadi kayak magazine style..
    thanks kang triknya sukses selalu :D

    > www.elevenews.com
  22. lagi jalan-jalan dimari, sekalian ane like dan follow, terima kasih infonya gan, mau praktekin si thumbnail dulu :D
  23. Gan mo nanya nih kalo mau ngerefer blog jdi supaya saat blog utama ada maintence bsa di refer ke blog ke 2 dan blog ke 2 itu diset hanya gambar saja yg misal maintence sedang berlangsung gmanaa yaa gan minta tutornyaa yaaa gann TQ
  24. Maaf kang melenceng dari pembahasan nih, mau nanya cara bikin daftar isi seperti blog kang ismet ini... trims
  25. terimakasih kang infonya...
    ane mau tanya.
    ane sdang nyoba template kang ismet yg utk iklan gratis..
    berbeda dg artikel diatas..
    disini ane mau nanyain, biar thumbnail muncul di halaman post (ukuran proporsional) ngubahnya dimana y kang?
    ini gambar di halaman posting munculnya persegi panjang gitu kang...

    mohon pencerahannya y kang..

    terimakasih..
  26. ini buat di blogger apa di wordpress kang? sebab kalau di WP saya gak jalan setelah saya update
  27. kalau tumbnail tidak muncul cara mengatasinya gimana gan?, no image terus............. minta saran dong temlplate ane begitu terus
  28. kadang template beli juga seperti itu
  29. minggu lalu saya juga beli template dari gon....late tapi thumbnail homepage tidak muncul juga pusing deh adminnya katanya mau bantu tapi tak ada kabar
  30. dari paada pusing posting foto bugil hot aja
  31. mending cerita dewasa gan klik aja niks ane
  32. kalo untuk menampilkan Thumbnailnya saja gmana ya kang, seperti toko online
  33. kang ismet bagi dong cara membuat tampilan gambar posting di homepage seperti blog akang ini
  34. Tuan rumahna kamana ie teh.. meni awis tepang...
    1. lagi gak ol kali mas .. :)
  35. sederhana namun sangat bermanfaat kang. makasih :)
  36. kang, homepage ane kan udah mode read more, trus gambar yang ada dalem postingannya gak otomatis muncul di homepag, yang ada cuman bingkai + warna abu", cara nya gimana tuh biar setiap gambar di postingan udah otomatis muncul di homepg.
    Kalo tulisannya mah muncul, masalah nya cuma di gambar.
    thnx ya
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.