Cara Membuat Bukutamu tersembunyi Versi TERBARU

Membuat Chat Box ato Shoutbox tersembunyi? Maksudnya? kalo tersembunyi ntar gag ada yang ninggalin pesan dumz?? Bukan gitu sob,, maksudnya, Shoutbox disembunyikan di sisi browser, jika Button ditekan, maka Chat Box nya bakal keluar,, Contohnya? Liat aja di sebelah kanan, Ada tulisan "CHATBOX" dengan style logo Naruto, Coba kamu klik, ntar ChatBoxnya bakan nongol.
Nah, kalo bikin kayak gitu?
Ada dua macam nih,, ada yg disebelah kanan, ada yang dikiri, tersera pilih yang mana, (Kebanyakan sih pake yang sebelah kanan,,)
Neh caranya:

Chatbox Melayang Disebelah Kanan

Ne buat yang mau disembunyiin disebelah kanan, contohnya kayak punya aku tuh,, di kanan,,
Copy dulu Script ne Di CSS kamu, (Gag tau CSS?)
1. Masuk ke Blogger kamu, pilih Tata Letak, Edit HTML.
2. Trus Copy kode dibawah ini, tepat diatas kode ]]></b:skin>

/*-- Right-Float Chatbox DarkArd.blogspot.com --*/
#DADcr{position:fixed; top:50px; z-index:+1000}
* html #DADcr{position:relative}
.DADcrtab{height:125px; width:30px; float:left; cursor:pointer; background:url(http://lh3.ggpht.com/_GaKwmMcf4N4/TSKIXCAopTI/AAAAAAAAD_M/2pHBa3Gzb5w/DADrchat.png) no-repeat}
.DADcrcontent{float:left;border:2px solid #db4b0c; background:#000000; padding:10px}
.DADcr-close{font-size:13px}
.DADcr-close{color:#db4b0c}
.DADcr-close a{text-decoration:none}

3. Trus Pada Elemen Laman, Klik Tambah Gadget, Pilih HTML/JavaScript, trus masukin kode berikut:

<!-- Float Chatbox space-blogg.blogspot.com Code Start -->
<script>
function showHideDADcr(){
var DADcr = document.getElementById("DADcr");
var w = DADcr.offsetWidth;
DADcr.opened ? moveDADcr(0, 30-w) : moveDADcr(20-w, 0);
DADcr.opened = !DADcr.opened;
}
function moveDADcr(x0, xf){
var DADcr = document.getElementById("DADcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
DADcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveDADcr("+x+", "+xf+")", 10);}
}
</script>
<div id="DADcr">
<div class="DADcrtab" onclick="showHideDADcr()"> </div>
<div class="DADcrcontent">
<center>
<!--CHATBOX KAMU DISINI-->

</center>
<br />
<div class="DADcr-close">
<Script type='text/javascript' src='http://www.fileden.com/files/2009/11/17/2654961/My Documents/DADflchat.txt'></Script>
<span style="float:right">
<a href="javascript:showHideDADcr()">
[Close]
</a></span></div>
</div></div>

<script>
var DADcr = document.getElementById("DADcr");
DADcr.style.right = (30-DADcr.offsetWidth).toString() + "px";
</script>
<!-- Float Chatbox space-blogg.blogspot.com Code End -->

4. Save Dah,,,

Chatbox Melayang Disebelah Kiri

Ne buat yang mau disembunyiin disebelah kiri,
Copy dulu Script ne Di CSS kamu, (Gag tau CSS?)
1. Masuk ke Blogger kamu, pilih Tata Letak, Edit HTML.
2. Trus Copy kode dibawah ini, tepat diatas kode ]]></b:skin>

/*-- Left-Float Chatbox DarkArd.blogspot.com --*/
#DADcl {position:fixed;top:50px;left:0px;z-index:+1000;}
* html #DADcl {position:relative;}
.DADcltab {height:125px;width:30px;float:left;cursor:pointer;background:url(http://lh3.ggpht.com/_GaKwmMcf4N4/TSKIXMZgWOI/AAAAAAAAD_Q/2tGNSNYWd3A/DADlchat.png) no-repeat;}
.DADclcontent {float:left;border:2px solid #db4b0c;background:#000000;padding:10px;}
.DADcl-close {font-size:13px}
.DADcl-close {color:#db4b0c}
.DADcl-close a {text-decoration:none}

3. Trus Pada Elemen Laman, Klik Tambah Gadget, Pilih HTML/JavaScript, trus masukin kode berikut:

<!-- Float Chatbox space-blogg.blogspot.com Code Start-->
<script>
function showHideDADcl(){
var DADcl = document.getElementById("DADcl");
var w = DADcl.offsetWidth;
DADcl.opened ? moveDADcl(0, 30-w) : moveDADcl(20-w, 0);
DADcl.opened = !DADcl.opened;
}
function moveDADcl(x0, xf){
var DADcl = document.getElementById("DADcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
DADcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("moveDADcl("+x+", "+xf+")", 10);}
}
</script>
<div id="DADcl">
<div class="DADclcontent">
<center>
<!--CHATBOX KAMU DISINI-->
</center>
<br />
<div class="DADcl-close">
<span style="float:left">
<a href="javascript:showHideDADcl()">
[Close]
</a></span>
<Script type='text/javascript' src='http://www.fileden.com/files/2009/11/17/2654961/My Documents/DADflchat.txt'></Script>
</div>
</div><div class="DADcltab" onclick="showHideDADcl()"> </div>
</div>

<script>
var DADcl = document.getElementById("DADcl");
DADcl.style.left = (30-DADcl.offsetWidth).toString() + "px";
</script>
<!-- Float Chatbox space-blogg.blogspot.com Code End -->

4. Save Dah,,,


Trus Coba liat hasilnya,,,

Artikel Terkait:

Posted in: Tutorial Blog