Memperbesar gambar pada posting blog

Salah satu cara untuk memanjakan pengunjung di blog kita adalah dengan mempermudah dalam melihat gambar yang ada pada posting. Kalau biasanya untuk melihat gambar supaya jelas kita harus melakukan klik tapi dengan tips berikut kita hanya perlu meletakkan crussor diatas gambar maka otomatis gambar tersebut akan bertambah sekian persen. Tergantung pengaturan yang kita lakukan. Penasaran? ikuti langkah-langkah berikut !

1. Masuk ke dasbor blogger

2. Pilih tamplate

3. Edit HTML

4. Centang Expand Template Widget

5. Cari ]]></b:skin> (seperti biasa untuk mempermudah pencarian tekan ctrl + f)

6. Letakkan kode berikut tepat diatasnya

.post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}.post img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}

7. Cari lagi <head> pastekan kode berikut di bawahnya

<style>

.post img:hover {

-o-transition: all 0.3s;

-moz-transition: all 0.3s;

-webkit-transition: all 0.3s;

-moz-transform: scale(1.2);

-o-transform: scale(1.2);

-webkit-transform: scale(1.2); }

</style>

Keterangan !

a. Yang berwarna hijau untuk menunjukkan waktu silakan edit sesuai keinginan

Yang berwarna merah menunjukkan skala pembesaran silakan edit sesuai keinginan

No comments:

Post a Comment