Panduan Cara Membuat Efek Lipatan Pada Halaman di Blog.
Panduan blogger untuk blogger pemula.Panduan blogger yang akan
menjelaskan, membahas serta membantu sobat blogger semua tentang
"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..
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(http://lh5.ggpht.com/_RVpTV2JOOxA/S8iu18jZiCI/AAAAAAAACyo/e0oaiHtbMf0/berlangganan_kelipat.png) 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(http://lh5.ggpht.com/_RVpTV2JOOxA/S8iu18jZiCI/AAAAAAAACyo/e0oaiHtbMf0/berlangganan_kelipat.png) 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='http://lh3.ggpht.com/_RVpTV2JOOxA/S8iu2CHC7SI/AAAAAAAACys/nYe088a8tkc/gambar_kelipat.png'/>
<span class='msg_block'/>
</a>
</div>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=tutorialbloggingdiblogger' target='_blank'>
<img alt='' src='http://lh3.ggpht.com/_RVpTV2JOOxA/S8iu2CHC7SI/AAAAAAAACys/nYe088a8tkc/gambar_kelipat.png'/>
<span class='msg_block'/>
</a>
</div>
*Keterangan : Silahkan ganti tulisan yang berwarna hijau dengan link yang sobat inginkan,misal link rss
9. Selamat Mencoba
Artikel
thaks mas...
BalasHapus