Selasa, 27 Januari 2009

Sexy Curls jQuery Plugin: Alternatif iklan bergaya Pagepeel


Sekitar 4 bulan yang lalu saya pernah mempopulerkan

iklan bergaya Pagepeel
yang ternyata 100% berhasil diaplikasikan pada platform blogger. Nah,
PagePeel yang baru kali ini atau kita sebut saja dengan
Sexy Curls
jQuery Plugin
sesuai dengan nama yang diberikan oleh si pembuat
kode Elliott Kember memang jauh berbeda dengan yang sebelumnya,
dimana
Sexy Curls
tidak hanya menggunakan standar Javascript tapi diperlukan
juga plugin jQuery
untuk bisa menjalankan aplikasi ini.








Contoh Sexy Curl bisa anda lihat di
agusramadhani.com 




Selain itu ada sedikit perbedaan saat anda mengarahkan mouse pada area
pagepeel, kalo yang dulu saat mouse diarahkan iklan secara otomatis akan
menggulung kebawah, sedangkan yang menggunakan Sexy curls kita harus
menarik iklan ini menggunakan mouse secara manual ditandai dengan pointers
Diagonal Resize.




Tutorial Cara Pasang (Installasi):




1. Download dulu file

Sexy Curls jQuery Plugin




2. Kemudian Extrack file hasil download .zip atau .rar di
folder anda.




3. Silahkan Edit File turn.js (menggunakan notepad
misalkan)




Note: dalam file
turn.js
inilah semua konfigurasi yang anda perlukan. Agar anda tidak
pusing tujuh keliling, saya sertakan saja contoh dari beberapa kemungkinan yang
perlu anda edit. Lihat code yang diedit dengan warna merah.




 // Set up the wrapper objects

var turn_hideme = $('<div id="turn_hideme">');

var turn_wrapper = $('<div id="turn_wrapper">');

var turn_object = $('<div id="turn_object">');

var img = $('<img id="turn_fold" src="http://www.domain.com/turn/'+
(options.




http://www.domain.com/turn/
hanya sebagai contoh saja, anda harus sesuaikan sendiri alamatnya.
Pastikan turn.js disimpan dalam folder
/turn




Sebenarnya masih banyak configurasi yang lain, selebihnya dibaca saja ya pada
manualnya.




4. Upload semua file yang ada kedalam folder (/turn/) ke hosting milik
anda (pages.google.com
atau geocities.com misalkan)




5. Langkah akhir lakukan pemanggilan javascript, atau dari pada puyeng langsung
copy paste aja kode dibawah ini. jangan lupa mengganti alamat url dibawah
ditandai dengan warna merah dibawah.




<script src='http://www.domain.com/turn/jquery1.3min.js'/>

<script src='
http://www.domain.com/turn/jqueryui.js'/>

<script src='
http://www.domain.com/turn/turn.js'/>

<link href='
http://www.domain.com/turn/turn.css'
rel='stylesheet'/>


<script type='text/javascript'>

$(document).ready(function(){

$(&#39;#target&#39;).fold();

});

</script>


<img id='target' src='http://www.domain.com/turn/turn/code.png'/>




Letakan kode diatas dibawah kode <head>, atau bisa juga diletakan diatas
kode <b:skin><![CDATA[

 


Yah mungkin segitu aja dulu, silahkan dicoba aja :)


Tidak ada komentar:

Poskan Komentar