Tuesday, 30 October 2012

Cara Membuat Efek Lipatan Kertas Di Blog

By Anonymous 07:24 Leave a Comment

Mungkin sobat blogger sudah sering melihat efek lipatan kertas ketika sedang menjelajah website ataupun blogwalking, namun masih bingung tentang cara pemasangannya di blog... nah kebetulan jika ya berarti sobat telah mendarat dengan tepat karena pada postingan artikel ini akan membahas cara pemasangan efek lipatan kertas untuk digunakan di blog. Oke sob jika tertarik untuk mencoba memasang efek lipatan kertas ini monggo disimak tutorialnya...

Contoh :



Cara Pemasangan :
  • Login ke blog sobat...

  • Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.


  • Cari kode ]]></b:skin> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode ]]></b:skin> tersebut. 
     
    #pageflip {
    position: relative;
    }
    #pageflip img {
    border: none;
    width: 50px; height: 52px;
    z-index: 99;
    position: absolute;
    right: 0; top: 0;
    -ms-interpolation-mode: bicubic;
    }
    #pageflip .msg_block {
    width: 50px; height: 50px;
    position: absolute;
    right: 0; top: 0;
    background: url(http://lh3.googleusercontent.com/-BFy8oqoYLgM/T048MJSYmpI/AAAAAAAABO0/RHVBBWIoeSY/s288/Facebook-logo.png)
    no-repeat right top;
    text-indent: -9999px;
    }
     
    - Keterangan :
    • Kode yang berwarna biru merupakan URL Link Gambar.

    Cari kode </Head> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode </Head> tersebut. 
     
     
    <script src='http://monozcore-project.googlecode.com/files/script%20page%20peel.js' type='text/javascript'/>
    <script type='text/javascript'>
    $(document).ready(function(){
    $("#pageflip").hover(function() {
    $("#pageflip img , .msg_block").stop()
    .animate({width: '307px',height: '319px'}, 500);
    } , function() {
    $("#pageflip img").stop()
    .animate({width: '50px',height: '52px'}, 220);
    $(".msg_block").stop()
    .animate({width: '50px',height: '50px'}, 200);
    });
    });
    </script>
     
     # Cari kode <Body> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di bawah kode <Body> tersebut.  
     
    <div id='pageflip'>
    <a href='http://facebook.com' target='_blank'>
    <img alt='' src='http://lh4.googleusercontent.com/-E4pceRFNDIE/T047Qpmfo5I/AAAAAAAABOs/2QTA5duAUg0/s800/sc-page-peel.png'/>
    <span class='msg_block'/>
    </a>
    </div>
     
    • - Keterangan :
      • Kode yang berwarna merah merupakan URL Link yang akan dituju.
      • Kode yang berwarna biru merupakan URL Link gambar kertas.

    • Klik "Save" dan lihat hasilnya...
     

0 comments:

BERKOMENTARLAH DENGAN BAIK DI BLOG INI !!!

PERATURAN BERKOMENTAR :

- JANGAN MENCANTUMKAN LINK HIDUP
- DILARANG MENCANTUNKAN BERISI UNSUR DEWASA
- JANGAN BERKOMENTAR BERMAKSUD MENGHINA
- BERILAH KRITIK DAN SARAN YANG BAIK
- KOMENTAR DARI ADMIN HARUS DIRESPON

*KOMENTAR ANDA HARUS DISETUJUI ADMIN DAHULU