Widget Chat Box Tersembunyi Di Bagian Kanan Bawah Blog

Widget Chat Box Tersembunyi Di Bagian Kanan Bawah Blog - Setelah membahas artikel mengenai Membuat Widget Chat Online Gratis di Blog sekarang kita akan membahas cara untuk memodifikasi widget chat box online yang sudah diterapkan kemaren agar tampilannya jadi lebih unik dan minimalis, cara ini saya bagikan karena banyak yang ingin tau cara membuat chat box online yang seperti di blog ini, jika sobat tertarik silahkan di simak cara pembuatannya.

Cara Pembuatan

Pertama-tama masuk ke Blogger Dashboard punya sobat, kemudian masuk ke Tata Letak > Tambah Gadget > HTML/JavaScript terserah mau sobat letakkan dimana masukkan kode dibawah ini didalamnya

<style>
.chat-box {
  font:normal normal 11px/1.4 Tahoma,Verdana,Sans-Serif;
  color:#333;
  width:222px; /* Chatbox width */
  border:1px solid #344150;
  border-bottom:none;
  background-color:white;
  position:fixed;
  right:10px;
  bottom:0;
  z-index:9999;
  -webkit-box-shadow:1px 1px 5px rgba(0,0,0,.2);
  -moz-box-shadow:1px 1px 5px rgba(0,0,0,.2);
  box-shadow:1px 1px 5px rgba(0,0,0,.2);
}
.chat-box > input[type="checkbox"] {
  display:block;
  margin:0 0;
  padding:0 0;
  position:absolute;
  top:0;
  right:0;
  left:0;
  width:100%;
  height:30px;
  z-index:4;
  cursor:pointer;
  opacity:0;
  filter:alpha(opacity=0);
}
.chat-box > label {
  display:block;
  height:30px;
  line-height:24px;
  background-color:#344150;
text-align:center;
  color:white;
  font-weight:bold;
  padding:0 1em 1px;
}
.chat-box > label:before {content:attr(data-collapsed)}
.chat-box .chat-box-content {
  /* padding:10px; */
  display:none;
}
/* hover state */
.chat-box > input[type="checkbox"]:hover + label {background-color:#404D5A}
/* checked state */
.chat-box > input[type="checkbox"]:checked + label {background-color:#212A35}
.chat-box > input[type="checkbox"]:checked + label:before {content:attr(data-expanded)}
.chat-box > input[type="checkbox"]:checked ~ .chat-box-content {display:block}
</style>
<div class="chat-box">
<input type="checkbox" />
    <label data-collapsed="Buka Chatbox" data-expanded="Tutup Chatbox"></label>
<div class="chat-box-content">
 
Masukkan kode chatboxnya disini
 
    </div>
</div>

Silahkan ganti tulisan Masukkan Kode Chatboxnya Disini dengan kode chatbox yang sudah sobat buat sebelumnya, jika sobat belum mempunyai chat box, sobat bisa membuatnya dengan cara di artikel saya yang sebelumnya mengenai Membuat Widget Chat Online Gratis Untuk Blog.

Langkah Terakhir klik Simpan dan lihat perubahannya.

Nah itu dia cara membuat Widget Chat Box Tersembunyi Di Bagian Kanan Bawah Blog, Jika ada pertanyaan jangan sungkan untuk bertanya di kotak komentar, Semoga Bermanfaat.

Terimakasih handexcel.blogspot.com