Membuat Zoom Gambar Pada Postingan Di Blogger

Niammuddin Mz Desember 29, 2014
Membuat Zoom Gambar Pada Postingan Di Blogger - baiklah kali ini kang niam ingin belajar blogging bersama teman-teman blogger semua kali ini kita kan belajar mempercantik blog kita yaitu membuat effect zoom pada gambar, manfaat dari tutorial ini dalah satunya adalah apabila kita membuat sebuah galley gambar dan mengadung banyak foto/gambar maka ruang yang butuhkan akan berkurang dan manfaat lainnya mungkin lebih keren aajah.

lihat demo gambar dibawah ini:


disini kita hanya menggunakan kode CSS saja ada juga yang menggunakan kode javascript, tapi kita pake kode CSS dulu kalau sempat entar saya pos yang dengan menggunakan javascript.

Langkah1
Masuk dasboard blogger > rancangan > edit HTML lalu cari kode seperti ini'
{code type=xml}
]]>
{/code}
Lalu letakkan kode ini diatasnya.
{code type=css}
/* Kode CSS Zoom gambar */
.thumbnail{position:relative;z-index:0;}
.thumbnail:hover{background-color:transparent;z-index:50;}
.thumbnail span{position:absolute;left:-1000px;visibility:hidden;color: black;text-decoration: none;}
.thumbnail span img{border-width:0;padding:2px;}
.thumbnail:hover span {visibility: visible; top: 0; left: 60px;}
{/code}

Langkah2
Setelah itu save template sobat.

Langkah3
sekarang panggil atau supaya zoom gambar berfungsi silahkan gunakan kode seperti dibawah ini pada postingan sobat.
{code type=html}

{/code}

sesuaikan ukuran width dan height lebar dan panjang hasil zoom pada kode CSS diatas, disini secara default width 400px dan height 472px

semoga berhasil yah dan selamat mencoba saja.

1 komentar :

Reader's Comments