[+] Post Title :
[+] Date : 3/25/2010
[+] Author : Oktri darmadi
[+] Link : http://tipsbelajar-blog.blogspot.com/2010/03/cara-membuat-efek-page-peel.html
[+] Type : No Type
Kali ini saya akan berbagi tips membuat efek page peel pada blog ,Apa itu page peel? Efek page peel adalah efek yang jika didekatkan mouse akan terlihat seperti halaman yang terbuka. berikut ini contoh efek peel:Cara Membuat efek Page Peel
[+] Date : 3/25/2010
[+] Author : Oktri darmadi
[+] Link : http://tipsbelajar-blog.blogspot.com/2010/03/cara-membuat-efek-page-peel.html
[+] Type : No Type
Efek page peel ini adalah buatan Soh Tanaka (www.sohtanaka.com). Lalu bagaimana cara membuatnya?? mudah sekali, hanya beberapa langkah saja.
Untuk membuat halaman blog teman-teman seperti di atas caranya gampang. Ikuti langkah2 berikut:
1. Login ke blogger >> Tata Letak >> Edit HTML >> Expand widget template
2. Cari kode
<b:skin><![CDATA
Letakan script code jQuery dibawah ini diatas kode <b:skin><![CDATA
<script src='http://sites.google.com/site/software2iqbalinc/javascript/script_ditunjuk_ngelipet_t4belajarblogger.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#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>
3. Lalu cari lagi kode
]]></b:skin>
Dan letakkan kode berikut tepat di atasnya:
#pageflip {
position: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(http://software2iqbal.files.wordpress.com/2009/11/berlangganan_kelipat.png) no-repeat right top;
text-indent: -9999px;
}
4. Cari kode
<body>
Dan lettakkan kode berikut di bawahnya:
<div id='pageflip'>
<a href='http://feeds.feedburner.com/oktridarmadi' target='_blank'>
<img alt='' src='http://software2iqbal.files.wordpress.com/2009/11/gambar_kelipat.png'/>
<span class='msg_block'/>
</a>
</div>
*Ganti yang berwarna Ijo dengan Link yang anda inginkan. Saran: Link RSS atau
link berlangganan.
5. Simpan hasil kerjaan anda.
Sekarang silahkan lihat blog anda, bagaimana....baguskan?
Untuk mengganti gambar dinding, teman-teman bisa mengganti URL berikut:
Untuk mengganti gambar dinding, teman-teman bisa mengganti URL berikut:
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(http://software2iqbal.files.wordpress.com/2009/11/berlangganan_kelipat.png) no-repeat right top;
text-indent: -9999px;
}
Semoga Bermanfaat []
Sumber Trik:[sohtanaka.com]
Anda sedang membaca sebuah artikel yang berjudul 
3 komentar:
di sohnata dot com tutorialnya khn tdk untuk diterapkan ditemplate blogger? bahkan ia menggunakn JQuery.
sobat malah menggunakan t4 hosting script dan image milik sobat blogger Iqbal (blognya http://t4belajarblogger.blogspot.com/)?
:)
terima kasih buat infonya, akan saya coba praktekan di blog saya di http://cristofel.blogspot.com. salam kenal dari nubie blogger..
kk gw suka bgt dengan yang nama nya matrix dan gw pengen bgt background blog gw efek matricx juga kk gmna sich buat nya tolong ajarin yachh
Posting Komentar