Cara Custom Thumbnail Utama Agar Berbeda Dengan Artikel Blogger
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.
0 Response to "Cara Custom Thumbnail Utama Agar Berbeda Dengan Artikel Blogger"
Post a Comment