Minggu, 30 September 2012

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMNrcV5d-pGf92pU3RvbpWgVoXyiYNJp6jqY5BgdfhjahDRgQKJurgqGhSIpGUVd3ReV2hhlrJIxqrASpdD6e1HMZcMjEUKI6xuP_vUeE79BN9qS_he_LD3prZC8BkEfXBRmta9zAztjH-/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.
Diposting oleh di
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)