Cara Membuat Thumbnail Gambar

Posted by Tips Trick Blogger Monday, April 11, 2011 0 comments

Kali ini saya akan terangkan cara membuat thumbnail gambar yang disertai dengan zoom efek. Sebenarnya cara ini kurang lebih sama dengan pembuatan efek zoom pada gambar, hanya saja yang ditampilkan berupa tulisan, dan ketika mouse anda diarahkan pada tulisan tersebut akan keluar gambar dengan ukuran yang dapat anda sesuaikan sendiri. Ok langsung saja kita bahas cara membuatnya. Ikuti langkah berikut ini.

Lihat Demonya

Klik Rancangan

Klik Edit HTML

Masukkan kode berikut di atas kode </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/blogonol-thumbnailviewer2.js"></script>

Selanjutnya Simpan Template
Kalau anda ingin memposting artikel masuk ke Edit HTML di bagian kanan atas samping compose

Masukkan kode berikut pada gambar yang ingin anda beri efek thumbnail

<a href="http://http://i1138.photobucket.com/albums/n524/blogonol/kucing6.jpg" rel="enlargeimage" rev="targetdiv:loadarea" title="kucing">kucing 1</a><br />
<a href="http://i1138.photobucket.com/albums/n524/blogonol/kucing8.jpg" rel="enlargeimage" rev="targetdiv:loadarea" title="kucing">kucing 2</a><br />
<div id="loadarea" style="width: 600px"></div>
<br /><br />
<a href="http://i1138.photobucket.com/albums/n524/blogonol/kucing1.jpg" rel="enlargeimage" rev="targetdiv:loadarea2,trigger:click,preload:none,fx:reveal">kucing 3 (click)</a><br />
<a href="http://i1138.photobucket.com/albums/n524/blogonol/kucing4.jpg" rel="enlargeimage" rev="targetdiv:loadarea2,trigger:click,preload:none,fx:none">kucing 4 (click)</a><br />
<div id="loadarea2"></div>

Silahkan ganti kode yang berwarna merah dengan alamat gambar dan judul gambar anda

Silahkan kode warna biru (besar tampilan gambar zoomnya) sesuai dengan keinginan anda
Script yang ada warna merah dapat anda jadikan widget, caranya klik Rancangan, Klik Tambah Gadget, Pilih HTML/JavaScript dan masukkan kode tersebut ke dalamnya.

Selanjutnya Simpan Template

Selamat mencoba dan sukses selalu

"keep spirits and do the best"

Adsense Content. bottom of article