membuat gambar diperbesar saat di klik

 

Jul18

Tutorial yang akan saya sampaikan pada kesempatan kali ini adalah tentang bagaimana cara membuat gambar atau foto membesar ketika diarahkan Cursor. Ada dua mamfaat yang dapat diperoleh dengan memasang fitur gambar membesar saat diarahkan cursor yaitu:

1. Dapat mengundang detak kagum pengunjung blog
2. Pengunjung blog tidak perlu meng-klik gambar untuk memperbesar ukurannya.

Disamping mamfaat tersebut, ada juga efek negatif dari memasang fitur blog ini. Apa efek negatifnya? Tampilan gambar atau foto di Read More tidak memiliki ukuran yang sama baik itu ukuran lebar maupun ukuran tinggi.
Tidak sedikit blog yang memasang fitur gambar membesar saat diarahkan Cursor. Untuk memasang fitur ini, sobat blogger tidak membutuhkan kode JavaScript tapi yang dibutuhkan adalah kode CSS. Apakah harus edit template untuk memasang fitur ini? Tidak, sobat blogger cukup memasukkan kode CSS yang sudah saya siapkan melalui Blogger Designer Template.

---

Cara Membuat Gambar Membesar Saat Diarahkan Cursor

---

• Sign In di blogger.com
• Pada Menu drop down, pilih template
• Klik tombol Costumize untuk menuju laman Blogger Designer Template

• Klik Advance dan copy paste kode berikut pada kolom yang tersedia

.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; } .post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }

• Klik tombol Apply to blog

Untuk melihat hasilnya, buka salah satu postingan sobat blogger.