Tampilan Unik CBOX Chat Blogger Versi Gratis


Memasang chat box atau buku tamu (Guestbook) pada website (situs web) atau blog sebenarnya sih nggak penting-penting amat karena rata-rata 90% pengunjung blog enggan untuk meninggalkan jejak, toh seandainya ada paling kebanyakan juga memasang jejak iklan obat kuat sama situs togel.

Apabila hanya sekedar sarana komunikasi, blogger juga memiliki sistem chat berupa kotak komentar. Nah biasanya apabila ada pengunjung blog yang berniat chat atau sekedar meninggalkan jejak pasti mereka akan lebih memilih chat pada kotak komentar blog ketimbang menggunakan chat box.

Jadi saran saya tetap memasang Chat Box walaupun nggak penting karena saya sudah terlanjur bikin artikel Tampilan Unik CBOX Chat Blogger Versi Gratis ini, daripada informasinya mubazir...

Bercanda bro.. memasang chat box pada website atau blog merupakan salah satu fitur penting yang harus dipasang karena chatbox sebagai sarana berkomunikasi (chat) antara admin blog dengan pengunjung blog, pengunjung dengan pengunjung atau juga hanya sekedar meninggalkan jejak dan bersosialisasi antar sesama blogger saja. Dengan adanya chatbox pengunjung blog dapat langsung menuliskan pesan atau informasi singkat ketika berkunjung ke belog tersebut.

Pada kesempatan kali ini saya akan membahas tentang salah satu Chat Box menggunakan layanan dari CBOX yang cukup dikenal oleh kalangan blogger. Layanan CBOX sudah cukup lama ada sejak tahun 2004 dan masih memberikan layanan embed chat untuk bisa digunakan pada website atau blog pribadi secara gratis. Layanan embed chat dari CBOX juga ada yang berbayar dengan fitur yang lengkap, namun untuk pengguna blog pribadi saya rasa versi gratis sudah lebih dari cukup.

Pada versi gratis memang memiliki beberapa keterbatasan salah satunya pada tampilan chat yang terlihat monoton yang hanya tersedia beberapa tema yang bisa digunakan. Tapi jangan khawatir bro saya akan berikan informasi agar tampilan versi gratis dari CBOX bisa terlihat fantastis dan super premium ala codeflare. Contoh CBOX dengan modifikasi tampilan premium seperti yang digunakan pada blog codeflare ini yang ada disebelah kanan pada kotak Chat Box. Gimana super keren khan ? oke mas bro dan mba sis bagi yang tertarik untuk menerapkan trik ini bisa dilanjut ke tutorial untuk cara penerapannya.

Oke... sebelum memulai tutorial saya akan menjelaskan cara memasang CBOX pada website atau blog pribadi. Bagi yang sudah memasang CBOX bisa di skip dan dilanjutkan ke bab berikutnya mengenai cara modifikasi dari tampilan CBOX ini agar bisa terlihat unik dan menarik.

Informasi Singkat
Cbox Live Chat
Cbox adalah aplikasi web obrolan langsung tertanam untuk komunitas online, grup, dan acara streaming langsung. Dapatkan Cbox, dan pengunjung serta pengguna Anda dapat saling terlibat dalam percakapan real-time yang kaya.

Cbox menjaga pengguna di situs Anda dan membuat mereka kembali. Tanamkan Cbox Anda langsung ke situs Anda, atau akses dalam mode mandiri yang ramah-seluler.

Sama seperti setiap percakapan unik, demikian juga setiap Kotak. Berbagai macam tema dan opsi penyesuaian memungkinkan Anda membuat Cbox Anda tampak seperti yang Anda inginkan. Ubah warna, pilih font, dan unggah emotikon Anda sendiri untuk menjadikan Cbox live chat Anda sendiri.

Cbox versi gratis diperuntukan untuk grup kecil, penunjang aplikasi ringan dan dapat digunakan gratis selamanya.

Free Cbox Anda menyimpan 100 pesan, dan mendukung pemfilteran pesan, emotikon, dan tema khusus. Ini memberikan pengalaman media yang kaya dengan dukungan untuk avatar, autolinking, dan kode kotak.
Sumber : CBox



DAFTAR ISI
  1. Cara Pemasangan Widget Pada Blogger
  2. Modifikasi Widget Tampilan ChatBox
  3. Modifikasi Chat Box Emoticon CBOX
  4. Bonus Artikel [File Gambar Pendukung]
