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(){
$('#target').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><
Tidak ada komentar:
Posting Komentar