Mungkin sudah banyak blog yang memposting efek ini.. Tapi disini saya akan menjelaskan secara lebih rinci bagai mana cara kerja program tersebut bekerja.. Berikut panduannya :
- Login terlebih dahulu ke blog anda.
- Masuk ke Rencangan Edit HTML. (Lihat gambar 1.1)
- Copy paste program dibawah di atas code “]]></b:skin>” (Lihat gambar 1.2)
- Lalu klik Simpan Template
.dvp img{
-webkit-transform:scale(1);
-moz-transform:scale(0.3);
-o-transform:scale(0.3);
-webkit-transition-duration: 9.9s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}
.dvp img:hover{
-webkit-transform:scale(1.5);
-moz-transform:scale(1.4);
-o-transform:scale(1.1);
box-shadow:0px 0px 30px blue;
-webkit-box-shadow:0px 0px 30px blue;
-moz-box-shadow:0px 0px 30px blue;
opacity: 1;
}
 |
| Gambar 1.1 |
 |
| Gambar 1.2 |
Penjelasan program :
1. "-webkit-transform:scale(1);
-moz-transform:scale(0.3);
-o-transform:scale(0.3);"
Program di atas berguna untuk menampilkanresolusi gambar awal :
scale(1) maksudnya adalah gambar yg tampil di blog pertama kali adalah 1x dari gambar asli (Sesuai dengan default gambar) anda dapat mengubahnya sesuai keinginan anda.
"-moz-" adalah Mozila yang artinya gambar yang ada di postingan blog anda saat di buka di Mozila ukuran gambarnya adalah 0.3x dari gambar asli atau default;
Sedangkan "-o-" adalah Opera penjelasannya sama seperti Mozila.
2. "-webkit-transition-duration: 9.9s;
Program di atas berguna untuk menampilkanresolusi gambar awal :
scale(1) maksudnya adalah gambar yg tampil di blog pertama kali adalah 1x dari gambar asli (Sesuai dengan default gambar) anda dapat mengubahnya sesuai keinginan anda.
"-moz-" adalah Mozila yang artinya gambar yang ada di postingan blog anda saat di buka di Mozila ukuran gambarnya adalah 0.3x dari gambar asli atau default;
Sedangkan "-o-" adalah Opera penjelasannya sama seperti Mozila.
2. "-webkit-transition-duration: 9.9s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;"
Maksud dari program di atas adalah kecepatan Zoom saat kursor menyentuh gambar anda.. semakin kecil maka semakin cepat gambar anda di Zoom out.
3. "-webkit-transform:scale(1.5);
Maksud dari program di atas adalah kecepatan Zoom saat kursor menyentuh gambar anda.. semakin kecil maka semakin cepat gambar anda di Zoom out.
3. "-webkit-transform:scale(1.5);
-moz-transform:scale(1.4);
-o-transform:scale(1.1);"
Maksud dari program di atas adalah scala Zoom out dari scala default (yang awalanya gambar anda yang terdapat di postingan sebesar 1x dari gambar asli akan di perbesar dengan skala 1.5x, 1.4x (pada Mozila), dan 1.1x (pada Opera) dari gambar asli.
4. "box-shadow:0px 0px 30px blue;
Maksud dari program di atas adalah scala Zoom out dari scala default (yang awalanya gambar anda yang terdapat di postingan sebesar 1x dari gambar asli akan di perbesar dengan skala 1.5x, 1.4x (pada Mozila), dan 1.1x (pada Opera) dari gambar asli.
4. "box-shadow:0px 0px 30px blue;
-webkit-box-shadow:0px 0px 30px blue;
-moz-box-shadow:0px 0px 30px blue;"
Maksud dari program di atas adalah untuk memberi bingkai bayangan saat gambar sudah mencapai batas Zoom outnya. Bingkai bayangan tersebut dapat anda ubah warnanya sesuai keinginan anda dengan mengganti tulisan "blue" pada program di atas.
Cara menggunakan Program di atas :
1. Upload gambar dengan menklik icon
2. Setelah terupload klik Edit HTML yang terdapat pada postingan. (Lihat gambar 1.3)
Lalu ganti tulisan <div class="separator" manjadi : <div class="dvp" (Lihat gambar 1.4)
yang di ganti tulisan separator na saja menjadi dvp.
Sekian Postingan saya kali ini.. selamat mencoba... :)
Semoga Bermanfaat....
Maksud dari program di atas adalah untuk memberi bingkai bayangan saat gambar sudah mencapai batas Zoom outnya. Bingkai bayangan tersebut dapat anda ubah warnanya sesuai keinginan anda dengan mengganti tulisan "blue" pada program di atas.
Cara menggunakan Program di atas :
1. Upload gambar dengan menklik icon
2. Setelah terupload klik Edit HTML yang terdapat pada postingan. (Lihat gambar 1.3)
 |
| Gambar 1.3 |
yang di ganti tulisan separator na saja menjadi dvp.
 |
| Gambar 1.4 |
Sekian Postingan saya kali ini.. selamat mencoba... :)
Semoga Bermanfaat....
0 komentar:
Posting Komentar