Cara Membuat Menu Zoom Image

Menu zoom image adalah menu yang jika kursor berada tepat di atas photo yang dijadikan thumbnail atau anchor ke halaman yang lain berganti unkuran menjadi lebih besar. Photo yang sedianya lebih kecil jadi besar ketika kursor berada tepat diatas photo. Ini merupakan variasi menu yang menggunakan kode CSS tanpa bantuan kode Javascript. Dengan menggunakan menu zoom image (memperbesar gambar) maka seolah menu yang bermain untuk menarik pengunjung mengklik link tersebut.


Menu ini sangat bagus, tapi cara membuatnya sangat mudah. Mudah karena tidak membutuhkan kode yang rumit dan panjang. Simpel dan tepat guna. Contohnya seperti menu zoom image di bawah ini:

Jika ingin menggunakannya ke dalam blog, berikut ini adalah caranya:

Langkah-Langkah Membuat Menu Zoom Image Ke Dalam Blog

Pertama, login ke blog lalu >> Element Halaman >> Edit HTML. Untuk lebih aman, save dulu template anda. Cari kode /skin, lalu kopi paste kode di bawah ini kedalam CSS blog anda sebelum kode /skin.

.kelinci {text-align:center;}
.kangkung {background:#fff; height:100px; display:inline-block;}
.kangkung a {display:block; float:left; width:50px; height:50px; padding:25px 5px 0 5px;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
.kangkung img {width:100%; display:block; border:0;}
.kangkung a:hover {width:100px; padding-top:0;}

Kemudian klik preview, jika tidak ada warning eror maka save template anda.


Kedua, Atur Kode HTMLnya. Klik Element Halaman >> Add Widget Html. dan paste kode berikut keposisi mana yang anda inginkan. Kodenya adalah:

<div class="kelinci">
<div class="kangkung">
<a href="/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHJxMeKgeBXm6Mgxvyf54fr_lP2ByCfjT6-EfwMXQ-dLsCnn9dApVOuiXw2x2RTmmxzveEzFUMt7Cwp1OAnNhxs5aAGIk8WGGdhX51SFUNQBWKMFNJ5yoKkea6HH-Bfc7N6E2qtf33NQg/s400/one.png" alt=""></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAfk_HSiGJ2T0zTGOIAL010yOxGujvBAfZpKhiEmwgzsbuiDA13VMBQHUnbeXsfn8RlbeNYspO9az24l5nnZmdT4zLjtMqTbwYtdUo2XU1QGe2nbULNcWKEdhL3Yle99UPLlNJ2HOSOVA/s400/two.png" alt=""></a>

<a href="/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXml6gB3K4JvXWoNDkJ7DfQAVZPhlMmk0cseLtz5IByE-WNnSScRoNogEoxbP1EZJVqTIE3-gHTeAf8YZrKeKC2XJZenRSc3WzCLeRdyAZhs6uFLAewG3wsmCiig3pFPsvkjeOdI8xd3g/s400/three.png" alt=""></a>
<a href="/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2qeyKAOeZ-ML4tr107g2Y0ZH7urFV3uuP5PB73_tr7Ao1Qvdzdlssagm0QCDePymFhVJ-mPjLrX7ufHzrLDvB3NKqdqvtdaw2URboVnSAT0Mig1BKdF91sWwJauEGKYGWJixpgm_cawU/s400/four.png" alt=""></a>
<a href="/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjg9ARiBUy8Yb8hVNUwIHGZaWFmv_YG27Pvd04Zllmp5MQLGa55o9jwFB17ZQs-JaOmj694Kwgix3l754SClqu05BKYInWr44aPbiq0fLnnUrQNof35ICGOxhtUUOd1qKcTWiLCEHc78w/s400/five.png" alt=""></a>
<a href="/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjki5MNE2qaXz_ZJYOzTcZpLvdlBnEs8X03FVpK3WvGpxh9gYcarNa4eskMkJfFco7PS_njRHuuKqiQgdjtZaSQqmfzJtZSD0oaEnqJ1gKPVJo1Jkp4y5YNiRmimx8NnGLZSX5_sKMQ4e0/s400/six.png" alt=""></a>
<a href="/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3NrliXyXDczYptWgseW3qMTpJYaMq39HslU6TKzlXF2nKSfb4Txcxodc54ElHJgnQX3dyypNbbKfDBAIhzpT0YKo6nqOYM_At8-PRVzaSX1yKcDS9_ZtR-VBzNOjPrX40dWgJQ2gCNHo/s400/seven.png" alt=""></a>
<a href="/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidPWKNSzqMQDvqaa3WxNY_O8KhfNStqt8j9vVs9ZJQt4w_8tgjCtv8i3ztbgjNMG7XaH-bidaHA90okqUIu8ZsxA_mzVdci9bu0Qa7aaWGn1Ppz9L-Ve6x8-qpDTQqgMlGaryWJUb5ub4/s400/eight.png" alt=""></a>
</div>
</div>

Save Html anda dan lihat hasilnya. Kini anda hanya perlu mengganti link dengan link anda sendiri dan mengganti foto sesuai link yang akan di arahkan. Itu saja. That Simple...

Selamat mencoba..

Post title : Cara Membuat Menu Zoom Image
URL post : https://adanggak.blogspot.com/2011/04/cara-membuat-menu-zoom-image.html