Minal 'Aidin wal Faizin
Mampukah setiap tahun bertambah baik?
Sebuah tantangan bagi siapapun. Jadikan Idul fitri sebagai mement yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama.

Cara Membuat Page Peel Efek menggunakan jQuery & CSS

Hello, Sobat blogger mania, Sungguh tiada habisnya bila kita berbicara tentang, bagaimana cara memperindah blog. Nah kali ini Eucation For All akan sharing tentang cara  Membuat Page Peel Efek menggunakan jQuery & CSS. Apa sih Page peel itu?? yah barangkali sobat blogger mania pernah berkunjung kesalah satu blog sahabat dan melihat dipojok kanan atas seolah olah ada kertas yang melipat. itulah yang dinamakan page peel, barang kali bisa kita terjemahkan kedalam bahasa indonesia "Page" berarti halaman sedangkan "Peel" artinya mengupas. tapi mungkin makna yang sebenarnya adalah kertas yang melipat,...Mungkin EFA sendiri juga kurang begitu jelas. Nah without further a do. mari kita coba praktekan 
  1. log in ke blog
  2. Klick design/rancangan
  3. Pilih Edit HTML
  4. Cari kode <b:skin><![CDATA]
  5. Jika sudah menemukan code <b:skin><![CDATA] Letakan script code jQuery dibawah ini diatas kode <b:skin><![CDATA]  
 

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});
});
</script>

Kemudian carilah kode ]]></b:skin> letakan kode CSS dibawah ini diatas kode ]]></b:skin>


#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://img222.imageshack.us/img222/9213/subscribe.png) no-repeat right top;
}

Selanjutnya cari <body> Letakan kode dibawah ini, dibawah tag <body>


<div id='pageflip'>
<a href='http://feeds2.feedburner.com/namafeedkamu'>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>

Silahkan disimpan dan lihat hasilnya. Ingat! Tampilan diatas hanya sebagai contoh saja ya, Sobat blogger maniabisa mengganti gambar dan link tujuan apa saja sesuai keinginan. Silahkan langsung dicoba
EFA kira penjelasanya sudah sangat jelas. apabila sobat blogger mania belum mengerti juga sebaiknya sobat blogger mania langsung saja mematikan komputer ambil sarung terus tidur.
 

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :





» Selamat Berkreasi - E F A «


3comments:

  1. Karena ane bingung dan ngk ngerti bahasa HTMl maka ane putuskan ambil kain sarung terus tidur..Hi..hi..hi..

    ReplyDelete
  2. Apa kabar Mas Jafar, uda lama ni berkunjung lagi

    ReplyDelete
  3. Mas script di atas kira2 apa bisa juga dipasang pada worpress dan bila dapat mohon share caranya juga
    terima kasih sekali atas tutorial di atas

    ReplyDelete

Terimakasih Atas Komentar Anda dan EFA akan segera menuju Blog anda...

NextPrev