Alep Darling .: How To Add Peel Effect .

Okay. Semua! Sekarang jam menunjukkan 1.52am. ( rajin lak buat tutorial pagi2 buta =.=)

Sekarang AD nak ajar effect peel. Pendek kata, peel ni mcm mukasurat la senang. Korg bole letak link ape korg suka. Maksudnya blogger korg ada lapisan 1 lg. Paham x? Contoh cm gambar bawah ni :

Mari mula!!
1. Dashboard → Design → Edit HTML .

2. Tekan Ctrl+F then search tag </head> .

3. Paste kod kat ATAS </head>

<style type="text/css">
img { behavior: url(iepngfix.htc) }
#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(BACKGROUND KORG SENDIRI) no-repeat right top;
}
</style>
<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>

4. Tekan Ctrl + F3 cari tag <body> .

5. Paste kod kat BAWAH tag <body> .

<div id='pageflip'>
<a href='URL KORANG NAK'><img alt='' src='GAMBAR YANG KORG NAK '/></a>
<div class='msg_block'></div>
</div>

6. Preview dahulu, jika jadi baru klik Save Template.

P/S: Kalau xfaham ape2 boleh tnye AD okay.? I'll be feedback ASAP. Salam .

Thanks for visit! /bye

Sincerely by :

Followers

How To Add Peel Effect .

4 comments: