Cara Membuat Efek Zoom Thumbnail di Template Viomagz
Pada dasarnya tampilan thumbnail di template Viomagz sudah bagus, terlebih kita bisa menyesuaikan tinggi dan lebarnya secara manual melalui pengeditan HTML.
Namun apabila Anda ingin memasang efek tertentu pada thumbnail yang ada di homepage, tentu Anda harus memasang kode CSS tambahan pada template Viomagznya.
Nah berikut ini, Saya akan berbagi cara membuat thumbnail di hompage blog memiliki efek zoom in dan zoom out sebagai tambahan fitur mempercantik blog Anda.
Cara Membuat Efek Zoom Pada Thumbnail Blog
Berikut ini adalah langkah-langkah yang harus Anda lakukan dalam pemasangan efek zoom ini.
- Buka Dashboard Bloger
- Pilih Menu Tema
- Pilih Edit HTML.
Cari dan letakan CSS di bawah ini tepat di atas kode ]]></b:skin>
.img-thumbnail img{width:100%;height:auto;transform:scale(1.0);backface-visibility:hidden;padding:0;margin:0;transition:transform .1s}
.img-thumbnail:hover img {transform:scale(1.05);}
Klik simpan dan lihat hasilnya.
Untuk demo, silahkan Anda masuk ke hompage blog ini dan arahkan kursor ke thumbnail postingan.
Baca: Cara Membuat Thumbnail Youtube
Catatan:
- Nilai widht menentukan besar kecil tampilan thumbnail. 100% adalah nilai fix atau default atau awal, sedangkan jika Anda memperkecilnya nilainya, maka thumbnail akan mengecil.
- Nilai scale menentukan seberapa besar zoom in atau zoom out. Semakin kecil nilainya, maka semakin kecil juga zoom in pada thumbnail. Dan semakin besar nilainya, semakin besar zoom out pada thumbnail.
- .img-thumbnail adalah kode pemanggil thumbnail di template Viomagz. Apabila Anda menggunakan template lain maka silahakan cari dan ganti kode tersebut dengan kode pemanggil yang ada di template Anda.
Nah itulah tutorial blogger cara agar thumbnail blog membesar saar di klik atau di tap.
Semoga bermanfaat.
Posting Komentar