Selasa, 08 November 2011

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 .gifSebenarnya 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 :









Ditulis Oleh : Unknown // 09.08
Kategori:

8 komentar:

  1. tenkyu ommm... mampir age yah om......goog luck

    BalasHapus
  2. wah ane juga pake yang mode bginian gan, salam kenal & kompak :)

    BalasHapus
  3. Mas Wahyu: Sipz Bro... tenks atas kunjungan'na... kpan2 mampir ya... good luck

    BalasHapus
  4. Keren gan, tutorialnya juga menyediakan icon guestbook hasil karya sendiri.
    tp menurut sy metode ini buat loading blog agak beratan dikit ya gan, soalnya sy pernah pakai ginian..

    keep blogging gan.

    BalasHapus
  5. Chelonia: yupz... tenkz bat Comen'na...
    bnar juga sih, utk loding blog agak bratan,,, tp tu jg tergantung template yg qta gnakan jg (mnurut yg saya bca... hee) plus kneksinya gan... tpi untuk template sma java scrip bsa diprezz/di perkcil, spaya lebih ringan... mukin agan dah tau atau Bisa cek di: http://rayhanzhampiet.blogspot.com/2011/10/trik-untuk-mempercepat-loading-blog.html

    Ok... maf kpanjangan gan...heee... salam Bloger...

    BalasHapus
  6. Mantap-mantap Semakin berkembang Saja Buku Tamu Di Blog.. Semoga Maju Terus ya Mas..

    Salam Blogger :-* Sukses Selalu..

    Jangan Lupa Di Follow Kembali :D.... Hehehhe ;)

    BalasHapus
  7. Oidre: tenks Bro... Follow back suskses... kpan2 mampir lg ya...

    BalasHapus

Jika Anda berminat berlangganan artikel di ande089 blog, silahkan masukkan alamat email anda. Gratis..:

 

My Friends

Nast Alkitab Hari Ini

Blog Fans Ande089

"^_^ Di Like Ya Sobat ^_^"

×
Diberdayakan oleh Blogger.