 |
| 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.
