Saturday 7 August 2010

Page Peel Efek menggunakan jQuery & CSS

Page Peel Efek menggunakan jQuery & CSS- Sobat, tahukan apa maksud dari judul di atas ? Pasti banyak yang bingung kan . . . pertama saya juga bingung, tapi setelah saya pelajari baik-baik ternyata bisa, sukses besar.Akhirnya saya paham betul apa yang dimaaksud dengan judul di atas. Ini adalah salah satu pernak-perbik buatan, atau hasil karya Sohtanaka.com. Oh ya, artikel tentang Page Peel Efek menggunakan jQuery & CSS juga pernah dibahas olehMaster O-om. Jadi saya cuman na

Terbitkan Entri

pak tilas saja, hahahaha :)
Page Peel Efek menggunakan jQuery & CSS bisa Sobat kreasikan untuk dijadikan trik memasang iklan atau sebagainya, tapi pada tutorial kali ini saya mengikuti sumber aslinya saja dari Sohtanaka.com yaitu Page Peel Efek menggunakan jQuery & CSS yang berupa RSS.
Ricinya, Page Peel adalah effek seperti lengkungan kertas, jadi jika disorot cursos, secara otomatis akan membuka, seperti effek hover.

Yang masih bingung, seperti apa sih, Kalau mau preview gambarnya saja ,nih saya kasih,

Nah, langsung ke tutorialnya saja ,

Masuk ke blogger

Buka menu design/rancangan

Pilih Edit HTML,

Letakkan kode berikuti ini di atas kode <b:skin><![CDATA[(Gunakan Ctrl+F untuk mencari)

<script src=’http://code.jquery.com/jquery-latest.js’ type=’text/javascript’/>
<script type=’text/javascript’>
$(document).ready(function(){
//Page Flip on hover
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
</script>

Lalu letakkan kode berikut, di atas kode]]></b:skin>

#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://img222.imageshack.us/img222/9213/subscribe.png) no-repeat right top;
}

Lalu letakkan kode berikut ini di bawah kode <body>

<div id=’pageflip’>
<a href=’ALAMAT FEED Sobat’>
<img alt=’’ src=’http://img224.imageshack.us/img224/8315/pageflip.png’/>
<span class=’msg_block’/>
</a>
</div>
Note :

http://img222.imageshack.us/img222/9213/subscribe.pngadalah gambar bagian dalam (Setelah diklik) Sobat bisa ganti dengan gambar Sobat sendiri

ALAMAT FEED Sobatadalah alamat tujuan jika gamber tersebut diklik, Sobat bisa menggantinya dengan alamat FEED Sobat, atau apalah terserah. Silahkan kreasikan Sendiri :)

Page Peel Efek menggunakan jQuery & CSS 9 out of 10 based on 10 ratings. 9 user reviews.

♣||Click To POST_SHOW HIDE_Comments||♣

cElOTEh sObAT BLOGGER :

Ada 0 komentar ke “Page Peel Efek menggunakan jQuery & CSS”

:cendolbig :batabig :najis :marah :repost :2thumbup :matabelo :request :babyboy1 :sorry :travel :kimpoi :ultah :rate5 :bola :kbgt :iloveindonesia :nosara :berduka :hoax :dp :cekpm :thumbup :kr :nohope :ngacir :salahkamar :cool :mewek :babyboy :babygirl :95