Tutorial blog

membuat Halaman Bisa Ngelipat or effek Page Peel

Theby plg 17.58

untuk memperunik atau mempercantik halaman web/blog kamu Nama tips nya membuat halaman yang bisa ngelipat pada saat mouse kamu berada di pojok halaman, halaman ini bisa ngelipat dan kebuka. Namun hanya sebagian kecil saja dan di dalamnya terdapat gambar (disesuaikan) yang biasanya kalau diklik akan diarahkan ke suatu halaman lain ok langsung saja brow h3llb0y beri kan tips nya:

  • Log ini ke akun blogger Anda

  • Pilih menu Tata Letak (Layout) » Edit HTML.

  • Beri tanda centang pada tulisan Expand Widget Templates.

  • Tekan CTRL + F untuk mencari kode berikut <b:skin><![CDATA[

  • Copy-paste script berikut di atas kode <b:skin><![CDATA[

    • <script src='http://sites.google.com/site/software2iqbalinc/javascript/script_ditunjuk_ngelipet_t4belajarblogger.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>

  • Lalu cari lagi kode ]]></b:skin> Dan letakkan kode berikut di atasnya:


    • #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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGT5IGBeBTdGYckuCxpGaRYemOffTV6ljFqdb2FgeegGZ77aoMnshjRnfVlPtDIOn1WFaVQ8G6czMx8GRcMxW_XqeAbsj60drP9CEsBLW-1vM8Z9ENGsKp-XgC6o6NSshZQ2231kPb7CiN/) no-repeat right top;
    text-indent: -9999px;
    }

  • Cari kode <body> Dan lettakkan kode berikut di bawahnya:


    • <div id='pageflip'><a href='http://ganti dengan url yang kamu ingin kan' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvgBQbN10Lu_7plquCyniO0JFU2Miq5uXtMytQUAxMuRjnaObRFps_aRubdfxF4ffmTz8FCHylpUjaj9r2vOuVa7S8DryuLeCTDruJM5Mcne7gt3VAtQKOo1o-huq1kNYebBgzNqHlGxc/s320/lipat.png'/><span class='msg_block'/></a></div>
    Ganti warnah Merah dengan link target yang kamu ingin kan misal kan halaman fb or web kamu
    Simpan template Sekarang silahkan lihat blog kamu dan Untuk mengganti gambar dinding, ente bisa mengganti URL berikut:

    #pageflip .msg_block {
    width: 50px; height: 50px;
    position: absolute;
    right: 0; top: 0;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbRQ0qm6zhyewX8Nlog-3ScljN7YTXe6OSo8Wk_WtJ3ywY5_Q2vkIdIhQQxg18wES05nviNze29YcuY4pXrAr8I6MY5jo0LLSLHnvtI2O_yLGM3sxm20IJ2H8Zn1i4zrvc8QPbhAvAjDw/s320/klikdisini.jpg) no-repeat right top;
    text-indent: -9999px;
    }
    selamat mencoba dan semoga berhasil brow....
    Tags

    Posting Komentar

    0 Komentar

    Posting Komentar