Membuat Buku Tamu Tersembunyi



Widget Shoutmix atau Buku Tamu ini memang cukup banyak kegunaannya,selain untuk sekedar sapa menyapa antar pemilik blog, juga dapat untuk pesan konfirmasi, dan memberitahukan sesuatu kepada pemilik blog,dari segi fisiknya sih lumayan makan tempat,jadi saya buat saja tutorial ini guna menghemat tempat untuk widget - widget penting lainnya...OK dah tanpa basa - basi lagi kita mulai tutorialnya...





  1. Login ke akun Blogger anda.
  2. Pada Tab, pilih Rancangan > Edit Laman.
  3. Kemudian Add Gadget / Tambah Gadget pilih HTML/Javascript.
  4. Jika sudah silahkan masukan kode dibawah ini ke dalam jendela HTML/Javascript.


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

    .gbtab{
    height:100px;
    width:30px;
    float:left;
    cursor:pointer;
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcuK2Zs4TKvdnrDYO9Xj2Sojm0PmWp-Oyq_xCup6weWyn74sxz2EgrOWrQjMJz7OguBw6bG9g7rY7zndikiwmLoxeWh9TBnI4Kt-X5b8q3g5uJIi2FxV3-GEgAFSKCEHUdYltpZB0UqMec/') no-repeat;
    }
    .gbcontent{
    float:left;
    border:2px solid #A5BD51;
    background:#F5F5F5;
    padding: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">

    Letakkan disini kode Shoutbox Anda

    </div>

    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (30-gb.offsetWidth).toString() + "px";
    </script></div>
Terakhir simpan dan lihat hasilnya,untuk tinggi dan lebar bisa anda atur sendiri...
tulisan berwarna merah ganti dengan kode Shoutbox anda.

Tidak ada komentar:

Posting Komentar