-->
Hate Copycat okayyyy :)
Boythelegend Tutor

Pages

  • Shin Chan Show And Doraemon Show
  • Link :)
  • Movie Online
  • Profile :>
Get This Wan Hazel Home Wan Hazel Profile Wan Hazel Banner Wan Hazel LINK Wan Hazel Facebook Get This.
WELCOME TO MY BLOG ! :)

12 Aug 2011

Membuat Effect Image Zoom Dengan Jquery

Assalamualaikum ,


Harini Afiq mau buat , tengok tajuk tu . tu la Afiq nak buat . Kalau korang tak tahu apa benda tu . tengok Pict DEMO bawah ni 




Kalau anda Click pada apa-apa gambar , ia akan keluar macam tu . Ada pahammmmm ?


Kalau korang nak TuTo ni . ikut step-step dekat bawah k .


Langkah 1


1. Dashboard > Design > Edit HTML 


2. Cari code ni . (CTRL + F) permudahkan pencarian .


]]></b:skin>


3. Dah jumpa ? kalau dah , Copy code bawah ni dan pastekan diatas  code ]]></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;
}

Langkah 2

1. Lepas tu , korang cari code (CTRL + F) permudahkan pencarian .

</head>


2. Dah jumpa ? kalau dah , copy code dibawah ni dan paste diatas code </head>



<script type='text/javascript' src='https://sites.google.com/site/jeritanblog/javascript/jquery.min.js'/>
<script type="text/javascript" src="https://sites.google.com/site/jeritanblog/javascript/imageZoom.min.js"/>
<script type="text/javascript">
jQuery(document.body).imageZoom();
</script>

Yang terakhir , Save template korang dan lihat hasilnya .

credit by Jeritan Blog





Thank you for reading :*

Stumble
Delicious
Technorati
Twitter
Digg
Facebook
Yahoo
Feed
Post Oleh Afiq' Bahari Pada 16:54
Labels: Tutorial

2 Ayat-Ayat Manis:

LyanaRhman said...

Menjadi :D
terima kasih ;D

17 August 2011 at 09:32 [Reply]
Afiq' Bahari said...

@liyanarahman Sama-Sama :)

17 August 2011 at 10:25 [Reply]

Post a Comment

Labels :)

  • Computer (1)
  • Contest (1)
  • Freebies (17)
  • Software Free Download (2)
  • Tutorial (126)

Click Untuk Tengok Episod-Episod Shin Chan dan Doraemon

Click Untuk Tengok Episod-Episod Shin Chan dan Doraemon

Click Gambar Untuk Main Game

Click Gambar Untuk Main Game

Click Gambar Untuk Mendengar Radio Online

Click Gambar Untuk Mendengar Radio Online

Click Untuk Menonton Movie Online

Ya Allah ya Tuhanku sesungguhnya aku memohon kepada Mu ilmu yang bermanfaat amalan yang diterima dan razeki yang baik Ya Allah ya Tuhanku sesungguhnya aku berlindung dengan Mu dari ilmu yang tidak bermanfaat hati yang tidak khusyuk doa yang tidak di makhbul dan amalan yang tidak diterima.

Picit Ni Untuk Banner TuTo Di Blog Anda


ShoutMix chat widget

Anda Suka Blog Ni ?

free counter free counter

Post Terkini

Tree Word Jom !

FOLLOW AND LIKE MY BLOG K .
Related Posts Plugin for WordPress, Blogger...
Credit To Afiq' Bahari. Powered by Blogger.