Membina muka surat selak (Page Peel) pada bahagian penjuru atas blog


Apa itu Page Peel?

 Page Peel adalah efek yang memaparkan muka surat yang boleh di selak (page peel) yang  biasanya di pasang pada penjuru kanan bagi sesebuah blog. Hanya dengan meletakkan kursor mouse pada penjuru page yang di lipat, layout blog akan terselak dan memaparkan imej yang di pasang di sebalik layout blog. Efek ini sememangnya amat menarik dan mudah untuk di buat. Contoh Page Peel boleh anda lihat di sini. Anda boleh menukarkan URL dan imej yang terpapar pada contoh tersebut kepada imej pilihan anda.


Langkah 1

p/s: Save dahulu script template sebagai backup.

Log in blog => Dashboard => Layout => Edit HTML. Seterusnya klik pada kotak Expand Widget Templates.

Dengan menggunakan keyboard, tekan Ctrl + F. Salin atau taipkan kod  ]]></b:skin> dan seterusnya tekan Enter.


Langkah 2

Salin kod yang berwarna biru di bawah dan pastekan di bawah atau selepas kod ]]></b:skin> pada script template (rujuk langkah 1).

p/s: Anda boleh menukar image 'Page Subscribe' kepada image pilihan sendiri dengan menukarkan URL image yang di bold.

<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://1.bp.blogspot.com/_LZtXSNcp76A/SwfKGkyNaMI/AAAAAAAAAmA/4MybL0iiLcQ/s320/PageSubscribe.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>


Langkah 3

Dengan menggunakan keyboard, tekan Ctrl + F. Salin atau taipkan kod  <body> dan seterusnya tekan Enter.


Langkah 4


Salin kod yang berwarna merah di bawah dan pastekan di bawah atau selepas kod <body> pada script template (rujuk langkah 3).


p/s: Tukar URL yang di bold dengan URL pilihan anda.


<div id='pageflip'>
<a href='http://larikudaku.blogspot.com/feeds/posts/default'><img alt='' src='http://4.bp.blogspot.com/_LZtXSNcp76A/SwfKDG6SAhI/AAAAAAAAAl4/GT-uqh6aeOo/s320/pageflip.png'/></a>
<div class='msg_block'/>
</div>


Akhir sekali klik Preview. Jika tiada sebarang mesej error yang terpapar dan anda berpuas hati dengan hasilnya, klik saja Save.


{ 30 comments.. read them below or add one }

NJ NJ 7:55 PM
salam nescafe ais
wahhh...lu dtg lg dgn ilmu baru hari ni..akak suker...tengkiuuuuu....wa mmg salute sama lu la bg ilmu byak wooo pada blogger baru mcm gua ni..

ps : sis pun ada gak tanya soalan remeh tu..sory ek..tapi ye la baru belajar kan..akak sabar tunggu jawapan lu beb..

semoga lu terus menulis kat sini...tq
Nescafe ais Nescafe ais 8:54 PM
To NJ:

~ Soalan apa tu yer. Jangan bagi soalan yang menguji minda sudahlah.
anwaruddin anwaruddin 9:11 PM
bro, tak paham yang ni la "Seterusnya klik pada kotak Expand Widget Templates." kotak expand widget templates kat mane?

sorry aku baru berblog, mintak tunjuk aja, huhu
anwaruddin anwaruddin 9:14 PM
hahahaha! da jumpe da, gua bute, sorry, hehehe
Nescafe ais Nescafe ais 9:17 PM
To anwaruddin:

~Baru gua nak marah ni. Nasib baik lu jumpa dulu. Haha.
kinsyakrn kinsyakrn 9:25 PM
wlcome back..marah ke? xpe..lepas ni akan cuba berdiri sendiri tp kena bpaut pd nes dulu.
shuhada shuhada 9:55 PM
salam.
huhu dah agak dah, bro..
lu mesti saaayang gile ngan blog ni kan.. takkan marahkan nyamuk sampai kelambu nak dibakar ye, tak?
welcome back!
sy dah banyak bagi url blog ni kat kengkawan wat reference tau, jgn lak nak tutup2.. huhu.
Fyzal Fyzal 12:16 PM
nice bro. thanks for the knowledge.

