Kamis, 02 Juni 2011
Mungkin kalian sudah pasti mengerti tentang tentang jqueery apalagi kalau yang udah lama menjadi seorang blogger , nah tapi apa kalian tahu cara menambah efek jquery didalam gambar ,.Oke saya jelaskan tentang widget ini , Widget yang satu ini memang cukup sangat menarik karena jika kita menambahkan sebuah efek jquery didalam gambar maka efek yang terjadi akan merubah gambar menjadi lebih dekat , ya biasa disebut dengan meneropong gambar tersebut secara dekat.
okelah jika kalian ingin tahu seperti apa gambar yang sudah diberi efek jquery ,kalian boleh lihat
DISINI
Nah jika sudah lihat , kini saatnya saya memberi tahu kalian bagaiman cara membuat yang seperti itu.
1.Masuk di Blog kalian pilih design>edit html.
2. Setelah berada di menu edit Html maka kalian harus cari kode </head>
Note: gunakan F3 supaya lebih memudahkan pencarian.
3. Setelah menemukan kode </head> , copy paste kode dibawah ini sebelum kode </head>
<script src='http://vianjb.googlecode.com/files/zoom%202.js' type='text/javascript'/><script src='http://vianjb.googlecode.com/files/zoom%201.js' type='text/javascript'/>
Note: jika kalian sudah pernah memasukkan widget jquery di blog kalian , kalian bisa hapus kode yang berwarna merah diatas
4. Nah setelah meng copy paste kode diatas , kini selanjutnya adalah bagaimana caranya supaya kode tersebut bekerja , sebenarnya cuman simpel aja supaya kode tersebut memberikan efek pada gambar .
yang hanya dilakukan adalah memasukkan kode dibawah ini didalam gambar tersebut .
<div class="separator" style="clear: both; text-align: center;">
<a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2"
Kode tersebut cara memasukkannya adalah pada saat kita memposting artikel yang bergambar , buka menu edit html pada menu posting. Berikut ini contoh pemasukkannya kode tersebut didalam gambar.
Contoh pertama :
<div class="separator" style="clear: both; text-align: center;">
<a class="cloud-zoom" href="http://URL-GAMBAR-KALIAN/" rel="softFocus: true, position:'inside', smoothMove:2"><img src="http://URL-GAMBAR-KALIAN" /></a><a href="http://URL-BLOG-KALIAN"></a></div>
Itu dia contoh pertamanya , nah supaya lebih mudah kalian bisa copy kode contoh pertama tadi lalu taruh di folder pribadi kalian sendiri , ditakut kan kalian lupa nantinya.
Note : pada saat memasukkan kode jquery di dalam gambar hendaknya kalian perkecil gambar tersebut supaya lebih bagus efek yang akan keluar.
Berikut ini saya akan memperlihatkan dan menyempurnakan kode diatas serta saya akan memberi contoh supaya efek jquery akan terlihat sangat menarik.
Contoh Kedua :
<div class="separator" style="clear: both; text-align: center;">
<a class="cloud-zoom" href="http://vianjb.googlecode.com/files/dofollow.gif/" rel="softFocus: true, position:'inside', smoothMove:2" imageanchor="1"><img height="200" src="http://vianjb.googlecode.com/files/dofollow.gif" width="200" /></a><a href="http://vianjb.blogspot.com"></a></div>
Contoh saya harap kalian bisa agak mengerti dan kode diatas ini yang tadi saya masukkan di gambar pada blog pengetasan saya yang tadi kalian lihat .
cukup sekian untuk jquery ini.
TRAFIC SEARCH :
0 komentar:
Posting Komentar