Hidup akan terasa lebih indah bila kita saling berbagi... !!

Sabtu, 11 Mei 2013

Membuat efek zoom pada gambar blog

Malam sobat blogger, setelah seharian membongkar template blog saya yang baru, kali ini saya akan memposting tips membuat efek zoom pada gambar yang baru saja saya pelajari dari blog-nya Mas Chayoy dan sepertinya berhasil di blog saya. Jadi saat mouse sobat diarahkan ke gambar di postingan blog, maka gambar tersebut akan membesar seperti di-zooming. Tentunya efek ini akan memberikan sedikit variasi di blog kita sehingga blog sobat menjadi lebih "berwarna" dengan harapan para pengunjung blog tidak cepat bosan.

Untuk membuat efek tersebut caranya sangat mudah dan tidakbegitu sulit, langkah - langkah yang harus sobat lakukan yaitu :
  • Loginlah ke Dasboard Blogger
  • Pilih menu Tata Letak lalu klik Edit HTML
  • Tekan Ctrl + F untuk mencari string : ]]></b:skin>
  • Copy kode di bawah ini tepat di atas string tadi
    .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: 36px 12px;
    -moz-border-radius: 36px / 12px;
    -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
    }
  • Ganti angka 1.5 berwarna merah dengan ukuran zoom sesuai selera sobat
  • Tekan Save Template
  • Selesai

Sampai di sini sudah selesai proses pembuatan efek zoom-nya. Silahkan sobat lihat perubahannya. Mudah - mudahan sobat berhasil.

Semoga bermanfaat.
Share:

0 komentar:

Posting Komentar

Silahkan tinggalkan komentar jika ada yang ingin sobat tanyakan termasuk informasi BROKEN LINK !! Mohon tidak memberikan komentar spam, berbau SARA dan konten DEWASA.
Terimakasih !

Recent Posts Widget

Komentar

Page View