Senin, 25 Juni 2012

Membuat Efek Lipatan Kertas di Blog

source:monozcore.blogspot.com
Bagi blogger yang sering blogwalking di website orang lain mungkin sudah sering melihat efek lipatan kertas ini dan ingin memasangnya di blog anda juga namun belum tau cara memasangnya.Sekarang kita akan belajar bagaimana cara memasang efek lipatan kertas ini di blog kita.Namun sebelum itu,bagi sobat blogger yaqng belum tau efek lipatan kertas di blog itu bagaimana,contohnya seperti gambar di samping

Jadi pada pointer disorot ke lipatan kertas yang terlihat kecil maka hasilnya akan seperti gambar di samping
Untuk cara pemasangannya sebagai berikut



  • Pertama Login ke account blog anda kemudian masuk ke dashboard
  • Lanjutkan ke edit HTML
  • Untuk lebih aman,download dulu template anda
  • Cari kode ]]></b:skin> (Gunakan Ctrl + F agar lebih mudah
  • Copy dan paste kode berikut di atas kode ]]></b:skin>
  • #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;
    }
  • Ganti kode yang berwarna biru dengan URL gambar anda
  • Kemudian cari kode </head> (Gunakan Ctrl + F)
  • Copy dan paste kode ini di atas kode </head>
    • <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 lagi kode <body> (Gunakan Ctrl + F)
  • Copy dan paste kode ini di bawah kode <body>
  • <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>
Kode berwarna merah adalah URL link yang akan dituju
Kode berwarna biru adalah URL gambar lipatan kertas anda

  • Klik save dan lihat hasilnya



source:monozcore.blogspot.com

1 komentar:

  1. Tutorialnya mudah untuk dipahami, senang bisa berkunjung ke blog ini...blognya bagus

    BalasHapus

 

Template Design By:
GTS