Panduan Cara Membuat Efek Lipatan Pada Halaman di Blog.

      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.

.

page peel effect

Dan untuk membuatnya,silahkan ikuti langkah-langkah seperti berikut ini :

1. Login ke Blogger
2. Klik Template
3. Klik Edit HTML
4. Klik Lanjutkan dan beri tanda centang pada tulisan "Expand Widget Template"



 5. Cari kode <b:skin><![CDATA[
6. Copy dan Paste kode di bawah ini 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> 

7. 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/AVvXsEjvGsP6IAUpTFzPWA03Hi-yZN34MaWYRHzK0d6VBsg1IP5m7XSvz_j7METrkyviBCpO5NF0Iel-OOnu5KKZ918BhB_hnqqRcT9tHlf8LO0cnhXsisiDbNlVl32kU0I3TyjyWHuPKxsj6V98/) no-repeat right top;
text-indent: -9999px;
}

8. Cari kode <body> dan letakkan kode berikut ini di bawahnya.
 

<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/AVvXsEhPhS3f8zR3LGBkchsIY_OE-7vWQdBbxF_xDyTgxLn56I8oAmRykJ4QEBpzkK9WOi_gtLLgZPi2Pu3lOo9vzveALlJ7DilJq1rCUEt188D8g8F8fwr0KtRp4RC94Qma_khKEbW04o79fAoR/'/>
<span class='msg_block'/>
</a>
</div>
*Keterangan : Silahkan ganti tulisan yang berwarna hijau dengan link yang sobat inginkan,misal link rss

9. Selamat Mencoba

Categories:
Comments
0 Comments

0 comments:

Post a Comment