Home » » Cara Membuat Efek Zoom Pada Gambar Di Blog Terbaru

Cara Membuat Efek Zoom Pada Gambar Di Blog Terbaru


Efek Zoom pada gambar di blog, wordpress, website selain untuk memudahkan pengunjung agar dapat melihat gambar yang terlalu kecil dan tidak kelihatan tulisan di dalamnya menjadi lebih besar dan jelas juga bisa membuat situs menjadi lebih menarik. Efek ini dapat memperbesar gambar ketika cursor / pointer diarahkan ke sebuah gambar yang ada di postingan / artikel maka gambar tersebut akan membesar secara otomatis tanpa harus di klik manual dahulu dan akan mengecil kembali jika kursor dipindahkan dari gambar tersebut. Cara pasang fitur efek auto zoom / pembesar image ini pada blogspot juga sangat mudah bagi para blogger sebab tidak menggunakan banyak javascript, jquery atau php tapi hanya dengan memasang / menambahkan beberapa kode CSS di html blog.

Cara Membuat Efek Zoom Pada Gambar Di Blog Terbaru

Kali ini saya akan share gimana Cara Membuat Efek Zoom Pada Gambar Di Blog Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin memperbesar gambar blog secara otomatis ketika cursor diarahkan ke gambar tersebut.

Cara Membuat Efek Zoom Image Di Blog Secara Otomatis :

1. Bikin efek zoom gambar seperti diatas yaitu dengan cara masuk ke menu Template dan klik Edit HTML

Cara Membuat Efek Zoom Pada Gambar Di Blog Terbaru

2. Kemudian cari kode  ]]></b:skin> atau </style>, gunakan Ctrl+F untuk memudahkan pencarian

Cara Membuat Efek Zoom Pada Gambar Di Blog Terbaru

3. Setelah itu masukkan kode berikut tepat diatas kode ]]></b:skin> atau </style> :

.post img:hover {
-o-transition: all 0.9s;
-moz-transition: all 0.9s;
-webkit-transition: all 0.9s;
-moz-transform: scale(1.7);
-o-transform: scale(1.7);
-webkit-transform: scale(1.7);
}

Jika sudah sobat bisa klik Simpan template.. Selesai dan lihat hasilnya

Cara Membuat Efek Zoom Pada Gambar Di Blog Terbaru

Nah itulah bagaimana cara membuat efek zoom pada gambar di blog dengan mudah dan cepat.

Silahkan dicoba

Artikel Lainnya :

0 komentar:

Post a Comment

Powered by Blogger.