Rabu, 16 Februari 2011

1

Membuat fitur kolom melayang

  • Rabu, 16 Februari 2011
  • Bina Blogger
  • Share
  •  Nah buat kolom tambahan buat tempat kotak saran/dll deh.biar blog kalian gak terkesan rame/acak2kan. klo blog kalian bisa dihemat dengan bantuan script ini kan enak.
    langsung aj buat tambahkan widget baru : Html/javascript


    copy code dibawah ini :
    --------------------------------------------------------------------------------

    <span class="fullpost">    </span>

    <style type="text/css">
    #gb{
    position:fixed;
    top:10px;
    z-index:+1000;
    }
    * html #gb{position:relative;}

    .gbtab{
    height:70px;
    width:70px;
    float:left;
    cursor:pointer;
    background:url(' http://h1.ripway.com/efanfadilah/visitor.png  ') no-repeat;
    }
    .gbcontent{
    float:left;
    border:1px solid #BDBDBD;
    background:#FFFFFF;
    width:290px;
    padding:10px;
    }
    </style>

    <script type="text/javascript">
    function showHideGB(){
    var gb = document.getElementById("gb");
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 60-w) : moveGB(60-w, 0);
    gb.opened = !gb.opened;
    }
    function moveGB(x0, xf){
    var gb = document.getElementById("gb");
    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    gb.style.right = x.toString() + "px";
    if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
    }
    </script>

    <div id="gb">

    <div class="gbtab" onclick="showHideGB()">
    </div>

    <div class="gbcontent">


    <!-- masukkan code laenx dibawah ini -->
    isikan script lainnya didalam sini ....

    <!-- akhir tambahan kode lain2-->



    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (60-gb.offsetWidth).toString() + "px";
    </script></div></div>
    <div style="text-align: right;">
    <a href="javascript:showHideGB()">

    </a></div>
    --------------------------------------------------------------------------------

    garis2nya gak usah dicopy yow hehehe.
    next kalian bisa tambahkan script laenx di antara tulisan merah di atas :
    tepatnya di tulisan warna biru kaya ini 
    --------------------------------------------------------------------------------
    <!-- masukkan code laenx dibawah ini -->
    isikan script lainnya didalam sini ....
    <!-- akhir tambahan kode lain2-->

    --------------------------------------------------------------------------------
    nah tugas beres deh. simpen dan nikmati hasilnya .....

    1 Responses to “Membuat fitur kolom melayang”

    misba mengatakan...
    16 Desember 2011 pukul 14.58

    Makasih infonya keren cuy


    Posting Komentar

    Subscribe