ok Mat,, kali ini saya akan memberi Panduan Cara Membuat Efek Lipatan Pada Halaman di Blog. Panduan saya ini saya khususkan untuk para blogger pemula. Efek lipatan pada halaman di blog
disebut juga "Page Peel Effect". Sebenarnya fungsi dari pembuatan efek lipatan ini hanya untuk membuat tampilan blog tersebut lebih unik dibanding blog lainnya. Dalam perkembangannya, efek lipatan ini dirasa sangat menarik. Sehingga efek lipatan ini banyak dipakai oleh blogger. Perlu diketahui, uniknya dari efek lipatan ini kalau sobat mengarahkan kursor mouse sobat 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. ok".. Mat langsung ajah ke pemanduhannya :
- Login ke Blogger
- Klik Template
- Klik Edit HTML
- Klik Lanjutkan dan beri tanda centang pada tulisan "Expand Widget Template"
- Cari kode <b:skin><![CDATA[
- Copy dan Paste kode di bawah ini, tepat di atas kode <b:skin><![CDATA[ <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> - Lalu cari kode ]]></b:skin> dan letakkan kode berikut ini di atasnya #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/AVvXsEhxsSSCVpPum2H16MZxleVz67nDclCd3C4CZSORF_HFHt63vtIrKm2nzv1KX9P0__MHoIG7LJnvdyGPA8MHmXkhJVqgsC1vjyb3kYSwAS_SliQlTl6R-_6erjCOHvQNoGFkNYBepWtXKsFu/) no-repeat right top;
text-indent: -9999px;
} - Cari kode <body> dan letakkan kode berikut ini di bawahnya. <div id='pageflip'>
<a href='masukkan alamat Rss kalian' target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4TU_RjcsvsekvN4rl8CF8xnjCm4tS5G6UUK2mQMGBXS77RKVnY3QmVc5urvcf0WXZiS7QnrEXsqp7mJiJMtzDV8BRamSAKvWxuf8SXSUBNWAdF2AsigC1wKN7CKZZ5SPELUMqWP1Egmf/'/>
<span class='msg_block'/>
</a>
</div>
0 Response to "cara menambahkan efek lipatan di halaman blog"
Posting Komentar
Dilarang komentar spam