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/AVvXsEg5MTK-Z7ofkLKDbbL9TMsFeV_Cx0PlJNSwtzyNJue6gbvy3ElQIEmkKRowZr6KBY5zrmfGDgS1MtylKPESYTRuiuh9rtvtjZ5EFdbYo73QeLnQOVeP_SOoI-BPe4xWZJYver3F1ZTu5XuB/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/AVvXsEiwSAPgVfHkKWvAtvDLbg7Jdhi4DjQh0AYuuunVSICoXWkRssQPQTurTHF3tfkLoaah4d0prLya951tpqw_PCiULjN0xV7acoVsIwY44VGT1eyFwCuLA6wPuicQL9MdFr40YtM-5JSZeErm/s1600/page_flip.png'/></a>
<div class='msg_block'></div>
</div>
5. Save template dan lihat hasilnya.
Selamat mencoba!
Sumber : http://taratas.blogspot.com/
Sobat Blogger sedang berada di halaman Cara Membuat Efek Lipatan Kertas Di pojok Blog dan Sedang membaca artikel Cara Membuat Efek Lipatan Kertas Di pojok Blog ini dengan url https://arafcreativity.blogspot.com/2012/08/cara-membuat-efek-lipatan-kertas-di.html. Dan Sobat Blogger juga boleh COPAS artikel Cara Membuat Efek Lipatan Kertas Di pojok Blog ini jika bermanfaat dan jangan lupa untuk meletakkan link Cara Membuat Efek Lipatan Kertas Di pojok Blog sebagai sumbernya.
0 komentar:
Posting Komentar