Membuat Gulungan di Sudut Blog

posted by on No Comments
Aksesoris blog di butuhkan bagi setiap blog yang masih aktif, aksesoris blog dapat memperindah dan mempercantik tampilan blog kita agar pengunjung betah mengunjungi blog kita berkali - kali.  Namun jika terlalu banyak aksesoris mengakibatkan blog menjadi lola' (loading lama) dan pengunjung enggan untuk mampir ke blog kita lagi, kebanyakan pengunjung blog menutup blog yang dikunjungi nya sebelum semua kode pada blog yang dikunjunginya karena terlalu lama loadingnya.  Maka dari itu, kita harus pintar memilih aksesoris yang cocok untuk blog kita, bukan semua aksesoris di masukan di blog kita.

Pernah kalian melihat blog yang sudutnya mempunyai gulungan-gulungan aneh ?  Nah.. kali ini kita akan membahas gimana cara Membuat Gulungan di Sudut Blog, kalau belum pernah lihat cek ke situs Radar Banyuwangi.  Gimana ?  Tertarik dan cocok untuk di blog kalian ?  Ikuti langkah di bawah berikut
  1. Login ke Blogger
  2. Klik Design > Edit HTML > centang 'Expand Widget Template'
  3. Pasang 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://kon.tl/deopra) no-repeat right top;
    text-indent: -9999px;
    }
  4. Kemudian pasang lagi kode berikut di bawah kode <b:skin><![CDATA[ atau <b:skin><![CDATA[/*

    <script src='http://trikblogger.googlecode.com/files/script_lipat_halaman_trikblogger.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>
  5. Selanjutnya pasang kode berikut di bawah kode <body>

    <div id='pageflip'>
    <a href='http://graziesuperpippo.blogspot.com/' target='_blank'>
    <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzg4vwDYQ7QlmvYCKFE7uS3vOxWpm7xbAbRxjf_fbzpNgrZNQBKJfagQVQsImavztJQ0jp58rO9hyUxqaxsYb-hUIPlu3UYk71dRlvlmnwTecIbSX8bpRgW2ZcKu0jcY08XPxAi2rpwzQG/'/>
    <span class='msg_block'/>
    </a>
    </div>
  6. Terakhir klik 'Save Template' dan tinggal lihat hasilnya seperti apa ^^

Tomy Dencik

Next PostPosting Lebih Baru Previous PostPosting Lama Beranda

0 komentar:

Posting Komentar