Home » » Cara Menyembunyikan Buku Tamu Rolling Widget

Cara Menyembunyikan Buku Tamu Rolling Widget


Cara Menyembunyikan Buku Tamu Rolling Widget


Cara Menyembunyikan Buku Tamu Rolling Widget

Cara menyembunyikan buku tamu rolling widget seperti gambr di bawah ini yang saya dapat dari internet.

Cara Menyembunyikan  Buku Tamu Rolling Widget

Jika kamu mengklik link guest book pada navbar maka akan muncul buku tamunya,dan untuk menutupnya lagi silahkan klik lagi link guest book tersebut lagi,Nah,Bagaimana cara membuatnya?

Untuk membuat rolling widget supaya bersembunyi, berikut adalah langkah-langkahnya:

  1. Login ke blogspot kamu
  2. Klik Rancangan
  3. Klik Edit HTML
  4. Centang Expand Widget Default dan download html kamu untuk backup
  5. Copy kode dibah ini dan letakkan tepat dibawah kode </head>

    <!-- Mulai Rolling Widget -->
    <style type="text/css">
    #gb{
    position:fixed;
    top:10px; /*jarak dari atas*/
    right:0px;
    z-index:+1000;
    }
    * html #gb{position:relative;}

    .gbtab{
    height:100px;
    width:30px;
    float:left;
    cursor:pointer;
    background:none;
    }
    .gbcontent{
    float:left;
    border:2px solid #888888; /*warna bingkai*/
    background:#F0F0F0; /*warna latar*/
    padding:5px 10px 0px 10px;
    }
    </style>

    <script type="text/javascript">
    function showHideGB(){
    var gb = document.getElementById("gb");
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 30-w) : moveGB(20-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">
    <div style="text-align:center;"><a href="javascript:showHideGB()" title="Close/Tutup"><img style="border:0px; width:100px; height:auto;" alt="Guestbook" src="http://i563.photobucket.com/albums/ss76/peace_enes/guestbook.png" /></a></div>

    Kode Shoutbox atau Buku Tamu

    <script type="text/javascript" src="http://infonetmu.googlecode.com/files/rollingwidget.js"></script>
    </div></div>
    <!-- Selesai Rolling Widget -->
  6. Save template kamu.
  7. Setelah itu buatlah sebuah link untuk menampilkan rolling widget, seperti berikut :

    <a href="javascript:showHideGB()">Buku Tamu</a>
  8. Kamu dapat mengganti Guest Book dengan yang lainnya sesuka hati kamu....!


Cara Menyembunyikan Buku Tamu Rolling Widget


DOWNLOAD NOW (MIRROR LINK)


Cara Menyembunyikan Buku Tamu Rolling Widget

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blog

0 comments:

Post a Comment

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Tips Trik Blog™ - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger