Home > Tips > Bagaimana Membina Page Feel Pada Penjuru Atas Blog

Bagaimana Membina Page Feel Pada Penjuru Atas Blog

Posted by TerbaikLaH on Saturday, September 1, 2012 at 4:19 PM

Anda ingin memasang page peel pada blog anda?Sebelum itu tahukah anda apa itu page peel,page peel adalah efek yang memaparkan muka surat yang boleh diselak dan biasanya dipasang pada penjuru atas kanan pada blog.anda semua boleh melihat demo disini.
Berminat?jom kita lihat cara-cara untuk memasangnya.tutorial ini dikreditkan kepada maribinablog

1)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.

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

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1xz07r1UEusx8ufMGq8O_v4H00vGlB7FmmXzq-35grEARjhQ32T2CBv37TCJkld6ocDXpKG6hVBikyXFHPiNGcgOv8kj3rrENENGEhKzVtJfiL3EFXcQ_2CzK8tMkeoKAxhM6OCb3CMQ/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>

3)Selepas itu,tekan Ctrl + F. Salin atau taipkan kod  <body> dan seterusnya tekan Enter.
4)Salin kod yang berwarna merah di bawah dan pastekan di bawah atau selepas kod <body> pada script template.


nota: Tukar URL yang di bold dengan URLblog anda.


<div id='pageflip'>
<a href='http://mediasiber.blogspot.com/feeds/posts/default'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHmoOHtnE024L8W4xv2jTee_hYoMoF54Z2O_g6nsSnMllkyKFsUcltZ8cMR6p_0karf_XRGdwJ_Dg2zL7AchfStIZxgGmWGvWFRr5Vjh9awc2N2vMnFl4ZDmRWeFv0rmFNUiXvncaoUOo/s320/pageflip.png'/></a>
<div class='msg_block'/>
</div>
Ranking: 5

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

Post a Comment