Anima Team See what you want and enjoy the contents

Blog

29 Apr 2010

Cara membuat Hidden Chatbox

Diposting oleh A. Harfi A. di Kamis, April 29, 2010


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:

Fasilitas berlangganan artikel di anima world telah tersedia (FREE)

Silakan masukkan alamat e-mail anda lalu klik Berlangganan:

Delivered by FeedBurner

Label:

1 komentar:

Cempakamelati mengatakan...

Terima kasih..

9 November 2010 pukul 02.11

Posting Komentar

Langganan: Posting Komentar (Atom)

Join Us

About me

Foto Saya
A. Harfi A.
INILAH AKU. seorang remaja yang sedang dalam masa pertumbuhan dan sering berharap banyak hal-hal indah dan berpikir bisa mendapatkannya tanpa adanya usaha yang keras, itulah impian. Aku hanyalah remaja biasa dengan kehidupan biasa namun aku hidup dari cita-cita besar yang selalu membayangiku. Aku bukan orang pintar, rajin juga tidak, apalagi genius, tapi kebalikan dari itu semualah yang dibicarakan kebanyakan orang tentangku, terserah kau mau berpihak pada siapa, akupun bingung. Jadi, aku pikir cukup sekian segala penghinaan sekaligus pujian yang mungkin bisa membuat kepalaku pecah karenanya. Sekarang waktunya aku ucapkan,"Selamat menikmati blog simple buatanku ini" :)
Lihat profil lengkapku

Find something else? Search here

The Generation Design by Insight © 2009