Sexy Curls jQuery Plugin: Alternatif iklan bergaya Pagepeel Di Blogger
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>
$(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><![CDATA[
Yah mungkin segitu aja dulu, silahkan dicoba aja :)
Posting Komentar