Page Peel yaitu efek diujung kanan atas blog atau website yang melengkung seperti kertas ketika mouse kamu berada tepat diatasnya. Efek ini seringkali digunakan untuk menarik perhatian para pengunjung blog untuk mengklik gambar iklan atau pun E-Mail berlangganan dibalik lekungan kertas halaman blognya.
Hmmm... Menarik bukan???
Langsung saja untuk mengetahui Cara Membuat Page Peel diBlogspot ( Cara membuat halaman blog melipat ).
1. Login ke akun blog Anda
2. Masuk ke tata letak dan klik edit HTML
3. Centang pada Expand Template Widget
4. Cari kode ini:
2. Masuk ke tata letak dan klik edit HTML
3. Centang pada Expand Template Widget
4. Cari kode ini:
<b:skin><![CDATA[
( Untuk Lebih Mudahnya Tekan CTRL+F Untuk Mencarinya )
( Untuk Lebih Mudahnya Tekan CTRL+F Untuk Mencarinya )
5. Copy script dibawah ini lalu letakan diatas kode tadi
<script src='http://dedehendriono.googlepages.com/jquery-latest.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>
<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. Cari kode ini (Tekan CTRL+F)
]]></b:skin>
7. Letakan kode dibawah ini tepat 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(http://dedehendriono.googlepages.com/subscribe.png) no-repeat right top;
text-indent: -9999px;
}
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://dedehendriono.googlepages.com/subscribe.png) no-repeat right top;
text-indent: -9999px;
}
8. Cari kode ini
<body>
9. Letakan kode dibawah ini tepat dibawah kode tadi
<div id='pageflip'>
<a href='http://bagong-kewez.blogspot.com/' target='_blank'>
<img alt='' src='http://dedehendriono.googlepages.com/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>
<a href='http://bagong-kewez.blogspot.com/' target='_blank'>
<img alt='' src='http://dedehendriono.googlepages.com/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>
Catatan : Yang berwarna Merah Anda bisa menggantinya . yang bertujuan untuk mengarahkan pengunjung Anda.
Sekian Turorial Blog dari BagongKewez .
Terima Kasih telah membaca Artikel ini dan semoga Artikel ini bermanfaat untuk anda .
Jangan lupa comend yah :D
Bijaklah dalam berkomentar
EmoticonEmoticon