Iklan 300 x 250

Random Post

Recent Post

 

Memasang Efek jQuery Image Zoom

Text Resizer: Click for Resizer
Huuuuuhhh udah lama aku ingin memasang postingan ini,memang sih aku sekarang disibukkan oleh perkuliahan tapi itu tak membuatku untuk berhenti menulis Blog.Pada kesempatan kali ini aku akan menjelaskan kepada teman-teman tentang bagaimana memasang image zoom pada gambar tutorial ini saya peroleh dari http://modification-blog.blogspot.com/ tutorial kali ini sebenarnya sudah umum kuq tapi tak apalah sebagai refrensi teman-teman aja,bagi yang belum tahu tentang tutorial ini


Ketika pembaca blog melakukan klik (klik kiri atau klik kanan) pada suatu gambar pada blog kita, maka gambar akan ditampilkan tetap pada halaman tersebut dengan efek membesar (zoom-in) yang lembut. Dan jika di klik tombol [X] Close atau menekan tombol Esc pada keyboard maka gambar akan di sembunyikan (zoom-out) dengan efek mengecil yang lembut. Tapi ini berlaku untuk semua gambar yang ada di blog kita tanpa terkecuali.Oh ya langsung aja yach tutorialnya


  • Seperti biasa log in dulu ke blogger anda

  • Masuk ke Rancangan - Edit HTML

  • Cari Kode Beriku Ini : ]]></b:skin>

  • Setelah ketemu masukkan kode CSS dibawah ini Sebelum kode ]]></b:skin>

div.jquery-image-zoom {
line-height: 0;
font-size: 0;
z-index: 10;
border: 5px solid #fff;
margin: -5px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
div.jquery-image-zoom a {
background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat;
display: block;
width: 25px;
height: 25px;
position: absolute;
left: -17px;
top: -17px;
/* IE-users are prolly used to close-link in right-hand corner */
*left: auto;
*right: -17px;
text-decoration: none;
text-indent: -100000px;
outline: 0;
z-index: 11;
}
div.jquery-image-zoom a:hover {
background-position: left -25px;
}
div.jquery-image-zoom img,
div.jquery-image-zoom embed,
div.jquery-image-zoom object,
div.jquery-image-zoom div {
width: 100%;
height: 100%;
margin: 0;
}

  • Masih belum selesai setelah itu cari kode berikut </head>
  • Setelah ketemu masukkan kode berikut diatasnya.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script type="text/javascript" src="http://imagezoomnobi.googlecode.com/files/jquery.imageZoom.min.js"/>
<script type="text/javascript">
jQuery(document.body).imageZoom();
</script>


  • Klik Simpan Selesai Semoga bermanfaat

NB :  Untuk pemasangan Jquery warna hijau jika anda sudah memasangnya di template anda, maka J-query tersebut tidak usah dipasang.


Artikel Terkait:

Nobi Noku Ditulis oleh : Arga Anggriawan | BLOG : This Is My Art
Dalam Judul : Memasang Efek jQuery Image Zoom
Dalam Kategori :
Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.

5 komentar:

mas, gimana kalo udah ada script jquery sebelumnya ??
tolong pencerahannya

Thanks

simple aja...kalo sebelumya script jquery nya sudah terpasang maka anda tidak perlu mememasangnya lagi.... semoga membantu :q:

Thx tutorialnya.. sudah dipake.. ^^

bdangkal mengatakan... Reply Comment

keren euy iformasinya thx :q:

gan ane ada masalah sama jquery show imagenya, tuh kenapa show imagenya ketimpa sama dropdown menu aq ya???

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: :q: :r: :s: :t: :u: :v: :w: :x: :y: :z:

Posting Komentar

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda.Blog ini Blog Do Follow,Trims atas kerja samanya

 
 
 

Temukan Kami Dalam FB

Sahabat Blogger

http://nobinoku.blogspot.com/

Tukeran Link Yuk..!! Silahkan copy kode di atas..!!
Saya akan segera link balik..!! Link & Banner Teman
powered by PRBbutton Powered by  MyPagerank.Net backlink Site Meter http://www.wikio.com Free Automatic Backlink
Check Google Page Rank
Cerita Seks Panas Dewasa 17Tahun
free counters
 
Copyright 2010 - 2011 © This Is My Art | Didukung Oleh : Blogger
Template Name : Evolution Magazine Template | Modification by : Argabluesky