Sabtu, 31 Agustus 2013
Sekedar Sharing - 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>
* Ganti tulisan warna biru dengan link gambar anda
4. Letakkan kode di bawah ini setelah kode <body>
5. Save template dan lihat hasilnya.
Selamat mencoba!
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/AVvXsEiDRM0ewBynmuaDqAZGQdy2mg5a60bgufp4JBMrfXi60dIeMbl1YnbWf_bKmR80OycO54R-XaydVW7Ouity0yZYdSC2YzWfGXlGtpxXZUKi4Itt7bNKSy0TvOgfvZ1pCaGZMWmnj3f5w4en/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>
Perhatian !!!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/AVvXsEiDRM0ewBynmuaDqAZGQdy2mg5a60bgufp4JBMrfXi60dIeMbl1YnbWf_bKmR80OycO54R-XaydVW7Ouity0yZYdSC2YzWfGXlGtpxXZUKi4Itt7bNKSy0TvOgfvZ1pCaGZMWmnj3f5w4en/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>
* Ganti tulisan warna biru dengan link gambar anda
4. Letakkan kode di bawah ini setelah kode <body>
<div id='pageflip'>
<a href='http://sekedarsharing2.blogspot.com/'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOhjZUuxn6AHjwWiqel37VPNRpAecyI93KiZ0OG7CLDu4fq3miZSfDo2IR_IVRauw-qyw48JpQVE5ia8AV2-h1PUtQS2650lPvC51fhqbclyDMdjIMKg2QaE9hne7D1lDfyG44sRzhOPxd/s1600/page_flip.png'/></a>
<div class='msg_block'></div>
</div>
<a href='http://sekedarsharing2.blogspot.com/'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOhjZUuxn6AHjwWiqel37VPNRpAecyI93KiZ0OG7CLDu4fq3miZSfDo2IR_IVRauw-qyw48JpQVE5ia8AV2-h1PUtQS2650lPvC51fhqbclyDMdjIMKg2QaE9hne7D1lDfyG44sRzhOPxd/s1600/page_flip.png'/></a>
<div class='msg_block'></div>
</div>
5. Save template dan lihat hasilnya.
Selamat mencoba!
