Warung Online

Wednesday, November 10, 2010

Membuat Buku Tamu Tersembunyi

Template Anda sudah penuh dengan berbagai Widget?tapi, kalau Anda ingin menambahkan buku tamu bagaimana?Solusinya adalah disembunyikan seperti Buku Tamu yang saya miliki di sebelah kanan ini.
Tanpa panjang lebar, kita mulai prakteknya.
  1. 1.Masuk ke account Blogger kamu, 
  2.  
  3. pilih "Layout" kemudian "Page Elements",
  4.  
  5. Klik "Add a Gadget" (yang mana aja oke), kemudian pilih "HTML/JavaScript",

  1. Copy-paste kode di bawah ini:
    
    
    <style type="text/css">
    #gb{
    position:fixed;
    top:50px;
    z-index:+1000;
    }
    * html #gb{position:relative;}

    .gbtab{
    height:147px;
    width:50px;
    float:left;
    cursor:pointer;
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFJfmpWbN1HAfDayZeLE68wN3iFYcEO1dz6v3zD8-cDN_TDigoOSCFzyE7KjYy0UvSyFUgjm1wOaAElRx7RVuwRynlhIyy6u5bOBvDmYkYOGFN11GePpGOXY6ZnSMKe4e2wIlBPNiR-aY/s1600/123.png') no-repeat;
    }
    .gbcontent{
    float:left;
    border:5px solid #525252;
    background:#E5E5E5;
    padding:10px;
    }
    </style>

    <script type="text/javascript">
    function showHideGB(){
    var gb = document.getElementById("gb");
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 50-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">
    <!-- Begin ShoutMix - http://www.shoutmix.com --><iframe title="darularqom" src="http://www4.shoutmix.com/?darularqom" width="250" height="350" frameborder="0" scrolling="auto"><a href="http://www4.shoutmix.com/?darularqom">View shoutbox</a></iframe><br /><!-- End ShoutMix -->
    <br/>
    Mau punya buku tamu seperti ini?<br/>
    Klik di
    <a href="http://www.agielweb.info/2010/11/membuat-buku-tamu-tersembunyi.html">
    sini (Info Blog)
    </a>
    </div>
    </div>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (50-gb.offsetWidth).toString() + "px";
    </script>
     
  2. Pada kode di atas, cari kode <!-- Ganti ini dengan kode buku tamu kamu --> dan ganti kode tersebut dengan kode buku tamu yang Anda dapatkan dari situsnya,
  3. Anda juga bisa atur posisinya. Ubah aja nilai atribut top-nya. Kalau mau lebih ke atas dikit, ubah jadi 30px atau 20px, terserah Anda..
  4. Selamat mencoba!
Catatan: di kode di atas saya pasang backlink ke post ini, kalau Anda mau berbaik hati, tolong backlink-nya jangan dihapus, ya! :D




Donasi Anda akan sangat berharga untuk Kami




ATAU di
LibertyReserve
U2815283


0 comments em “Membuat Buku Tamu Tersembunyi”

Post a Comment