Wednesday, February 20, 2013
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>
<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/AVvXsEgcvUjgU2k8_5LPs1TvYOLUC1Xe-KaI70i_WOsp58vPnt5ikLXn6SnjKbtAjPsoT_t16xzr8yrfk-1nsSY73ASlrUa6p-HRhQGFLmg8mp2sDJHZBQDts8Vj_SVDe3UeenbKb_2iuJR4pxo8/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 !!!
* Ganti tulisan warna biru dengan link gambar anda
4. Letakkan kode di bawah ini setelah kode <body>
<div id='pageflip'>
<a href='sekedarsharin9.blogspot.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5aDpvjQ1p5eod6wglHd5SIxS1P_rhjaqbzMd9UBtAnEPH08kneYPKnUWY6OQzMKv4Qt986Ntk720ItJKrbBVgRqpa3Mwv9pYGgy_780EIV453MjOC8MjJwMhnKL66YvBbVPnvkLkUFraT/s1600/page_flip.png'/></a>
<div class='msg_block'></div>
</div>
5. Save template dan lihat hasilnya.
Selamat mencoba!
Sumber : http://taratas.blogspot.com/
0 comments:
Post a Comment