Panduan Bina Blog dengan Mudah dan Pantas.

Cara Buat Gambar Membesar Ketika Di Sentuh Cursor

Cara Buat Gambar Membesar Ketika Di Sentuh Cursor | Tutorial Blog
Rajah 1.1 - Klik Utk Tumbesaran

Asalamualaikum dan Salam Sejahtera

Ini merupakan tutorial pertama yang di publish pada blog minor saya di mana dalam tutorial ini saya akan mengajar bagaimana menghasilkan effek gambar membesar ketika cursor menyentuh mana-mana imej yang terdapat pada blog anda.

Effek seperti ini sesuai untuk blog yang mempunyai banyak gambar atau photoblog kerana ianya lebih kelihatan interaktif yang membolehkan pengujung blog anda lebih memfokuskan pada satu-satu imej sahaja.

Effek ini di namakan sebagai Image Zoom Effect atau Hover Zoom Smooth Effect yang banyak di guna pakai pada platform blogspot.

Cara Buat Gambar Membesar Ketika Di Sentuh Cursor

Langkah 1:
Login Ke account Blogspot Anda

Langkah 2:
Pilih Template >> Edit Html

Langkah 3:
Tekan Ctrl (Win)/Command (Mac) + F bagi menghidupkan fungsi carian. Cari Kod ]]></b:skin>

Langkah 4:
Jika dah jumpa kod yang di cari di langkah 3, paste kan kod berikut tepat di atas Kod ]]></b:skin>

.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); }


Langkah 5:
Klik Save Template dan Lihat Hasilnya.
0 Komen untuk "Cara Buat Gambar Membesar Ketika Di Sentuh Cursor"

Terima Kasih Sudi Singgah Komen...

Back To Top