Selamat Malam para manusia 😁, kali ini gue mau membagikan tutorial,
gimana sih cara bikin Thumbnail Blog secara Custom?, contohnya kaya
Blog gue, didimana Thumbnail Halaman utama berbeda dengan Halaman
Artikel, kaya gambar dibawah ini neh. ya lu coba ae kalo ga percaya 😁
Mungkin lo pernah bertanya ketika Umumnya lo membagiin Situs lo ke
Sosial media dan yang muncul adalah Gambar gajelas 👻👻, kadang juga Logo
Kunci sama Obeng yang nongol, tentu hal ini juga membuat blog lo jadi
engga menarik, dan orang-orang lebih memilih lewatin, ketimbang
mengunjunginya.
Sebelum itu, mari kita bahas Apa itu Thumbnail?, singkatnya Thumbnail
adalah Cuplikan Gambar yang mempresentasikan Gambar/Objek Utamanya, Ini
untuk mempermudah kita dalam melihat, mencari atau memilih Gambar atau
Objek yang kita inginkan, dalam hal Blogging, Thumbnail juga berguna
untuk menarik minat pengunjung sebagai Ilustrasi isi dari Artikel. 😎
1. Membuat Thumbnail Halaman Utama
Untuk membuat thumbnail dihalaman utama ini cukup mudah, lo cukup masukin
Script ini di Editor Tema, (Tema > Edit HTML), tepat dibawah <head> atau diatas </head>.
Jangan lupa ubah tulisan warna ijo dibawah dengan URL Gambar untuk halaman
utama lo (kalo gue pake gambar foto gue), trus Simpan Tema.
<b:if cond='data:blog.url == data:blog.homepageUrl'><meta content='URL GAMBARNYA' property='og:image'/></b:if>
2. Buat Thumbnail Khusus di Artikel
Umumnya, Thumbnail artikel diambil dari Gambar Pertama yang ada di
artikel kita, seperti postingan gue kali ini, lo bisa liat Gambar
diatas, biru-biru, trus itu ga termasuk Gambar yang bisa Di
klik/Zoom/Diperbesar, atau di Beranda blog ini, lo bisa liat Foto-foto
yang sama sekali ga ada di antara artikel gue, iya kan? nah kalo lo mau
kaya begitu. gini caranya.
Masukan Gambar
Masukan gambar dipaling atas artikel, dengan ukuran Original Image dan Align Center. agar
gambar yang diambil tidak pecah, dan lebih responsive.
Edit Script HTML
Klik tombol HTML di sisi atas kiri, lalu hapus Tag<a href.... blablabla> dan Tag </a>, Ini fungsinya agar Gambar tidak masuk
kedalam list Slide saat Gambar lain di perbesar.
setelah itu, masukan script display:none; diantara
sela-sela Tag (yang menutupi Gambar) <div style="MASUKAN DISINI">, ngerti ga? 😅
intinya kode tersebut akan jadi seperti ini...
Script tersebut berfungsi buat nyembunyiin gambar yang mau dijadiin
Thumbnail, toh karna fungsinya sebagai Thumbnail, jadi gambarnya ga
perlu ditampilkan juga kan?, dan Thumbnail pun harus berbeda dari
gambar lainnya, bisa dibilang sebagai Ilustrasi buat menarik Pengunjung
😅.
Sekian artikel gue kali ini tentang bedain Thumbnail Blog Utama dengan
Thumbnail Artikel, semoga membantu lo dalam menarik minat pembaca,
pengunjung, dsb.. 😁 See Ya..!
Cari dengan kata-kunci :
-
Cara membuat Thumbnail artikel blog.
-
Membuat Thumbnail artikel blog berbeda dengan isi artikel.
-
Membuat Thumbnail utama Blog.
-
Thumbnail Blog.
0Komentar