Salah satu cara untuk membuat halaman blog menjadi cantik adalah dengan memberikan efek lipatan kertas yang biasanya berada di pojok halaman. Efek lipatan kertas seperti ini dikenal juga dengan nama Page Peel atau Page Flip. Membuat efek Page Peel pada blogspot sangat mudah. Berikut ini cara membuat efek tersebut sebagaimana dijelaskan oleh drraman:
1. Login ke blogspot
2. Masuk ke dashboard > Design > Edit HTML.
3. Letakkan kode di bawah ini sebelum kode </head>
Untuk gambar, bisa diganti dengan link gambar milik Anda.
4. Letakkan kode di bawah ini setelah kode <body>
5. Save template dan lihat hasilnya.
Selamat mencoba!
Catatan:
1. Sebaiknya backup template dulu sebelum melakukan perubahan pada template.
2. Link yang dicetak tebal dapat diganti dengan link milik Anda.
Sumber: Blogger Help
1. Login ke blogspot
2. Masuk ke dashboard > Design > Edit HTML.
3. Letakkan kode di bawah ini sebelum kode </head>
<style type="text/css">
img { behavior: url(iepngfix.htc) }
#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWknUdi76PAgcBsTkk9S6zZA-DLySDdVL4hb0MYKUmjp5281nxSOdnxubXkTAJVunO54Ck_Bh46ED39vAs10SXCj4iTpPNMtLBYnHvwRQba6fFaHMxjV5ckZ9tGMQ0_8A_ksmRVzIV3WsB/s1600/page+peel.JPG) no-repeat right top;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#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>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWknUdi76PAgcBsTkk9S6zZA-DLySDdVL4hb0MYKUmjp5281nxSOdnxubXkTAJVunO54Ck_Bh46ED39vAs10SXCj4iTpPNMtLBYnHvwRQba6fFaHMxjV5ckZ9tGMQ0_8A_ksmRVzIV3WsB/s1600/page+peel.JPG) no-repeat right top;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#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>
Untuk gambar, bisa diganti dengan link gambar milik Anda.
4. Letakkan kode di bawah ini setelah kode <body>
<div id='pageflip'>
<a href='http://contoh-blog.blogspot.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkJzN6v4ulS15foVePrO33WmtLhrkNlgHZhl4ufL-Y_A1C9nA1yaK3g-RfdDquzTmfZEKy4HCX_8nAdiW34zrWxgB2hwXitsOTO7mGd5jL0AsiIu_h6oLoWS53WD8n3BFPPUazWHBxi3gv/s1600/page_flip.png'/></a>
<div class='msg_block'></div>
</div>
<a href='http://contoh-blog.blogspot.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkJzN6v4ulS15foVePrO33WmtLhrkNlgHZhl4ufL-Y_A1C9nA1yaK3g-RfdDquzTmfZEKy4HCX_8nAdiW34zrWxgB2hwXitsOTO7mGd5jL0AsiIu_h6oLoWS53WD8n3BFPPUazWHBxi3gv/s1600/page_flip.png'/></a>
<div class='msg_block'></div>
</div>
5. Save template dan lihat hasilnya.
Selamat mencoba!
Catatan:
1. Sebaiknya backup template dulu sebelum melakukan perubahan pada template.
2. Link yang dicetak tebal dapat diganti dengan link milik Anda.
Sumber: Blogger Help
2 comments:
gan, punya gambar page peel lain gak??
kunjung balik ya!!!
@irvansyaidussalam.blogspot.com: kebetulan tidak punya nih... maaf ya gan... mungkin lain kali di kirim hehehe...
Posting Komentar