Cara Memasang Widget Chat Box Legendaris CBOX yang Tersembunyi di Kanan Blogger

Tutorial Blog: Cara Memasang Widget Chat Box Legendaris CBOX yang Tersembunyi di Kanan Blogger

Salam Saungjiwa blog, daripada melonggo kebangun tidur sobat lebih baik kan buat update artikel. Coba sobat Fikri dari jaman internet masih bisa didaparkan dari warnet, muda mudi pada baru taunya game PointBlank, Facebook dengan GoFisihingnya, Blogger masih ngerayap dikit bangget tahun 2012an awal sobat, nih platform udah nonggol sampai era AI sekarang 2026, apalagi kalau bukan CBOX Live Chat.  Dulu, disetiap blog yang muncul gak sah kalau gak pasang widget ini, bukan blog namanya kalau gak ada chat satu ini, iya kan para suhu blogger lama..😅😂

Nah kali ini saya akan bahas cara memasang widget chat box legendaris ini yang akan tersembunyi di sidebar kanan Blog. Dan keluar masuk ketika sobat klik ikon chat box-nya. Caranya sangat gampang kok sob, ikuti langkah-langkahnya dibawah ini, sembari mengingat masa lama..wkwkwk😂.

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 mudah kok tinggal masukin email pada box Enter your email address to create your Free Cbox, langsung saja masuk ke situs Legendari 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/AVvXsEgwAki0q-wyKD-_hxifYSAh31ydROHF6qKtB4YiduibrXai7sgPTlWFdUn3js7DWi1y7ZSeWro3IBxbQDwy8Y-PH33ePspj0bYYKfkMHzOVgip1yBQcVpOEcMZVObtOdK2moUVISMXS-s8/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://regibrader-free.blogspot.com/2013/02/cara-memasang-widget-chat-box-yang_18.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.

Url Gambar Lainya:

	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhzxgsqFBZcJu00R9BqLU-OJii2svO27cQnTL2b6_WQq_-7NFaTMnNogAV22VEDuPZK_lq0qaWjZRvVDJKtiwlWDUwiq4T9f6qGPwbzTzPmGtewAqRV5YDfr3d65ReZbNrKgSWXL0gPlE/s1600/Chatbox.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-nhndnwA7BU3QteUA3ygPzeZt73886fQ1lnMA6Qfhcbb-5DbAbvqmf3-NzCTjlRzyiWR5Mi9zX8tZX5nO_IHb0pTlsrOX7KrZsZvQ02iWV6jr7ORt-PUtqcS56RvkP2BkzufnWtNVHwo/s1600/Bukutamu3.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLDuQvApu07pNY-ntQc3Bu1Jlli2hFCILuer1EgMTDutPUzqu3VzOoTM6nV_vW-2SRwdZgNcjSOUN6bxqq3Ypn88yOi55LQmegdJOV_8EX8fPBlhH7Cb8dEBKPiGYT1nE5Ur_zrJVx_gY/s1600/bukutamu2.gif
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgknGNW3LjKC08psNcPbiPjUWGozmBNc38WX-rj-iyBR-CWQFIxjUHRtFeerQitWSWzgRpWTl7ylvE8M4c3OszxaXGJ4G-GsWSqVHJ8gfm-0G-cyA3uD92kMj9U2srxECpOq3u-jMDtZU0/s1600/bukutamu5.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiZpVk82XwmFem24fmmOUMFv8cXbaw3XUVvIQHRxdBP-lf6-y_AGA7bUQmnNc0u6fxDsmd-mG_u3EF8repigNV7GZ9Irw5N79TDw2T_RRp9Vyxaz9Zdkln08HSlV1LtZ_8KVYsRsHgiuk/s1600/2131wkl.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSIQrba4DlegS-7RtCZqEcNGVamkLwuay0bzc05-s4q3jee3rvpJCuE3ZWWyLTSC4WRkXnKUDkkHGlPFOq-FaAQtGxmm-weu3Lt3S2gxT-SdVc1dxtveTOLAnyBL6kbVHmbd25plbl-c8/s1600/bukutamu4.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhYhCXuu1uzkzPiRDancYqKDHG05HxdosmjTHodXvzohIFUgjtS3nlp_ZvEu0tNZGKtcI86Z4JPQ-6chs2dp7klcJjtrcQopU364uiqHgoi4zOMf0O9hwLcHkclqxPFhJc5vCzD44H_Rc/s1600/BukuTamu1.png

10. Klik Simpan dan selesai. Lihat Hasilnya.

Maka akan nampak seperti gambar dibawah ini, gimana nostalgie bngget kan..😅 selamat mencoba mengaplikasikan di blog kesayangan sobat semua.

Demikianlah artikel singkat saya kali ini tentang "Cara Memasang Widget Chat Box Legendaris CBOX yang Tersembunyi di Kanan Blogger" Semoga dapat diambil manfaatnya untuk para pengguna blogger semuanya. Akhir kata saya ucapkan terimakasih telah berkunjung ke Saungjiwa Blog ini, semoga teman teman semua dapat berkreasi dengan tutorial yang saya tampilkan. 🙏 

Berkomentarlah dengan Sopan, Sara, SPAM akan dihapus...