• River-Creative
  • River-Creative
  • River-Creative
  • River-Creative
  • River-Creative
  • River-Creative
  • River-Creative

Posted by : Unknown Senin, 18 November 2013


Beberapa waktu lalu saya saya bahas cara buat widget chat box di blog. Nah kali ini saya akan bahas cara memasang widget chat box yang tersembunyi di kanan Blog. Dan keluar masuk ketika sobat klik ikon chat box-nya. Caranya gampang kok sob, ikuti langkah-langkahnya.
Yang pertama dan utama adalah sobat terlebih dahulu harus mempunyai kode html chat box tersebut. Salah satu caranya adalah dengan mempunyai akun pada situs cbox. Untuk langkah-langkah pembuatan akunnya sobat bisa klik disini. Atau langsung saja masuk ke situs cbox, klik disini.
OK, jika sobat telah mendapatkan kode html-nya, langsung saja sob ini dia langkah-langkahnya:

1. Masuk akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik tambah gadget di posisi mana saja.
4. Pilih HTML/Javascript.
5. Masukan kode html berikut.


<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:400px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4sDqQsoqQ_TUo4rNXB3WTX8dcylhpnfpjMyIHumH-uzvm0SNQVw3m2GlBiDStiyiiopTO9zGoc3n5zj1d0Torvz10ALBI1W_sXCq94deyxHJQ9EcfXR0Y_fU-z8Z1eiA8tezdkRPPx_U/s1600/Bukutamu6.gif') no-repeat;}.gbcontent{ float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</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">

MASUKAN KODE CHAT BOX DISINI

<div style="text-align: center;">
<span style="font-size: 10px;"><span style="font-family: "Trebuchet MS",sans-serif;">Mau Widget Ini? <a href="http://river-creative.blogspot.com/2013/11/cara-memasang-widget-cbox-chat-box.html" target="_blank">Klik Disini</a></span></span></div>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>


6. Atur ukuran dan posisi pada kode berwarna biru.
7. Ganti tulisan warna merah dengan kode html chat box sobat.
8. Ganti URL gambar pada kode warna ungu dengan gambar yang sobat inginkan. Namun bila sobat tidak menggantinya hasilnya akan seperti berikut.
9. Atur warna background dan warna border pada kode warna hijau.

Tombol Chat Box

Url Gambar Lainya:

Tombol Chat Box https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG5Vn301gRHqOd98nZonrSOQRmfAWvh7vZhIkxWnuVjyjn7F7UNtvoLpBDTUTFvKWm-dnLM8goEyrPcvlm3Ebu6TyFnqAxd-ca3DbZZo4CRpAfV8fYZSgh1QB55R6r7qicca0FZQlJ7nI/s1600/Chatbox.png
Tombol Chat Box https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3tJyIDZPSJBrieJGHtWhlEBbOS4a4vuXRP9uaYArlu1WhdlOsQ0SlUF-esTkxVgMiNRYXA6GeDhAzXsy3CQ2qi09p4lcZF4IVhrd29A19K18ufkoXsm42z9LvXyP1PMEJXH8K7MX5v-Y/s1600/Bukutamu3.png
Tombol Chat Box https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTeIYKzo7ZWZpezpex84rXknELTfNBzHtwfd1Ruc1BCkQT4oWQT327taWnFaR0zfm_2ODnDEfkCimpfCNXyqU8oQiRngsO6-9J9K-GbygZ0y_K3B2dJkEQJq79OMZYJAUpJhJMNonx8oQ/s1600/bukutamu2.gif
Tombol Chat Box https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdOqZaMdCmkXWRXJ-Mq6M9BaEVLjC18qpxHAbud3rh8elYF8XR8mf9L99R6B85Wu26qcqAg8QD_-eKyMq4TIxZ8H9iPkgHXzSu7ajFNVZfalk4D202S-EkzKLq84niXIl40jjkyvqiuEk/s1600/bukutamu5.png
Tombol Chat Box https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdxFJADZLF8WMmn6vR1Np45urpJunA9xZEcZjPfhvOmUhfsH8dOJ3F3q4pChX9QRatn7xJ9QjFx4EmjqzL2SZxaMR5cIx_-fG1j0Gf8wAS9PM6okb3GiJ6R2sOwc15Q2cfQeB4RgtaE78/s1600/2131wkl.png
Tombol Chat Box https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjetlKuSCJUResWRvOboL0GOBqFiTxAtvpvDCjvvwaFqfNMqJpvmPFUtvpU4PFz7EIydWLBYsl-cVUUFfQ3NBbm4E2iTNr2YZt6yHXAUIYmXZe0kNLwESF6kj3X9ihdkxV4TKjPUfzRavY/s1600/bukutamu4.png
Tombol Chat Box https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsKlYXW-JyZyWBJTY_5M2awRR1TXJ5gZNE11visyM6NnI6LvDNBVfLBKTjWJ33DF70cKdPpLcOmVxoM4ynlxh82NO6oZTpvTTE6W2Y_HMR9dM5Qknuf6QIAJ3UbC19VEvXNR8A06qgv5I/s1600/BukuTamu1.png

10. Klik Simpan dan selesai. Lihat Hasilnya.

Leave a Reply

PERATURAN

[+] Sebelum Comment Follow Blog
[+] No SPAMING
[+] Berbicara Yang Sopan

Subscribe to Posts | Subscribe to Comments

Banner

ADS

Labels

Diberdayakan oleh Blogger.

Copyright © 2014 River-Creative- River Creative - Powered by Blogger - Design by Kink Exclusive. - original by Djogzs

Perhatian...!!!

1. Gunakan Google Chrome Agar Blog Terlihat Maximal.

2. Dilarang Mencuri Berbagai CSS Yang Saya Pakai.

3. Harap Share, Follow, dan Berkomentar.

4. Sekian Dan Terima Kasih.