Cara menyembunyikan Chatbox

Trik berikut adalah bagaimana menyembunyikan chatbox
Ada berbagai macam cara bagaimana menyembunyikan chatbox,diantaranya dengan knop membuka kesamping ada juga dengan cara open close. keduanya sama2 bagusnya bisa membuat ruang blog kita menjadi lebih fress lebih lega ketimbang memasang chatbox yang tampilannya di home page bisa mengambil banyak ruang. jadi lansung saja kita sama belajar bagaimana cara menyembunyikan chatbox.



Cara pertama dengan script tampilan seperti yang saya gunakan saat ini

1. Pertama, login ke akun  blogge.
2. Di bagian dasbor klik menu tata letak.
3. Tambah Gadget
4. Kemudian Copy-Paste kode berikut di gadget baru yang telah anda buat tadi. 

<style type="text/css"> #hitsukeFX{ position:fixed; top:50px; z-index:+1000; } * html #hitsukeFX{position:relative;} .hitsukeFXtab{ height:550px; width:35px; float:left; cursor:pointer; background:url('http://i51.tinypic.com/2meeej8.gif') no-repeat; } .hitsukeFXcontent{ float:left; border:2px solid #ffffff; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background:#000000; padding:10px; } </style> <script type="text/javascript"> function showHidehitsukeFX(){ var hitsukeFX = document.getElementById("hitsukeFX"); var w = hitsukeFX.offsetWidth; hitsukeFX.opened ? movehitsukeFX(0, 40-w) : movehitsukeFX(40-w, 0); hitsukeFX.opened = !hitsukeFX.opened; } function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} } </script> <div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div> <div class="hitsukeFXcontent"> <!-- Kode Shoutmix mu Disini -->

SCRIPT CHATBOXNYA DISINI

<div style="text-align:right"> <a href="javascript:showHidehitsukeFX()"> [hide] </a> </div> </div> </div> <script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script>

Cara kedua adalah dengan menggunakan script berikut

<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>

SCRIPT CODE CHAT BOX DISINI


</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>

#Update Script :

<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/AVvXsEi4VRCD120yulK4trJVqC1NZ4d2lKmcFuJPPv5gTp3seDi4MCB0qsLV5K2k7PLVrpWKrVGHizjUIh9FRylqp41vjasvMCnGaZkTd1ozcAbmanOd4qGMHrNblpR70N4rYAxlSY9JKjgNMek/s1600/cbred-LEFT+copyasasd.png') no-repeat;
}
.gbcontent{
float:left;
border:6px solid #de7300;
background:#F5F5F5;
padding:5px;
}
</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">

Ganti Dengan Code Script Kamu



Get This <a href="http://aggysuckandfuck.blogspot.com/2011/06/trik-berikut-adalah-bagaimana.html">Gadget</a></div>
<div style="text-align: right;">
    <a href="javascript:showHideGB()">
    Close
    </a></div>

    </div>

    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (30-gb.offsetWidth).toString() + "px";
    </script>

Dua contoh Script diatas tugasnya sama yaitu menyembunyikan chatbox,yang membedakan proses kerjanya... seperti yang saya bilang tadi ada yang membuka kesamping dan ada dengan gaya open close.
Untuk selanjutnya silahkan sobat blogger praktekkan saja. 

Artikel Terkait