Cara membuat Halaman yang Bisa Ngelipat/Page Peel Effect
Suatu ketika lagi
ngenet tiba-tiba menemukan suatu web yang unik tampilan halamannya. Uniknya tuh
kalau kita mengarahkan kursor mouse kita di bagian pojok kanan atas halaman web
tersebut, maka halaman tersebut akan kelipat atau kebuka, namun hanya sebagian
kecil saja dan di dalamnya terdapat gambar (disesuaikan) yang biasanya kalau
diklik akan diarahkan ke suatu halaman lain seperti halaman RSS blog ataupun
bisa berupa halaman lainnya.
Teman-teman juga bisa
menemukannya di blog ini. Yang seperti ini lho..!! Jika sobat ingin tampilan blognya seperti ini silahkan ikuti langkahnya di bawah ini :
UPDATE...
Untuk membuat halaman blog
teman-teman seperti di atas caranya gampang. Ikuti langkah2 berikut:
1. Login ke blogger >>
Tata Letak >> Edit HTML >> Expand widget template
2. Cari
kode <b:skin><![CDATA[
Ingan letakkan kode berikut di atasnya:
<script src='http://sites.google.com/site/software2iqbalinc/javascript/script_ditunjuk_ngelipet_t4belajarblogger.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>
<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>
]]></b:skin> |
Dan letakkan kode berikut tepat di atasnya:
4. Cari kode
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6fFId6ZIVxFzKT3DgIHRoPLMTP8zETSiYDgfuU_dHsUDL26cQHfVXaez3-MgV5gt7P1AyjXwDRUnAR_wz5mPB2upZpRjxBprlsQwSUhEH-g87AgI6mVLxIHg6hE1QrLVsZRCvsjxE2nFA/) no-repeat right top;
text-indent: -9999px;
}
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6fFId6ZIVxFzKT3DgIHRoPLMTP8zETSiYDgfuU_dHsUDL26cQHfVXaez3-MgV5gt7P1AyjXwDRUnAR_wz5mPB2upZpRjxBprlsQwSUhEH-g87AgI6mVLxIHg6hE1QrLVsZRCvsjxE2nFA/) no-repeat right top;
text-indent: -9999px;
}
<body> |
Dan lettakkan kode berikut di bawahnya:
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6fFId6ZIVxFzKT3DgIHRoPLMTP8zETSiYDgfuU_dHsUDL26cQHfVXaez3-MgV5gt7P1AyjXwDRUnAR_wz5mPB2upZpRjxBprlsQwSUhEH-g87AgI6mVLxIHg6hE1QrLVsZRCvsjxE2nFA/) no-repeat right top;
text-indent: -9999px;
}
<div id='pageflip'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=tutorialbloggingdiblogger' target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjazUVUxiQRqnGkqOnJcH_4YriIGtIlcf27szSrWLO9hyphenhyphenNGX3oX_7llTpekUJ9dgfHoZhRPVjf-PoQ_JO3uMh5AxYT2l8Aa2HPuOtxmMby8DmSG7mGkLI_8fxMyhQDLpcC6FaoA5cHtd2RY/'/>
<span class='msg_block'/>
</a>
</div>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=tutorialbloggingdiblogger' target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjazUVUxiQRqnGkqOnJcH_4YriIGtIlcf27szSrWLO9hyphenhyphenNGX3oX_7llTpekUJ9dgfHoZhRPVjf-PoQ_JO3uMh5AxYT2l8Aa2HPuOtxmMby8DmSG7mGkLI_8fxMyhQDLpcC6FaoA5cHtd2RY/'/>
<span class='msg_block'/>
</a>
</div>
*Ganti yang
berwarna Ijo dengan Link yang anda inginkan. Saran: Link RSS atau Link Berlangganan.
5. Simpan hasil kerjaan anda.
5. Simpan hasil kerjaan anda.
Sekarang silahkan lihat blog anda, bagaimana....baguskan ? Untuk mengganti gambar dinding, teman-teman bisa mengganti
URL berikut:
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6fFId6ZIVxFzKT3DgIHRoPLMTP8zETSiYDgfuU_dHsUDL26cQHfVXaez3-MgV5gt7P1AyjXwDRUnAR_wz5mPB2upZpRjxBprlsQwSUhEH-g87AgI6mVLxIHg6hE1QrLVsZRCvsjxE2nFA/) no-repeat right top;
text-indent: -9999px;
}
Posting Komentar untuk "Cara membuat Halaman yang Bisa Ngelipat/Page Peel Effect"