Cara Membuat Gulungan di Sudut Blog

Mempercantik blog adalah kewajiban bagi setiap blogger, agar pengunjung betah berlama-lama di blog kita. Namun sebaliknya jika blog kita terlalu banyak widget atau aksesoris akan menambah loading blog menjadi lama, akibatnya pengunjung malas membaca atau sekedar melihat-lihat blog kita.

Mugkin Anda pernah melihat sebuah blog yang sudutnya menggulung jika kursor didekatkan? Nah, pada kesempatan ini kita akan membahas cara membuat gulungan di sudut blog. Berikut langkah-langkahnya:

  1. Login akun blogger 
  2. Klik Template ---> Edit HTML ---> beri tanda centang pada kotak expand widget template. 
  3. Tambahkan kode dibawah ini tepat diatas ]]></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(letakkan url gambar disini) no-repeat right top;
    text-indent: -9999px;
    }
    Ganti kode yang berwarna merah dengan link kode gambar yang Anda inginkan. 
  4. Kemudian copy paste kode berikut tepat di bawah <b:skin><![CDATA[ atau <b:skin><![CDATA[/*
    <script src='http://blogatap.googlecode.com/files/script_lipat_halaman_blogatap.txt' 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> 
  5. Selanjutnya terakhir tambahkan kode berikut dibawah kode <body>
    <div id='pageflip'>
    <a href='http://blogatap.blogspot.com/' target='_blank'>
    <img alt='' src='http://4.bp.blogspot.com/-E7h32GLOZNg/UP60SUTAOaI/AAAAAAAACcE/OLDIpepwPc4/s1600/gambar_kelipat.png'/>
    <span class='msg_block'/>
    </a>
    </div>
    Ganti kode yang berwarna merah dengan alamat blog atau link yang Anda inginkan. 
  6. Simpan template
Nah, sekian postingan cara membuat gulungan di sudut blog, semoga bermanfaat bagi kita semua.




  • Baca Juga