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.
Bagi sahabat TTB yang tertarik untuk menampilkannya di blog sobat, 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 sahabat TTB 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 sobat, maka silahkan diganti URL:http://feedburner.google.com/fb/a/mailverify?masterGOmaster dengan URL FeedBurner atau RSS-nya sobat (atau alamat URL apa saja yang teman-teman inginkan).
Semoga bermanfaat! (walau menurut aku agak lebay sih, hehehe :D ) Peace :D
Post a Comment