Follo Molo (Become My Stalker And Ask Me To Stalk Back....I prefer a Yandere...)

Bored?You can play around with these line of colours for a while.....it is 100times better than PS4...because I dont have one....

02 Ogos 2010

Blog Tutorial:Peel Effect/Efek Kupasan





Efek kupasan merupakan cara yang bagus untuk menarik perhatian pengunjung blog korang jika korang ada sesuatu nak tunjuk.Ia juga merupakan cara pengiklanan yang baik.Biasanya korang melihat iklan jenis ni kat dalam blog jenis wordpress tapi sekarang korang boleh gak guna pada blogspot,dengan bantuan javascript dimana hack ni berfungsi ke atas jquery dan css

Lihat Demo
*MAAF,DEMO TIDAK DIAKTIFKAN BUAT MASA NI*

(Cam biasa,backup dulu template korang!)
Log in ke dalam Blogger,
Pergi Ke Layout > Edit Html >Ctrl + F

Cari kod </head>

Dan tampal kod ni kat bawah dia

<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(http://www.wallheaven.com/subscribe.png) 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>

Ok,lepas tu,cari kod <body>,dan pastekan kod ni kat bawah dia

<div id='pageflip'>
<a href='http://feeds2.feedburner.com/fitri'><img alt='' src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'></div>
</div>

*NOTA TAPAK KAKI
Korang boleh gantikan kod yang warna hijau ngan gambar yang korang nak
Kod yang kaler merah pula,untuk korang letak alamat korang





Post a Comment:

Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.

At the post page,this banner can be spin around ;)