Cara membuat Hidden Chatbox

Untuk Chat box mungkin dari banyak dari orang awam pun tahu, tapi dalam hal ini adalah sebuah chatbox yang hidden.
Lalu, apa itu hidden chat box?
Jadi, hidden chat box adalah sebuah chatbox yang disembunyikan dalam blog yang bisa berada di sebelah kanan ataupun sebelah kiri blog dan posisi itu terserah pada selera anda peletakannya.

Langsung saja pada tutorialnya dan berikut ini adalah langkah-langkahnya :
1. Login akun blog anda
2. Masuk pada Tata letak (layout)
3. Pilih Elemen halaman (page element)
4. Klik Tambah gadget (add gadget)
5. Pilih HTML/Javascript
6. Masukkan kode berikut ini dalam kolom yang tersedia

NOTE: disini saya memberikan 2 jenis hidden chatbox yaitu Hidden chatbox (kiri) dan hidden chatbox (kanan)

Berikut ini adalah kode untuk hidden chatbox (Kiri):

<!-- left hidden chatbox by http://anima-generation.blogspot.com START -->
<style>
#hcl {
position:fixed;
top:100px;
left:0px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVByv_KiVbH007DoBGcR58RddwkFiiTP3z05kpikaE0uqlksmmGj9TeKnNkYZZ_Cz53pd282650Mbusbt8wNq-2rQE6HoSTmfn2FEzD8GVA2bi9v9N6n81hGKoKFOdbkBjb19-jPnv8xo/s400/cbred-LEFT.png') no-repeat;
}
.hclcontent {
float:left;
border:2px solid #790909;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened;
}
function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>
<div id="hcl">
<div class="hclcontent">

<!-- KODE SHOUTMIX ANDA -->

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<a href="http://anima-generation.blogspot.com/2010/04/cara-membuat-hidden-chatbox.html" target="_blank">
Get this widget!
</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcl()">
[close]
</a>
</span>
</div>
</div>
<div class="hcltab" onclick="showHidehcl()"> </div>

</div>
<script type="text/javascript">
var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
</script>
<!-- left hidden chatbox by http://anima-generation.blogspot.com END -->

Dan berikut ini adalah kode untuk hidden chatbox (Kanan)

