Tuesday 19 June 2012

Cara Menyembunyikan Chatbox

 
     Jujur aja banyak banget bloger yang memosting artikel seperti ini=>Cara Membuat Chatbox Tersembuyi, Cara Menyembunyikan Buku Tamu Chatbox/Shoutbox dll. Tapi kebetulan temen ane naya gimana ya cara menyembuyikan chatbox.. nah kebetulan ni hari ane blon kepikiran pengen posting apa'n yaudah deh posting tips bloging kaya gini ajah hihi^^

Okok langsung aje kita ke TKP..
Nah pada pagi ini ane pengen kasih pada agan2 Script buat menyembunyikan  chat box atau shout box, perbadaan'ya yang satu mengunakan knop/ tombol yang membuka ke'samping ketika di kik N yang kedua engan cara Open Close..

CEKIDOT====>

Berikut Script
1.===>Dengan menggunakan tipe buka tutup ke samping (knop):

<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('http://b.imagehost.org/0611/buku-tamu.png') 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">

copy SCRIPT CHAT BOX / SHOUT BOX anda di sini

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

2.===>Dengan menggunakan tipe Open Close, scriptn'y dibawah ini:

<style type="text/css">
.gb_fixed{
position:fixed;
top:0px;
right:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:1px solid #004831;
background:#00fcefff;
padding:5px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style="color:red">[ Tutup boss ]</b></a></div>

copy SCRIPT CHAT BOX / SHOUT BOX anda di sini



</td></tr></table>

</div>
<script src="http://sites.google.com/site/copycatgroup/Home/jsfile/hiddengb2.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" style="border:0px" src="http://i51.tinypic.com/2meeej8.gif"/>
</a>
</div>



Nah ketika sudah agan cuma perlu tambah HTML/javascript tp nanti jgn kasih judul yahh
mudah kan...

Smoga bermanfaat yah....^^

8 comments:

  1. sama2 maz imron... semangat truz yahh^^

    ReplyDelete
  2. yes masuk tipi. yes yes..!

    muakakakaka.. maklum ane dikit ndeso gan..
    bruakakakak

    -= MaZ RyO =- top markotop *_*)_b

    ReplyDelete
  3. hixhix yoo'ra popo tapi... ya ojo d'keto-keto'e ndeso'ne
    huahahhahaaha^^

    okh tanks yahh.. udh koment.

    ReplyDelete
  4. mantep mas, ane dah nengok blog2 lain gk ada yang top markotop, cuma disini ane bisa. maju terusa mas :))

    ReplyDelete
  5. Masih agak bingung mas cara pakenya :-/

    ReplyDelete
  6. sheep dehh buat mass black project^^ maju terus pantang munduryah...
    coz diblakan mas ada tembok hihi^^

    salam kenal

    ReplyDelete
  7. waaah mas banyak membantu saya, saya newbie, jadi agak ngerti nih sedikit-dikit, trimakasih yaa

    ReplyDelete