Mungkin sobat blogger sudah sering melihat efek lipatan kertas ketika sedang menjelajah website ataupun blogwalking, namun masih bingung tentang cara pemasangannya di blog... nah kebetulan jika ya berarti sobat telah mendarat dengan tepat karena pada postingan artikel ini akan membahas cara pemasangan efek lipatan kertas untuk digunakan di blog. Oke sob jika tertarik untuk mencoba memasang efek lipatan kertas ini monggo disimak tutorialnya...
Contoh :
Cara Pemasangan :
- Login ke
blog sobat... - Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.
- Cari kode ]]></b:skin> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode ]]></b:skin> tersebut.#pageflip {
position: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(http://lh3.googleusercontent.com/-BFy8oqoYLgM/T048MJSYmpI/AAAAAAAABO0/RHVBBWIoeSY/s288/Facebook-logo.png)
no-repeat right top;
text-indent: -9999px;
}
- Keterangan :- Kode yang berwarna biru merupakan URL Link Gambar.
- Cari kode </Head> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode </Head> tersebut.<script src='http://monozcore-project.googlecode.com/files/script%20page%20peel.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#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> - Cari kode <Body> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di bawah kode <Body> tersebut.<div id='pageflip'>
<a href='http://facebook.com' target='_blank'>
<img alt='' src='http://lh4.googleusercontent.com/-E4pceRFNDIE/T047Qpmfo5I/AAAAAAAABOs/2QTA5duAUg0/s800/sc-page-peel.png'/>
<span class='msg_block'/>
</a>
</div>
- Keterangan :- Kode yang berwarna merah merupakan URL Link yang akan dituju.
- Kode yang berwarna biru merupakan URL Link gambar kertas.
- Klik "Save" dan lihat hasilnya...
Mantap gan
ReplyDelete