<!-- right hidden chatbox by http://anima-generation.blogspot.com START -->
<style>
#hcr {
position:fixed;
top:100px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4R-js9bJ6ZBZpe-Zr1HD1lDkSdweaSrvvHWzUIHK4iVhLviRib7GwD04H_4InvizqUoE6NFXMhC7rzu-a9HM_OWvhdf-2AvlySXs8Cf1RzS6u4MPC5ROl-NJrNA090JLG320xKQJjCc/s400/cbblue.png') no-repeat;
}
.hcrcontent {
float:left;
border:2px solid #003e82;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}
function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>
<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent">

<!-- KODE SHOUTMIX ANDA DISINI -->

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<a href="http://anima-generation.blogspot.com/2010/04/cara-membuat-hidden-chatbox.html" target="_blank">
Get this widget!
</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcr()">
[close]
</a>
</span>
</div>
</div>
</div>
<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>
<!-- right hidden chatbox by http://anima-generation.blogspot.com END -->

Berikut ini adalah keterangan-keterangan kode yang mungkin akan sedikit membingungkan anda, tapi akan saya bantu jika ada kesulitan didalamnya:
1. top:100px adalah keterangan jarak icon hidden chatbox dari atas (top) sejauh 100 px
2. height:100px adalah tinggi (height) tampilan icon hidden chatbox yang sebesar 100 px
3. width:30px adalah lebar (width) tampilan icon hidden chatbox yang sebesar 30 px
4. background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4R-js9bJ6ZBZpe-Zr1HD1lDkSdweaSrvvHWzUIHK4iVhLviRib7GwD04H_4InvizqUoE6NFXMhC7rzu-a9HM_OWvhdf-2AvlySXs8Cf1RzS6u4MPC5ROl-NJrNA090JLG320xKQJjCc/s400/cbblue.png') no-repeat adalah icon hidden chatbox yang akan berguna untuk menampilkan chatbox yang disembunyikan
5. border:2px solid #003e82 adalah warna (solid) dan ukuran border yaitu #003e82 dan border sebesar 2 px
6. background:#f3f6f7 adalah warna background pada chatbox saat ditampilkan

Berikut ini adalah icon hidden chatbox dan warna border yang serasi dan bisa anda gunakan dalam hidden chatbox anda :


URL Gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAWuA__UU-61wJ2Why8R3fV95a1KzVca2xEnFBKM2m9TM0JsOzTULkZNXLZffOK8Ua9M06OnmkQ7j7gJZXfqWLH7x5U1mHSUtvPrv6EaUW35hmRdOG2C6LvXxDis0Pv6DbWuFgC_Qx82k_/s1600/cbblue-2.png
Warna border #0079a0







URL Gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis8r51fzlhr2HzSHl-aZEvvpjMjSoqSlkvSZ8WeLll1xy6k1viurLKu8-XqubvX3XhrvhVpYDdQpxgxYH6NUKUFJN9lMbcV3rMh7OP6BZHVsdbE6gKSQzHMgX8RiPH2qpP5MnHUprJeOjN/s1600/cbblue.png
Warna border #003e82






URL Gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhufKS6IDo85nVuQ31VgBOKVu1Avd1jDRQz36jxiccztkI5gk_28c0IPjRF1VTqhQf5nXhPq5Y0kLcY_CT2xPO3YB_2gic9NTeDlr23mneokVCvhiohxdviD2MjzZEIkFyq_ZUvhclB4AI3/s1600/cbgreen.png
Warna border #008232






URL Gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGzT59oxV7J0g79nC2pQFXAEDs3aCEqdYTXw7cAqlKKBjGEzC22YRncnry8ZlTbBDGHDnDnNbB5q1f8uyHUtQoy57xzJdiXecB9FTyqsQq1fGM58QfiAQn0rqNwfxao-L4yQaOXis-LsOE/s1600/cbyellow.png
Warna border #aca500






URL Gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKctKZULeKLoTdGRTECIVxOf380P5NeQggBj2ZeBtqC3po9NQXpgIbim1689HpkVRz874hm4saZdKaGrIovYhHzwHDDpz1MTGtf3g7LvYG7vCNvX6a6VNL2vWTWiXoJL_vzTiUjvw1-omK/s1600/cbred.png
Warna border #790909

SELAMAT MENCOBA

Artikel terkait dengan kategori ini:

Tutorial blog

• Menampilkan iklan di atas postingan setelah read more diklik
• Menampilkan gadget di halaman tertentu pada blog
• Cara membuat page navigasi pada blog
• Cara memasang kode warna pada blog
• Membuat tampilan iklan yang tiba-tiba muncul pada blog
• Panduan Setting domain .co.cc
• Cara membuat daftar isi versi simple
• Cara membuat daftar isi versi accordion
• Membuat menu spoiler pada blog
• Cara menghilangkan tulisan UNDEFINED pada blog
• website toolbar dengan wibiya
• Memasang emoticon yahoo kotak komentar
• Membuat tombol auto install pada blog
• Menampilkan foto pada kotak komentar
• Menambahkan fitur reply pada komentar
• Cara membuat tombol Hidden widget
• Cara membuat related post gambar
• Membuat related post / postingan tekait
• Cara memasukkan kode/script pada postingan
• Cara memasang status online/offline YM
• Tips promosi blog untuk menambah pengunjung
• Cara membuat "read more..." dengan cepat

Fasilitas berlangganan artikel di anima world telah tersedia (FREE)

Silakan masukkan alamat e-mail anda lalu klik Berlangganan:

Delivered by FeedBurner