sh.st/tVdGD sh.st/tCXMj Cara membuat efek gulungan disudut blog

Cara membuat efek gulungan disudut blog

HASTA - kali ini akan membahas Cara membuat efek gulungan disudut blog Atau dengan kata lain membuat efek seoalah-oleh menggulung atau terlipat pada sudut blog. Cara ini mudah saja sebenarnya, seperti biasa hanya bermain script dengan perintah tertentu sehingga terciptalah  efek gulungan disudut blog sesuai dengan yang kita inginkan.

Dibawah ini adalan Cara membuat efek gulungan disudut blog :

Cara ini berlaku untuk pengguna blogspot. 
Pertama sobat login ke blog sobat -->Edit HTML --> beri centang expand widget template. Lalu sobat cari kod <b:skin><![CDATA[ kemudian sobat copy kode dibawah dan letakkan diatasnya.

 <script src='http://trikblogger.googlecode.com/files/script_lipat_halaman_trikblogger.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>

Jika sudah, cari lagi kode ]]></b:skin> untuk membuat style CSSnya, copy kode dibawah letakkan diatas ]]></b:skin>
 #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;
}
 KETERANGAN :
  • Warna biru adalah URL gambar backgroundnya, sobat bisa menggantikan dengan background lain sesuka hati sobat. Dibawah saya sudah menyiapkan beberapa background alternatif untuk sobat silahkan dipilih :
gambar tergulung
URL :http://lh5.ggpht.com/_RVpTV2JOOxA/S8iu18jZiCI/AAAAAAAACyo/e0oaiHtbMf0/berlangganan_kelipat.png

gambar tergulung
URL : http://4.bp.blogspot.com/-gQg_AakCE2I/Tx_Hvq40tJI/AAAAAAAABU8/i3wAvWa95GU/s1600/efek-gulung1.gif

gambar tergulung
URL : http://4.bp.blogspot.com/-HEmZ3CauvD4/Tx_HwiT_r9I/AAAAAAAABVE/3lLN7qR0KPk/s1600/efek-gulung2.gif

 Terakhir cari kode <body> dan copy lagi kode dibawah letakkan dibawahnya.
<div id='pageflip'>
<a href='http://agoengsang.blogspot.com/' target='_blank'>
<img alt='' src='http://lh3.ggpht.com/_RVpTV2JOOxA/S8iu2CHC7SI/AAAAAAAACys/nYe088a8tkc/gambar_kelipat.png'/>
<span class='msg_block'/>
</a>
</div>
  KETERANGAN:                                                                                                                                 
Ganti URL warna biru dengan URL keinginan sobat misalnya alamat beranda blog, link buku tamu dll.

Kemudian Preview / pratinjau dulu sebelum di SAVE kalau sudah ok, SAVE..
Selamat menggulung.. hehe.. 


Happy Sharing..
Related Posts Plugin for WordPress, Blogger...