Selasa, 04 Januari 2011

Cara Membuat Halaman Melipat Atau Page Peel


Dah sekitar 3 hari nggak ngeposting di Blog,dan sekarang saya bangkit lagi disini tentang Tutorial Blogger lagi.
saya pernah melihat Blog teman yang di pojok kanan atasnya ada Halaman yang bisa Melipat.Sehabis itu saya mau coba,pas udah di coba koq kelihatannya bagus tapi saya gak mamu memasang itu karena Blog saya udah terlalu banyak Konten.

Dari pada ilmu kebuang mendingan saya kasih tutorialnya keteman - teman semua bagi yang belum tahu sya kasih tutoruialnya Cara Membuat halaman Yang Bisa Melipat atau Page Peel.

Caranya seperti biasa kalian cuma Copy dan Pastekan saja.Caranya sebagai berikut:
  • Login ke Akun Blogger anda
  • Pilih Rancangan => Tata Letak => Edit HTML => Klik Expand Widget Template
  • lalu cari kode
<b:skin><![CDATA[
  • Dan letakan kode dibawah ini diatas kode tadi
<script src='http://ryoichikuga.googlecode.com/files/script_ditunjuk_ngelipet_ryoichikuga.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>
  • Kemudian cari kode seperti ini
]]></b:skin>
  • Dan letakan kode dibawah ini diatas kode tadi
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeI_MOTxWnDpqTuU_DgKaJSIv5_YzG2wpJFKE5rwNNie6JtYkds1V2CMosROiDcIJthV5ZkyXUMnM6tkJhKHuDdOOnUyScGGB2iFDjQx1SskTKlDOMzHFOUZSDUlikjWxCKgvVm4zmLQ/s144/berlangganan_kelipat.png) no-repeat right top;
text-indent: -9999px;
}
  • Kemudian cari lagi kode seperti ini
<body>
  • Dan letakan kode dibawah ini dibawah kode tadi
<div id='pageflip'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=Ryoichikuga' target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBOUmZk6DrgAGKzDdZTEN56VApngbhrihqPOsxWmTL3-NEe4n8SDIhgC8UtuKa4E3Vc5DxoTkL7qYr2FZKis8OJSJEzWc2ql4noUc5WwIbxnZxo91ixQfLJ4hXN7d_hgQ46OrjoFBv1w/s144/gambar_kelipat.png'/>
<span class='msg_block'/>
</a>
</div>
  •  Ganti tulisan yang berwarna Merah dengan Link terserah anda atau Berlangganan RSS

0 komentar:

Posting Komentar

Share My Blog

Twitter Delicious Facebook Digg Stumbleupon Favorites More