Saturday, July 21, 2012

Cara Membuat Efek Lipatan Kertas Di Blog

By Sriudin sahrudin   Posted at  7:01 AM   Blogger No comments


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

About the Author

Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo.
View all posts by: BT9

0 komentar:

Back to top ↑
Connect with Us

What they says

© 2013 BLOG SI PALUI. WP Mythemeshop Converted by Bloggertheme9
Blogger templates. Proudly Powered by Blogger.