INFORMASI
Bagi rekan - rekan yang sudah terlanjur memakai script dari vilat lines, silahkan ganti seluruh http://www.geocities.com/hans_anthonio dengan http://sites.google.com/site/aanbaesite dan ganti ekstension js dengan txt, contoh http://www.geocities.com/hans_anthonio/jquery-1.2.6.pack.js ganti dengan http://sites.google.com/site/aanbaesite/jquery-1.2.6.pack.txt
Mohon maaf jika contoh2 menu dan script dari vilat lines belum diubah link scriptnya, jadi jika anda melihat contohnya mungkin tidak bisa. Salam Blogger
Menu Memperbesar Gambar dengan klik mouse
Sudah cukup lama vilat lines tidak posting tips buat blogspot, nah kali ini kita akan membahas menu untuk image atau photo kita.
Kita sudah pernah membahas yang seperti ini yaitu dengan CSS dan HTML, tapi sepertinya kurang mantap hasilnya.
Menu ini agak mirip yaitu memperbesar gambar atau photo kita, tapi menu ini lebih menarik karena lebih halus dan gambarnya akan membesar hanya jika jika di klik. Biar gue nggak banyak bachot sebaiknya kita langsung saja cara membuatnya. Oh ya saya lupa biar tidak penasaran coba lihat contohnya disini ( 4 gambar dibawah).
1. Langkah pertama seperti biasa setelah login di blogspot, pilih tata letak lalu klik edit html dan dicentang expand template widget.
2. Pasang script berikut dibawah ]]></b:skin> atau diatas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/aanbaesite/perbesar.txt' type='text/javascript'> </script>
3. Klik simpan....lalu..
4. Pindah ke elemen halaman dan klik tambah gadget, setelah tampil kemudian pilih Html/Javascript dan masukkan kode seperti ini didalamnya...
<img style="width:200px; height:150px" src="http://i540.photobucket.com/albums/gg331/aanbae/subsidisponsorpasangan-1.jpg" class="magnify"/>5. Klik simpan lalu didrag (geser)dimana sobat ingin meletakkannya.
<img style="width:200px; height:150px" src="http://i540.photobucket.com/albums/gg331/aanbae/lotus.jpg" class="magnify"/>
<img style="width:200px; height:150px" src="http://i540.photobucket.com/albums/gg331/aanbae/grass-blades.jpg" class="magnify"/>
<img style="width:200px; height:150px" src="http://i540.photobucket.com/albums/gg331/aanbae/mojave.jpg" class="magnify"/>
Keterangan:
- Sobat harus upload dulu photonya misalnya photobucket, lagipula biar ringan lodingnya.
- Harus selalu didahului img style="width:200px; height:150px" karena selain biar rapih, kalau kita hanya menggunakan img border="0" maka gambar yang tampil sebelum diperbesar akan sesuai ukuran gambar kita dan jika diperbesar akan besar bangeeeet.
- So sesuaikan ukuran lebar dan tingginya (widthnya dan heightnya, 200px dan 150px)sesuai selera anda.
Salam Blogger...sobat..
00:19 | 0 Comments
Poskan Komentar
Silahkan berkomentar dan saling sharing