Menampilkan Gambar Thumbnail Khusus Pada Artikel di Home

Salah satu elemen penting pada halaman Beranda (Home) sebuah blog adalah Thumbnail. Gambar Thumbnail berfungsi menambah daya tarik artikel sebelum dibuka oleh visitor. Blogger yang senantiasa menjaga estetika blog tentunya wajib menyediakan Thumbnail khusus untuk tiap artikel yang nantinya terpajang di halaman Home dan Label.

Kebanyakan template blog sendiri sudah menyediakan fitur Thumbnail yang otomatis mengambil salah satu gambar postingan untuk ditampilkan di Beranda. Tapi, ada masalah pelik mengenai hal ini. Pertama, dimensi Thumbnail sering tidak sesuai dengan gambar yang dipasang dalam artikel. Kedua, Thumbnail selalu menampilkan gambar pertama yang berada di postingan.

Kalau Agan melirik halaman Home SyamSalabim, bisa dilihat setiap postingan dalam blog ini memiliki Thumbnail khusus yang tidak tampil dalam artikelnya sendiri. Bagaimana cara melakukan hal ini?


Sebenarnya cukup simpel. Yang perlu dilakukan hanya membuat gambar dengan ukuran yang pas dan sesuai dengan dimensi Thumbnail yang disediakan template masing-masing. Kemudian pasang gambar tersebut dalam artikel tapi dibuat "menghilang" dengan kode CSS sederhana. Untuk lebih jelasnya silahkan ikuti tutorial berikut ini.

TUTORIAL

1. Silahkan siapkan gambar yang ingin dijadikan Thumbnail.

2. Atur ukuran tinggi lebarnya sehingga sama dengan Thumbnail template yang digunakan. Bisa pakai software apa saja. Syams sendiri bukan ahli aplikasi editing, jadinya lebih sering pakai MS Word.


3. Buat Entri Baru dan beralih ke editor HTML. Unggah gambar tersebut.


4. Kalau sudah Agan akan mendapat kode seperti di bawah ini. Yang Syams tandai merah adalah link/url gambar tadi. Ambil dan simpan link itu, kode lainnya dihapus saja.

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLd1mwixop3PLjMN0uK8hdnYs0Xq2tzhkIJ9C-Ds-18AtxWZfh-4pfXsWFMHCgqVGoD7IYVryWV6yijCaatL4zxsv57SosQ8udC5jnVvGAoVz5OWTFHa-0KMqnP_FAJmVPpEfiPpKvwZE/s1600/thumbnail.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLd1mwixop3PLjMN0uK8hdnYs0Xq2tzhkIJ9C-Ds-18AtxWZfh-4pfXsWFMHCgqVGoD7IYVryWV6yijCaatL4zxsv57SosQ8udC5jnVvGAoVz5OWTFHa-0KMqnP_FAJmVPpEfiPpKvwZE/s320/thumbnail.png" width="320" height="187" data-original-width="342" data-original-height="200" /></a>

5. Kemudian salin kode gambar HTML berikut ke dalam artikel dan ganti tanda bintang dengan link gambar yang sebelumnya telah disimpan.

<img class="thumbnail" src="*****"/>

6. Selanjutnya, edit template blog di Dashboard melalui Tema > Edit HTML. Cari kode </head> dan copy paste kode CSS berikut di atasnya lalu Simpan.

<style>
.blog-post img.thumbnail{display:none}
</style>

7. Terakhir, Agan bisa beralih kembali ke editor Compose. Tapi pastikan kode gambar Thumbnail berada paling atas postingan sebelum mempublikasikan artikel.

Demikian cara menampilkan gambar Thumbnail khusus untuk tiap artikel blog. Dengan begitu, halaman Beranda blog Agan menjadi lebih menarik dan eksotis untuk dilihat pengunjung ketika tengah menjelajahi navigasi blog dari halaman utama (Home) ke halaman kategori (Label). Keberadaan Thumbnail ini juga mencerminkan sifat profesional seorang blogger dalam menggarap blog miliknya sehingga tiap artikel tampak lebih berkualitas.