1. Cara membuatnya : Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :
margin-right:45px;
}
4. Simpan kode berikut diatas kode </head> :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://kangdadang.googlecode.com/files/imagewarp.js">
/***********************************************
* jQuery imageWarp script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('img.people').imageWarp({warpfactor:2}) //apply warp effect to images with CSS class "imagewarp"
$('img.imagewarp').imageWarp() //apply warp effect to images with CSS class "imagewarp"
})
</script>
5. Simpan template
6. Cara pemanggilannya pada html :
Non hyperlinked images, warp factor=2.5, duration=1 second:
<p align="left">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh086ZDcdeDa7nonCETnLLq0QJm-urFK3tnuko9yf0cY_DnjbBwXgduiUIHubDzKuLfRqBSVcysgBjnfjf4gVtRfTMd9gV7KP0br-wI9XtGl11TQAZrlIJwuW6wfyZKY6nryVJUX6Iwlqw/s1600/PE02054A.gif" width="74" height="100" class="people" />
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuiz294nJBpVLgz9dhi1VTQC-hKt8xs1gBZG02Eo8Z3r6il6YNiEJeg_nsfEOFZpKTS-tq-8re7DzyCffxHgHm55Ld_YYcDR3tVS8FvV9v9ZLuEM4oxc96gi7i61pOFMTD_aZL0_7_RZg/s1600/PE01805A.gif" width="100" height="94" class="people" />
</p>
Non hyperlinked images (except last one), warp
factor=1.5, duration=1 second:
<p align="left">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim7yr_NUrhTyfyNM3bL9UY2ENo96xy7pP1mILH8lbJKMaTBVWHo-XZ5LsVYoa90idXV584vyDQQalclYpZrJeKq_GAc1As8iA9wwc0H1ywXZWBqJHzMbSCunH14bWbrjPek3jEXX85svE/s1600/pool.jpg" width="250" height="180" class="imagewarp" />
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFb4_H4DhEJ-Tm0BMV0L2Lfpa-gD4dNPKjJMgCa7-SZ6KDSeG2nBwvqfxIDUQOtQOxZtgabtXdlsBIPwRdsEMGdYCK9BababfdSb7mxGsj0aruvYwLK0VaEerXVwFkfbIaQ-J5CVJ7YbQ/s1600/cave.jpg" width="250" height="180" class="imagewarp" />
</p>
Selamat Mencoba...
0 komentar :
Posting Komentar