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/AVvXsEhz-rgSy778cmxK2oePIjlqVawluoUgHslPTJ-ZTr7KfUvfcXQMF6W28mAfDZvWFzX_o3Wwtmuk_9rouRN4x64TAO01-4J4kMFX1Dk20F0mq7JXZicwj8-O0ngMvVR34h0oljzKrmQtvKqA/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/AVvXsEil4uWSrIXDwSeHJTAOxcD9pAhTV9zkk4rSBMO8MA3ybomGM_368g8hTdWI3e0xyDbpCwdVH0hryoXxu3Ro2CxDkMakW_ctiPpx7ICb2ZKuYglTJ7oX8Up515wgYESxZpTNspoINof9SM6-/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 komentar:
Catat Ulasan
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>
Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.
NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.
Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah