Cara Menyembunyikan Chat Box dan kode Icon chat Box format .gif

Salam Bloger’s untuk kawan2 Bloger semua…..

Cara Menyembunyikan Chat Box dan kode Icon chat Box format .gif. Sebenarnya saya sudah lama pengen share tentang topik ini, namun ada sedikit kendala sehingga baru terealisasikan sekarang. Langsung saja, apa yang akan saya sampaikan ini tentunya pasti sudah banyak di sahare oleh kawan-kawan bloger yang lain, dan sayapun mendapat ilmu kanuragan ini juga dari kawan-kawan bloger, tetapi yang membuat saya ingin sekali sahare masalah ini karena saya tidak semata-mata Copas atau ngambil hasil keringat kawan-kawan bloger yang lain, tetapi apa yang saya dapat dari kawan-kawan menambah pengetahuan serta mengasah kemampuan saya. Dalam hal ini saya akan berbagi hasil masaknya saja ya…mumpung baik hati…. heee…

            Tentunya kawan-kawan sudah tau bagaimana cara kerja Shot box atau chat box atau apalah namanya, yang pasti tempat chat yang ada di blog kita  dan dapat disembunyikan ketika tombol shot boxnya di klik…(kalau masih belum ada, ya silahkan bikin terlebih dahulu…)

Dan kali ini saya akan membagikan tombol atau ikon yang biasa diklik untuk menampilkan an menyembunyikan shotbox kawan-kawan dan yang saya bagikan ini berupa ikon dengan format .gif alias warna hurufnya bisa berubah-rubah. Semoga kawan-kawan paham apa yang saya sampaikan, maklum bahasanya sedikit kacau….heee

            Ya, mohon maaf kalau pengantarnya terlalu panjang, untuk lebih jelasnya langsung saja ke TKP… 

          

Kode untuk menyembunyikan Shot Box

Copy code di bawah ini ke Gadged Java Scrip/HTML......

<style type="text/css">

#gb{

position:fixed;

top:30px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:300px;

width:49px;

float:left;

cursor:pointer;

background:url(' http://i1211.photobucket.com/albums/cc424/ande089/Abu2-1.gif') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #938C8C;

background:#F5F5F5;

padding:5px;

}

</style>

<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 49-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 Kode Shot Box Kawan2 di sini)

<div style="text-align: right;">

    <a href="javascript:showHideGB()">

    Close

    </a></div>

    <script type="text/javascript">

    var gb = document.getElementById("gb");

    gb.style.right = (49-gb.offsetWidth).toString() + "px";

    </script>

Catatan: 

1) Untuk mengganti ikon silahkan copas alamat/kode gambar yang ada di bawah dan  

     ganti kode yang saya beri warna hijau, dan untuk border paste pada kode

    yang berwarna ungu.

2) Jika kawan-kawan ingin menggunakan ikon model yang pertama kawan-kawan 

    harus mengganti angka yang di garisi warna kuning (49) menjadi 28 (Wajib), namun

   apabila kawan-kawan menggunakan model ikon yang no. 2, angka yang

   saya garis kuning tidak perlu diganti.

      

Untuk Icon dan warna bordernya silahkan kawan-kawan lihat di bawah ini:

1. Model yang Pertama (5 buah)

    Tulisan : Tinggalkan pesan 

Kode : http://i1211.photobucket.com/albums/cc424/ande089/abu2.gif

Warna border : #938C8C

Kode : http://i1211.photobucket.com/albums/cc424/ande089/Blue.gif

Warna border : #003e82

Kode : http://i1211.photobucket.com/albums/cc424/ande089/green.gif

Warna border : #008232

Kode  : http://i1211.photobucket.com/albums/cc424/ande089/Red.gif

Warna border : #790909

Kode : http://i1211.photobucket.com/albums/cc424/ande089/Ungu.gif

Warna border  : #8B01A0

2. Model yang Ke Dua (5 Buah)

    

    Tulisan : My Chat Box

Kode  : http://i1211.photobucket.com/albums/cc424/ande089/Abu2-1.gif

Warna border : #938C8C

Kode  : http://i1211.photobucket.com/albums/cc424/ande089/Blue-1.gif

Warna border : #003e82

Kode   : http://i1211.photobucket.com/albums/cc424/ande089/Green-1.gif

Warna border : #008232

Kode   : http://i1211.photobucket.com/albums/cc424/ande089/Red-1.gif

Warna border : #790909

Kode   : http://i1211.photobucket.com/albums/cc424/ande089/Ungu-1.gif

Warna border  : #8B01A0

Demikianlah share singkat saya tentang bagaimana Cara Menyembunyikan Chat Box dan kode Icon chat Box format .gif , semoga bermanfaat bagi kawan2 semua. 

                  


  Share By :