Membuat Thumbnail Blog Membesar Ketika Tersorot Kursor
Membuat thumbnail membesar/zoom saat terkena kursor mungkin sudah tidak asing lagi jika di dengar oleh para blogger senior, tapi mungkin kalo lu orang baru saja mengetahui tips ini, bisa saja lu terapin di halaman blog lu, untuk mempercantik tampilan halaman blog.
Lalu bagaimana cara membuat thumbnail menjadi membesar ketika tersorot cursor?
Langkah membuatnya:
- Masuk ke akun blog lu pastinya.
- Dibagian menu, pilih Tema > Edit HTML.
- Lalu cari code ]]></b:skin>, lebih mudahnya menggunakan fungsi find dengan cara ' ctrl + f '.
- Jika sudah ketemu, copy pastekan code dibawah tepat di atas code ]]></b:skin>.
.img-thumbnail img{width:100%;height:auto;transform:scale(1.0);backface-visibility:hidden;padding:0;margin:0;transition:transform .5s}
.img-thumbnail:hover img {transform:scale(1.20);}- Kemudian simpan tema.
Keterangan
.img-thumbnail kalian ganti sesuai format gambar pada blog kalian(kalo lu belum tau caranya, di bawah keterangan ini gua kasih tau caranya).
.untuk scalenya(ukuran zoom) bisa kalian ganti sesuai keinginan kalian, sebagai contoh gua menggunakan scale sebesar(1.20).
.untuk scalenya(ukuran zoom) bisa kalian ganti sesuai keinginan kalian, sebagai contoh gua menggunakan scale sebesar(1.20).
Untuk mengetahui format gambar pada blog lu
- Buka halaman blog lu
- Klik kanan > inspect
- klik pada thumbnail gambar blog lu dan liat format gambar di halaman inspect.
- Biasanya setiap format gambarnya ada saja yang berbeda, jika sudah mengetahuinya, tinggal lu ganti dah tuh.
- Jangan lupa diterapin di blog lu. Selesai dah.
2 comments