selamat berhujung minggu
arnamee arnamee 4:02 PM
salam:)
suke2,save as bookmark,wat rujukan,thnks ea:)
sYu sYu 3:49 PM
salam...
nak tanye sikit..mcmana nak tukar image pada page peel tu?sy dah upload image kat freeimagehosting.net tu,then bila paste kan image xley save laa...need ur help..
Nescafe ais Nescafe ais 5:53 PM
To sYu:

Tak payah hostkan pada image hosting. Cuma upload pada draft post. Lepas tu salin linknya. Trik yang sangat mudah.
Along25 Along25 10:45 AM
hehehehe... sory encik nescafee... link kat mane palk tu? da ikot da sumer... tak jadi gakkk
Along25 Along25 11:29 AM
kiranya, page peel ni, dia hanya subscribe je ke? bukan tros g kat blog yang kita link tu ae?
Nescafe ais Nescafe ais 4:56 PM
@Along25

~URL yang bold tu boleh tukar URL sendiri. Tak semestinya URL untuk feed post. Letak URL blog sendiri pun boleh.
~Image subscribe tu pun boleh tukar. Cuma tukar URL imagenya aje.
smile.gurlz smile.gurlz 7:23 PM
thanks...
jadi tapi waner pink jer...
anyway,
tq atas tunjuk ajar..
Ayu Ayu 11:16 AM
Salam Tuan Rumah,

terima kasih banyak2, informasi yang sangat berguna.. boleh try set di blog saya nanti..
ids ids 11:38 AM
hai.nak tanya page peel ni ley letak banyak page tak?saya tengok cth u bagi hanya 1 page jek.
lagi 1 nak tanya ler macam mana nak masukkan gambar banyakx dan hanya ada nama gambar tu saja yg ley link ke page yg lain...

tq..saya belaja sdiri melalui blog u jek dah pandai macam2x..tq
Nescafe ais Nescafe ais 12:39 PM
@ ids

Payah juga soalan. LOL

Rasanya cuma untuk satu gambar kut untuk page peel.

Satu lagi soalan tu macama mana yer.
hBz hBz 3:30 AM
aaa.. tgk page wa jap. try byk kali, tak jadi jg nak buat bende ni..hurm. PM.pls.k
Hadi Hadi 3:14 PM
nes,boleh ke buat untuk iklan sendiri??
Nescafe ais Nescafe ais 4:41 PM
@hBz

Bro. Dah reply kat shoutbox.

Hadi

Boleh. Tukar URL background yang highlight biru.
hBz hBz 5:46 PM
dah jadi. tapi bukan kat atas. DI BAWAH. !uh
AkuPc AkuPc 8:34 PM
worked, n smart la
Ah Moy Ah Moy 3:12 PM
semua jadik..cuma satu jer masalahnyer....
bila dah click save template dia x mahu save..mcm mana ni??? adoiii...baru nk letak menatang ni dlm blog saya....huhuhuhu...tolonggg..saya nk sangat peel page ni...
Syat0za Syat0za 5:45 PM
siza page nie brape ek???
Syat0za Syat0za 5:45 PM
siza nk letak gambo tuhh,,
Nur Nur 12:39 PM
salam...my blog dah ada TOP MENU..tapi macam mana nak post dalam top menu???...banyak kali try x jadi je...nak buat post and sebelum nak tulis post nak letak title dulu mcm mana?/...
Shima Creations Shima Creations 8:45 AM
Camna nak organize blog dengan buat HoMe button dan kategory lain di atas blog? Tolong bagi tau... puas dah cari yang ada peel page and numbering page kat bawah. Pls.. pls..pls.
wan wan 2:46 AM
hai. sy dah try buat tp x jumpa body tu kat edit html.mcm mana nak buat ni?
Mylsa Win Mylsa Win 4:38 PM
hemm...body tu tia jumpa ni..amcm aa..?