Cara Membuat Thumbnail Gambar Blog Membesar dan Mengecil

Madamvia - Hai Sobat, setelah sebelumnya kita membahas cara membuat efek zoom in dan out gambar di blog, kini kita akan membahas tentang cara membuat thumbnail gambar blog membesar dan mengecil. Thumbnail adalah sebuah istilah gambar kecil yang mewakili sebuah gambar besar agar memudahkan untuk memilih.

Baca juga:

Cara Memperbaiki Postingan Yang Hilang di Homepage Blogger

Cara Membuat dan Memasang Live Chat di Blog Terbaru 2018

Cara Menghilangkan Sidebar Blog di Halaman Tertentu

Tutorial Membuat Thumbnail Gambar Membesar dan Mengecil

Untuk membuat thumbnail gambar membesar dan mengecil saat mengarahkan mouse di atasnya ternyata tidak terlalu sulit. Berikut ini langkah-langkah yang harus kamu lakukan:

1. Pergi ke menu Blogger.

2. Klik "Theme".

3. Klik "Edit HTML"

4. Gunakan ctrl+f untuk mencari kode "]]></b:skin>"

5. Kemudian copy+paste kode berikut tepat di atas:

.postthumb img{width:100%;height:auto;transform:scale(1.0);backface-visibility:hidden;padding:0;margin:0;transition:transform .5s}
.postthumb:hover img {transform:scale(1.52);}

6. Selanjutnya, ganti ".postthumb" dengan kode thumbnail di blog kamu.

7. Gunakan inpect element (klik kanan > inpect element) kemudian klik gambar thumbnail. Sebagai contoh, pada blog madamvia kode thumbnail nya adalah "postthumb"

8. Setelah diganti, kini tinggal save/simpan theme dan refresh halaman blog kamu.

Nah, selamat kini gambar thumbnail post di blog kamu sudah bisa membesar dan mengecil saat diarahkan mouse di atasnya. Bagaimana menurut kamu? Jika ada yang ingin ditanyakan silahkan komentar ya.

Share to:

Google+ Facebook Twitter