#1 Cara Pemasangan Widget Pada Blogger


Bagi yang belum tahu cara memasang chat box blogger menggunakan layanan dari CBOX silakan disimak tutorialnya di bawah ini. Cara ini juga bisa diterapkan untuk penggunaan website pribadi yang menggunakan platform blogger.

Cara Membuat Buku Tamu (Chat Box) CBOX

  1. Silakan kunjungi situs CBOX untuk mendaftarkan blog anda disitus CBOX dan mendapatkan kode embed chat box. Isi form data tersebut, centang checkbox agrrement dan kemudian tekan tombol Create my Cbox!.

  2. Selamat, akun Cbox anda sudah dibuat. Selanjutnya klik tombol Login untuk bisa masuk ke halaman akun Cbox anda.

  3. Isikan nama akun dan password yang tadi sudah anda buat kemudian tekan tombol Login.

  4. Setelah anda login kemudian tekan tombol Publish.

  5. Geser ke bawah untuk melihat kotak kode embed dan kemudian copy kode embed tersebut.

  6. Setelah mendapatkan kode embed dari Cbox kemudian Login ke blogspot untuk masuk ke dashboard blog.
  7. Pilih Tata Letak kemudian pilih Tambahkan Gadget.


  8. Pilih HTML/Javascript

  9. Taruh kode pada kotak widget, setelah selesai tekan tombol Save

  10. Selesai dan coba lihat hasilnya.

#2 Modifikasi Widget Tampilan ChatBox


Berikutnya adalah cara untuk memodifikasi tampilan dari widget chat box ini agar terlihat kece, unik dan menarik. Cara ini membutuhkan sedikit tambahan kode CSS dan gambar latar belakang yang akan digunakan.

Cara Modifikasi Widget Tampilan ChatBox


  1. Persiapkan gambar latar belakang yang akan digunakan dengan dimensi ukuran 335px x 191px.
  2. Copy-paste kode dibawah ini sesuai dengan petunjuk untuk penempatan embed kode Cbox.

    <div align="center">
    <div align="left" id="cboxdiv">
    <div id="cboxdiv-title">Chat Box</div>

    Taruh kode embed cbox disini

    </div>
    </div>

    <style>
    #mainCbox{
    background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbihav44qn2bmDP2b6FhpjeViz3xrvZWSchsmHWNP6oZo02D3rXyqQRnuGMadGIgdjK5zPdxZfhFy6WRV_b27BVGSk6nrbOtRxDtMxjml8h1E-Hf2-tA22JVcAGIu0VETgI8vAFgcqSNg/s1600/metalslugbg.jpg)no-repeat center / 100% 100%;
    }
    #cboxdiv{
    width:100%;
    box-sizing:border-box;
    padding:0;
    color: black;
    border:1px solid #0083da;
    transition:box-shadow .5s linear;
    }
    #cboxdiv:hover{
    box-shadow: 0px 0px 4px 1px grey;
    }
    #cboxdiv-title{
    font-family: 'Roboto', Tahoma, Verdana;
    font-size: 16px;
    font-weight:bold;
    padding:5px;
    color:#fff;
    margin-bottom:0px;
    text-align:center;
    box-sizing:border-box;
    text-transform: uppercase;
    background: rgb(109,179,242);
    background: -moz-linear-gradient(top,  rgba(109,179,242,1) 0%, rgba(84,163,238,1) 50%, rgba(54,144,240,1) 51%, rgba(30,105,222,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%);
    background: linear-gradient(to bottom,  rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 );
    }
    </style>
  3. Copy semua kode diatas dan masukan kode embed cbox anda pada lokasi yang sudah diberi keterangan. Taruh semua kode diatas tersebut pada kotak widget di blog anda.
  4. Simpan dan lihat hasilnya

KETERANGAN
Pada kode CSS :

#mainCbox{
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbihav44qn2bmDP2b6FhpjeViz3xrvZWSchsmHWNP6oZo02D3rXyqQRnuGMadGIgdjK5zPdxZfhFy6WRV_b27BVGSk6nrbOtRxDtMxjml8h1E-Hf2-tA22JVcAGIu0VETgI8vAFgcqSNg/s1600/metalslugbg.jpg)no-repeat center / 100% 100%;
}

