Saturday, April 2, 2011

Cara Menambahkan Peel Effect pada Blog

|
Pada postingan kali ini saya akan mnegasih tahu kepada sobat blogger semua tentang cara menambahkan Peel Effect atau efek kertas melipat di bagian pojok blog. Pada awalnya yang melipat hanya sebagian kecilnya saja tetapi ketika kita sentuhkan kursor ke lipatan kertas itu makan akan membuaka seperti kita membuka buku halaman per halaman. Gambarannya seperti berikut:

Caranya kayak gini:
1. Login ke blogger=>Rancangan=>edit HTML=>centang expand template widget
2. Cari kode <b:skin><![CDATA[ dengan klik F3 lalu pastekan kode di bawah tepat di atas kode tadi.

<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>

3. Lalu cari kode ]]></b:skin>  dan pastekan kode berikut 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;
}
4. Lalu cari lagi kode  <body>  dan letakkan kode berikut 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>


*Ganti yang berwarna Ijo dengan Link yang anda inginkan. Saran: Link RSS atau link berlangganan.

 5. Simpan Template




SEMOGA BERHASIL 100%

0 comments:

Post a Comment

Translator

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

My Banner

Copy kode di bawah masukan di blog anda, saya akan segera linkback kembali
Image by FlamingText.com

Recent Post

Sponsors

Copyright © 2011 Robbie Blog

Template N2y Shadow By Nano Yulianto