Sexy Curls Jquery Plugin: Alternatif Iklan Bergaya Pagepeel
Sekitar 4 bulan yang kemudian saya pernah mempopulerkan iklan bergaya Pagepeel yang ternyata 100% berhasil diaplikasikan pada platform blogger. Nah, PagePeel yang gres kali ini atau kita sebut saja dengan Sexy Curls jQuery Plugin sesuai dengan nama yang diberikan oleh si pembuat arahan Elliott Kember memang jauh berbeda dengan yang sebelumnya, dimana Sexy Curls tidak hanya memakai standar Javascript tapi diharapkan juga plugin jQuery untuk dapat menjalankan aplikasi ini.
Contoh Sexy Curl dapat anda lihat di agusramadhani.com
Selain itu ada sedikit perbedaan dikala anda mengarahkan mouse pada area pagepeel, kalo yang dulu dikala mouse diarahkan iklan secara otomatis akan menggulung kebawah, sedangkan yang memakai Sexy curls kita harus menarik iklan ini memakai 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 pola 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 pola 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 tamat lakukan pemanggilan javascript, atau dari pada puyeng eksklusif copy paste aja arahan 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 arahan diatas dibawah arahan <head>, atau dapat juga diletakan diatas arahan <b:skin><![CDATA[
Yah mungkin segitu aja dulu, silahkan dicoba aja :)
Belum ada Komentar untuk "Sexy Curls Jquery Plugin: Alternatif Iklan Bergaya Pagepeel"
Posting Komentar