untuk kode : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbihav44qn2bmDP2b6FhpjeViz3xrvZWSchsmHWNP6oZo02D3rXyqQRnuGMadGIgdjK5zPdxZfhFy6WRV_b27BVGSk6nrbOtRxDtMxjml8h1E-Hf2-tA22JVcAGIu0VETgI8vAFgcqSNg/s1600/metalslugbg.jpg merupakan kode URL gambar latar belakang yang digunakan pada widget chat box. Silakan anda ganti dengan URL gambar latar belakang yang akan anda gunakan.

Selanjutnya anda perlu mengkonfigurasi kode warna yang ada di panel admin CBox, pastikan pilihan warna untuk warna background di set ke transparent, seperti yang terlihat pada gambar di bawah ini. Silakan anda sesuaikan opsi kode warna lainnya untuk menyesuaikan dengan warna tema blog anda.



Setelah selesai silakan anda save agar konfigurasi bisa langsung diterapkan dengan menekan tombol biru dengan tulisan GO seperti yang terlihat pada gambar di atas.

Oce bos kalo dah selesai setting warna maka selanjutnya ganti emoticon standar CBox dengan emoticon animasi gif sesuai dengan yang anda suka. Ganti satu set biar serasi dengan modifikasi template CBox yang sudah anda buat... Cara merubah emoticon standar bawaan Cbox bisa anda baca pada bab selanjutnya.

#3 Modifikasi Chat Box Emoticon CBOX






Abaikan gambar diatas, gambar hanya pemanis saja.

Apabila anda sudah selesai modifikasi tampilan widget chat box di atas maka selanjutnya adalah cara mengganti emoticon standar Cbox dengan gambar animasi yang menarik. Pada tutorial artikel ini saya berikan contoh menggunakan gambar animasi GIF dengan tema dari game metal slug yang terkenal unik dan lucu.

Jika anda ingin menggunakan gambar animasi lainnya silakan saja, namun perlu diperhatikan ukuran file gambar dan dimensi gambar yang akan digunakan. Ukuran File dan dimensi gambar hendaknya berukuran kecil untuk mengurangi beban browser pengunjung karena tidak semua pengunjung blog memiliki akses internet cepat dan perangkat yang powerful.

Cara Mengganti Emoticon CBOX


  1. Masuk ke halaman akun CBOX anda, kemudian klik tombol Option setelah itu klik tombol Emoticon


  2. Woke selanjutnya klik pada kotak barisan pertama barisan icon yang terdapat tulisan Add... kemudian akan muncul kotak untuk memasukan URL gambar icon dan tombol dengan tulisan Choose a file.... Silakan anda pilih apakah memilih gambar menggunakan URL atau file gambar yang sudah ada di perangkat anda dengan menekan tombol Choose a file....

  3. Setelah selesai upload gambar maka akan muncul gambar icon disebelah kotak tersebut, silakan anda beri kata kunci yang mewakili dari gambar icon yang barusan anda upload. Lakukan langkah ini untuk mengupload gambar icon lainnya. Jika ingin menghapus gambar icon, anda tinggal mengklik pada kotak kata kunci dari gambar icon yang akan dihapus kemudian akan muncul tulisan Delete setelah di klik akan muncul tulisan Confirm Delete tekan tombol tersebut maka gambar icon akan dihapus. Anda juga bisa mengganti tulisan kata kunci dari gambar icon sesuai dengan yang anda inginkan.

  4. Setelah selesai dengan memodifikasi semua icon gambar maka langkah selanjutnya adalah menekan tombol Save yang ada diatas untuk menyimpan modifikasi icon yang telah anda buat.

  5. Selesai dan silakan anda coba untuk mengirim pesan dengan kata kunci spesifik yang mewakili gambar icon yang barusan anda buat, jika icon gambar terlihat maka anda sudah berhasil melakukan modifikasi gambar icon Cbox.

#4 Bonus Artikel [File Gambar Pendukung]


Harap dimaklumi sebelum bisa melihat link download file dibawah ini, silakan anda buka social locker terlebih dahulu dengan menekan salah satu tombol share yang ada di bawah ini. Terimakasih atas perhatian dan partisipasi untuk men-share artikel ini ke media sosial anda.

Demikian artikel blog tentang Tampilan Unik CBOX Chat Blogger Versi Gratis apabila ada pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.


Keyword


