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="http://3.bp.blogspot.com/-z7BxhAWBkOA/UB1UHcNZXpI/AAAAAAAACRg/xlbmDag2NXo/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 !

49 komentar

Maksudnya halaman depan itu homepage blog kita gitu ya, kang?
Makasih banyak kang sharing tutor bagusnya.

Balas

Iya sob, homepage blog kita :)

Balas

sek asek...
coba ahh.... Bljr lage
Mksh KAng :)

Balas

Waduh, saya belum berhasil :(
Masih belum ngerti dengan kode2

Balas

owh jadi mainan css ya kang, trus di tag image nya mesti disisipi kode tambahan lagi :)

Balas

Kapan-kapan dicoba deh. makasih kang ismet

Balas

keren sob, membuat lebih profesional jadinya..tapi kalau gambar tutorialnya jangan di sembunyikan..hehe

Balas

jadi hambar dong nanti kalo postingannya gak ada gambarnya, bukan begitu gan?

Balas

gampang ko.. tinggal ikuti caranya aja :)

Balas

iya gan,,kan yang bikin menarik gambarnya

Balas

This post seem very yummy!!! I love chocolate!
Technology, Free Software and Best Tutorial
your blog is good! I'll visit again :)
God Bless You

Balas

Kang ISmet, gimana bikin twitter kaya punya sampean itu ?? hehe

Balas

ada dengan menunya, bagian tool dan contact us kang? koq item

Balas

iya tuh, kayaknya img nya diremove lewat picasa :(

Balas

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

Balas

Wihhii dapet info baruu.. terimakasih Kang udh di share Tutor nya ...
Btw buka jasa Pembuatan Blog tidak terus kalo ada biaya nya brp ?

Balas

wah mantap nih themnya download dimana bang ?

Atau bikin sendiri ya ? bisa minta code comment bloknya ?

Balas

Trina kasing sudah berbagi ilmunya, kang.
Salam kenal dari kami :)

Balas

saya follow nih, berharap followback nya..

Balas

Wow boleh juga dicoba bang, nambah terus nih tips triknya. Izin baca2 bang :)

Balas

Wah dapat ilmu baru ane... Salam sukses selalu Mas...

Balas

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: dharmawangsa_dhr@yahoo.com
terima kasih!

Balas

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

> www.elevenews.com

Balas

lagi jalan-jalan dimari, sekalian ane like dan follow, terima kasih infonya gan, mau praktekin si thumbnail dulu :D

Balas

Silahkan sob, smoga bermanfaat

Balas

Tergantung juga sih... hehehe

Balas

Cari kode

img_thumb_height = 100;
img_thumb_width = 120;

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

Balas

Kebetulan acak2 sendiri sob, belom ada link downloadnya :)

Balas

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

Balas

Maaf kang melenceng dari pembahasan nih, mau nanya cara bikin daftar isi seperti blog kang ismet ini... trims

Balas

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

Balas

ini buat di blogger apa di wordpress kang? sebab kalau di WP saya gak jalan setelah saya update

Balas

kalau tumbnail tidak muncul cara mengatasinya gimana gan?, no image terus............. minta saran dong temlplate ane begitu terus

Balas

kadang template beli juga seperti itu

Balas

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

Balas

dari paada pusing posting foto bugil hot aja

Balas

mending cerita dewasa gan klik aja niks ane

Balas

kalo untuk menampilkan Thumbnailnya saja gmana ya kang, seperti toko online

Balas

kang ismet bagi dong cara membuat tampilan gambar posting di homepage seperti blog akang ini

Balas

Tuan rumahna kamana ie teh.. meni awis tepang...

Balas

lagi gak ol kali mas .. :)

Balas

sederhana namun sangat bermanfaat kang. makasih :)

Balas

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

Balas

Poskan Komentar


×
Chat