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:

Tutorial Blog

• Cara Membuat Link Bergeser
• Cara Membuat Menu Warna Warni
• Cara Memuat Spoiler Untuk Blog
• Headline News KATA SENDIRI
• Cara Memasang Widget Page Rank dengan mudah dan cepat
• Cara Pasang Related Post With thumbnails
• Pasang Navigasi Breadcrumb di Blogger Diatas Posting
• Efek For Blog
• Cara Membuat Backround Pada Judul Postingan
• Cara Membuat Link Beraneka Rgam
• Cara Membuat Kode warna Versi 2
• Cara Pasang Sexy Social Boommark
• Cara Membuat Menu Tab View
• menambahkan effect jquery link nudging pada tabel
• Cara Pasang Top Komentartor
• Tweety Bird Blogger Template
• Related post atau postingan terkait [With Tuhumbanail]
• Cara Mengganti Foto Profil Blog Dengan Animasi
• Cara Membuat Animasi Berjalan Dibawah tengah blog
• Cara Membuat Tag Cloud
• Cara Membuat Gambar ketika mouse diarahkan
• Isengin Pengunjung Yuk!!!
• Cara Menampilkan Judulnya Saja Ketika label di klik
• Cara Pasang Slide Post

Posted in: Tutorial Blog