Trick n Tips Blogger | Widget Blogger | Template Blogger

Efek Zoom Dengan Jquery, Javascript, Dan CSS3

by Irsyad Aslam , at 5/09/2013 , has 0 komentar
Efek Zoom berguna sebagai membesarkan gambar yang terlihat kecil menjadi besar, Efek zoom ini sebelumnya sudah pernah saya bahas menggunakan CSS3.

Namun Pada Tutorial kali ini saya akan menjelaskan cara untuk membuat Efek Zoom dengan menggunakan Kode Jquery, Javascript, Dan CSS3.

Efek Zoom ini berguna sekali bagi anda yang mempunyai blog penjualan sehingga pengunjung lebih detail melihat produk anda. dan berguna untuk sebagai galeri baik foto, ataupun template. Efek ini muncul jika kursor diarahkan ke gambar. Untuk Membuatnya, Silahkan Ikuti langkah berikut ini :

  • Silahkan Masuk Ke Blogger Anda.
  • Setelah itu, Klik Menu Template, --> Simpan terlebih dahulu template Anda, --> Klik Tombol Edit HTML.
  • Cari Kode </head> dengan menekan CTRL+F.
  • Masukan Kode Plugins Jquery berikut diatas kode </head> :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>
  • Cari Kode </body> dengan menekan CTRL+F.
  • Setelah itu, Masukan Kode javascript berikut diatas kode </body> :
<script src='https://daftar-javascript-kami.googlecode.com/files/imgpreview.js' type='text/javascript'/>
  • Kemudian, Cari Kode ]]></b:skin> dengan menekan CTRL+F:
  • Masukan Kode CSS3 Berikut ini diatas kode ]]></b:skin> :
#preview{
position:absolute;
border:1px solid #ddd;
background:#eee;padding:5px;
display:none;color:#333;
}
  • Setelah itu, Klik Tombol Simpan Template.
  • Kemudian Jika ingin mengaktifkannya, Masukan Kode class="preview" dan title="Judul Atau Keterangan Gambar" Seperti Kode berikut :

<a class="preview" href="URL Blog Dari Gambar Anda" title="Judul atau keterangan Gambar Anda"><img alt="Keterangan Gambar" src="URL Gambar Anda" width="Lebar Dari Gambar" /></a>

Keterangan:
Ganti Kode Berwarna Merah dengan URL Blog dari Gambar Anda.
Ganti Kode Berwarna Kuning dengan Keterangan Atau Judul Gambar.
Ganti Kode Berwarna Hijau dengan Keterangan Gambar.
Ganti Kode Berwarna Biru dengan URL Gambar Anda.
  • Setelah itu, Klik Tombol Publikasikan.


Selamat Mencoba,
Salam Sukses,




Your-BelajarBLOG
Irsyad Aslam
About
Efek Zoom Dengan Jquery, Javascript, Dan CSS3 - written by Irsyad Aslam , published at 5/09/2013, categorized as Efek . And has 0 komentar
0 komentar Add a comment

Catatan:

• Dilarang Menaruh Link Aktif
• Dilarang Nyepan/Promosi Di Komentar
• Dilarang Berkata Tidak Sopan
• Untuk Menyisipkan Kode, Gunakan Tag <i rel="code">... KODE ...</i>
• Untuk Menyisipkan Kode Panjang, Gunakan Tag <i rel="pre">... KODE ...</i>
• Untuk Menyisipkan Catatan, Gunakan [catatan].. TEKS ...[/catatan]
• Untuk Menyisipkan Gambar, Gunakan [img]URL GAMBAR[/img]

Sebelum Menyisipkan Kode Harap Konversi Kode Sebelum Menuliskan Di Komentar

Bck
Cancel Reply

Followers

Komentar Terbaru

Copyright ©2013 Your-BelajarBLOG by
Theme designed by Damzaky - Published by Proyek-Template
Powered by Blogger