blog, blogger, blogspot, website, buku, tamu, guess, book, chat, box, widget, cbox, modifikasi, tampilan, unik, unique, keren, premium, gratis, merubah, membuat, bikin, kode, javascript, css, html, jquery, gadget, google, download, animasi, gif, game, icon, gambar, pic, picture, ikon, kumpulan, list, metal, slug

Incoming Search Term


Cara bikin animasi ikon pada chat box, cara merubah icon cbox, cara daftar layanan cbox, cara membuat buku tamu blogger, widget chat box blog, cara modifikasi tampilan chat box, buku tamu unik dan menarik, kode membuat buku tamu yang unik, CSS membuat buku tamu menarik, unique chat box for blogger, kotak chat pada halaman blogspot

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Pasang Widget ASTROLOGI Online Lengkap Terbaru

Gambar
A strologi berasal dari bahasa Yunani yang terdiri dari dua kata, yakni: "astron" yang artinya bintang dan "logos" yang artinya ilmu; jadi, astrologi adalah ilmu yang mempelajari tentang posisi bintang-bintang dan benda-benda luar angkasa lainnya, di mana benda-benda tersebut mempunyai keterkaitan dengan nasib, peruntungan, kepribadian, perilaku, asmara, interaksi, kondisi logis dan batin manusia. Astrologi menunjuk kepada yang mana pun di antara beberapa sistem pengetahuan untuk mengerti, dan menterjemahkan tentang kenyataan dan keberadaan manusiawi, berdasarkan posisi dan gerak-gerik relatif berbagai benda langit, terutama Matahari, Bulan, planet, dan lunar node seperti dilihat pada waktu dan tempat lahir atau lain peristiwa dipelajari. Bagi banyak astrologer, hubungan itu tidak perlu sebab musabab. Astrologi berbeda dengan astronomi, ilmu astronomi mempelajari tata letak bintang-bintang dan planet-planet pada sistem tata surya tertentu dan tidak dikaitkan dengan ...
Baca selengkapnya

Terjawab ! Ini yang Terjadi pada Manusia Jika Tewas di Luar Angkasa

Gambar
S alah satu impian umat manusia adalah mampu menjelajah luar angkasa yang tidak memiliki batas luas dan jarak. Di sana, jutaan misteri masih tersimpan dengan rapi hingga manusia wajib menguaknya dengan sempurna. Tapi, sesuatu yang berada di luar angkasa kadang susah untuk diteliti. Permasalahan yang dihadapi adalah susahnya akses untuk mendekat, ilmuwan harus menggunakan pesawat atau satelit. Kedua adalah tak ada manusia yang mampu ke sana dan mengamatinya dengan mata dan kepalanya langsung. Yang kita tahu, luar angkasa adalah sesuatu yang luas dan indah. Dari apa yang telah diketahui ilmuwan saja, banyak hal menakjubkan yang menarik untuk diketahui dari luar angkasa. Banyak yang berpendapat kalau luar angkasa adalah hal yang sangat misterius. Sejumlah hal yang saat ini telah dipelajari ilmuwan, masih sangat jauh dari apa yang belum kita tahu. Segala hal di luar angkasa memang penuh dengan jutaan misteri sehingga ilmuwan berambisi menempatkan banyak astronot ke luar angkasa di masa dep...
Baca selengkapnya

#Keren ! Tombol Share Facebook Menggunakan Animasi Spiderman

Gambar
W idget Tombol Share Animasi Spiderman, merupakan widget tombol yang menggunakan kode javascript untuk membuat animasi yang atraktif dan dinamis. Pada gambar spiderman apabila di klik maka secara otomatis akan membuka popup window yang men-share artikel blog ke situs facebook. Link yang dibagikan merupakan URL artikel yang sedang dilihat oleh pengunjung blog. Widget tombol animasi spiderman ini merupakan widget lama yang sudah pernah saya buat, namun saya hadirkan kembali dengan merombak total kode scriptnya agar animasi ini bisa lebih fungsional dengan tampilan yang super keren dan dinamis. Kode script khusus dibuat untuk menghadirkan konsep dari karakter spiderman agar terlihat sedikit lebih atraktif. Contoh dari implementasi widget tombol share animasi spiderman seperti yang terlihat pada artikel blog ini. Jika tidak terlihat silakan refresh browser anda. Bagi anda yang tertarik dengan widget ini silakan disimak cara pemasangannya. Informasi Singkat Spider-Man (bahasa Ind...
Baca selengkapnya