Salah
satu cara untuk mempercantik tampilan Blog anda adalah dengan
menambahkan suatu fitur yang di dalam dunia blogging disebut dengan nama
Image Zoom Effects atau Hover Zoom Smooth Effects.
Image zoom effects adalah suatu fitur yang dimana pada waktu anda
meletakan posisi cursor mouse pada suatu gambar yang nantinya ukuran
gambar tersebut akan berubah ukurannya menjadi membesar.
Fitur yang satu ini lumayan banyak di senangi para blogger walaupun
sebenarnya dengan memasang Image Zoom Effects ini di blog dapat
menggangu pengunjung yang sedang membaca postingan kita.
Postingan ini saya buat hanya untuk memberikan tambahan informasi cara
memperindah blog yang anda buat,bagi anda yang berminat memasangnya
silakan Anda ikuti proses pembuatannya dibawah ini :
- Silahkan anda masuk/log in ke akun blogger anda
- Pilih Template kemudian klik menu Edi HTML
- Centang Expand widget template
- Lalu cari kode ]]>
(untuk mempercepat pencarian kode tersebut anda gunakan
fungsi shortcuts keyboard dengan menekan tombol Ctrl + F)
Jika sudah ketemu kode tersebut ( ]]>
) letakkan kode di bawah ini tepat di atas kode yang anda cari 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: 0px
0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px
rgba(0,0,0,0.6); }
Terakhir anda klik Simpan template.
- See more at: http://onlinedapetincome.blogspot.com/2014/04/membuat-image-zoom-effects-di-blog.html#sthash.YVRBCcfN.dpuf
Contoh Website CSS3 + HTML 5 : Tema Go Green - Sebenarnya ini merupakan sebuah website sederhana yang masih mengutamakan HTML5 dan CSS3. dan sebagai mahasiswa IT , maka sepantasnya tundhu berbagi hal - hal kecil kepada teman - teman blog ini . semoga bermanfaat ..
