Cara Membuat Page Peel Effect Di Blogger

Dadi Mulyadi | 2/08/2010 06:36:00 pm | 18komentar

Membuat Page Peel Effect atau halaman blog yang otomatis kelipat bila disorot bertujuan untuk menambah daya tarik pengunjung terhadap pernak-pernik yang berada di blog kita. Pasti teman-teman sudah banyak yang menemukan blog atau website yang memiliki efek halaman yang bisa melipat, atau biasa disebut dengan Page Peel Effect. Sebenarnya cara membuatnya tidaklah sulit, karena kita yang sekarang ini hanyalah sebagai pengguna atau pemakai. Lain halnya lagi bagi si penemu, bagaimana sulitnya si penemu mendesain ini semua? Sebelumnya terima kasih kepada sohtanaka.com, yang sudah membagi Blogger Tutorial page peel effect ini.

Bagi teman-teman yang tertarik untuk menampilkannya di blog teman-teman, silahkan untuk mengikuti langkah-langkah berikut:

1. Login ke Blogger

2. Klik Tata Letak

3. Klik Edit HTML

4. Jangan lupan untuk mencentang "Expand Template Widget"

5. Cari kode tag <b:skin><![CDATA[ lalu letakkan kode berikut di atasnya

<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>

6. Selanjutnya carilah kode tag ]]></b:skin> dan letakkan kode berikut 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://i671.photobucket.com/albums/vv80/dadfereneczi/Newspaper_Feed_add_128x128.png) no-repeat right top;
text-indent: -9999px;
}

7. Cari kode tag <body> lalu letakkan kode berikut di bawahnya

<div id='pageflip'>
<a href='http://feedburner.google.com/fb/a/mailverify?masterGOmaster' target='_blank'>
<img alt='' src='http://i671.photobucket.com/albums/vv80/dadfereneczi/Newspaper_Feed_add_128x128.png'/>
<span class='msg_block'/>
</a>
</div>

8. Simpan hasil kerjaan anda dengan mengklik tombol simpan template

SELESAI...

Bagi teman-teman yang ingin mengganti gambar dindingnya silahkan untuk mengubah URL: http://i671.photobucket.com/albums/vv80/dadfereneczi/Newspaper_Feed_add_128x128.png, lalu untuk mengubah alamat tujuan RSS menjadi alamat milik teman-teman, maka silahkan diganti URL:http://feedburner.google.com/fb/a/mailverify?masterGOmaster dengan URL FeedBurner atau RSS-nya teman-teman (atau alamat URL apa saja yang teman-teman inginkan).Semoga bermanfaat!
Share this article :

Promo Paket Hemat

TOKO SOFTWARE KOMPUTER ONLINE

Popular Posts

 
Support : Comments feeds | Facebook | Twitter
Copyright © 2013. Blog masterGOmaster - All Rights Reserved
Belanja Online di Toko masterGOmaster
Proudly powered by Blogger