Header Ads

Cara Membuat Buku Tamu Show-Hide

Setelah Postingan Kemarin yang agak ditunda, Sekarang saya akan Membagikan Postingan dengan Judul, Cara Membuat Buku Tamu Show-Hide. Apa yang Dimaksud Show-Hide disini adalah Sebuah Chat Box yang Tampil Keluar Masuk di Sisi Browser yang dimaksudkan agar tidak Mengganggu Sebuah Halaman Pada Blog. Bagaimana Cara Membuatnya Mari Kita Bahas Disini Bagaimana Tahapnya.
Pertama, Mungkin Harus Login Ke Salah satu Penyedia Chatbox seperti Misalnya Cbox .
disini saya akan Membahas dengan Cbox.
Setelah Login, edit, pilih Designnya, Di Situs Tersebut, dan Kemudian Publish dan Get Code-nya.
Lalu Masuk Ke blogger.
Pilih Widget>> HTML/Jscript.
Lalu Paste Kode Berikut :

<style type="text/css">
    #gb {
    position:fixed;
    top:50px;
    z-index:+1000;
    }
     
    * html  
    #gb {
    position:relative;
    }
     
    .gbtab {
    height:130px;
    width:30px;
    float:left;
    cursor:pointer;
    background:url('http://1.bp.blogspot.com/-rlDqWeQyCcc/UC4j4aejzkI/AAAAAAAAAIU/2OSy7nzLZUw/s1600/GBanim.gif') 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">
     
   <!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www7.cbox.ws/box/?boxid=466569&amp;boxtag=nmmt17&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-466569" style="border:#000000 1px solid;" id="cboxmain7-466569"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=466569&amp;boxtag=nmmt17&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-466569" style="border:#000000 1px solid;border-top:0px" id="cboxform7-466569"></iframe></div>
</div>
<!-- END CBOX -->
     
    </div>
    </div>
     
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (30-gb.offsetWidth).toString() + "px";
    </script>

Ingat, ganti Teks yang Berwarna merah dengan Kode Cbox yang tadi Kamu dapatkan Di Situs Cbox
Kemudian Jika Kamu Ingin Gambar sampingnya diganti,  Ganti Teks Warna Pink dengan URL Gambar yang kamu Punya.
Jika tidak Punya Gambar Lain, Tidak Perlu Kamu Ubah Juga tidak Bermasalah

Sekian Postingan Kali Ini Moga Bermanfaat

2 comments:

  1. mampir balik sob.. mohon bantuan komentarnya di http://goo.gl/JqtCL makasih ^_^

    ReplyDelete
  2. oke sob..makasih dah mau mampir..,

    ReplyDelete

Powered by Blogger.