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.
.
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[
7. Lalu cari kode ]]></b:skin> dan letakkan kode berikut ini di atasnya
8. Cari kode <body> dan letakkan kode berikut ini di bawahnya.
9. Selamat Mencoba
.
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>
<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;
}
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>
<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:
Tutorial
0 Comments
