Menu

  • Home
  • Latest
  • Trending
  • FORUM
  • Activity
  • Members
  • Announcement
  • Need help?

Categories

  • Android (16)
  • Apps (38)
  • Blogger (22)
  • Computer (10)
  • Cryptocurrency (2)
  • Culinary (1)
  • Download (30)
  • Entertainment (1)
  • Event (17)
  • Game (3)
  • Internet (21)
  • Laptop (73)
  • News (3)
  • OS (15)
  • Peripheral (25)
  • Personal (259)
  • Publisher (3)
  • Review (23)
  • Smartphone (56)
  • Social Media (7)
  • Tablet (1)
  • Technology (157)
  • Tips (77)
  • Travel (5)
  • Tutorial (138)
  • Unboxing (18)
  • Video (47)
  • Web (27)
  • Windows (6)
  • Wordpress (20)
  • YouTube (21)

Tags

Advertise Android Android 4 KitKat Android 9 Pie ASUS Bardi Blog Coding Competition CSS Experience ExpertBook Firmware Game Mobile Google Google Play Store HTML IndiHome Laptop Bisnis Laptop Gaming Plugins Press Release Republic of Gamers ROG Phone Smart Home Smartphone Gaming Spesifikasi dan Harga Technology Troubleshooting Update Upgrade VivoBook VPN Widget Youtube Zenbook Zenfone Zenfone 3 Zenfone 3 Max Zenfone 4 Zenfone 5 Zenfone 6 Zenfone Max Zenfone Max Pro M1 Zenfone Zoom S
XKOMODOTCOM - Sharing is Caring
No Result
View All Result
  • Account
XKOMODOTCOM
XKOMODOTCOM - Sharing is Caring
Home Web Blogger
Cara Menambahkan Widget ChatBox Melayang di Blogger Terbaru, Mudah untuk Pemula!

Cara Menambahkan Widget ChatBox Melayang di Blogger Terbaru, Blog Jadi Kece Abis!

Pakai fitur chat di blogger, bikin blog jadi kelihatan lebih menarik untuk dikunjungi dan diskusi bersama, bisa bikin bounce-rate menurun drastis loh!

Febri Tri Harmoko by Febri Tri Harmoko
February 22, 2023
in Blogger, Tutorial, Web
1
0

Hallo Sahabat Blogger indonesia, Kali ini saya mau memberikan tutorial nih bagaiaman caranya Memasang widget Chatbox Melayang di kanan, kiri, atas, bawah pada blog dengan efek Show/Hide. Sebelum kita memulai tutorial ini pastikan kamu sudah mendaftar di http://www.cbox.ws/. Untuk tutorial mendaftar di Chatbox/Chat blog, saya rasa tidak perlu dan saya anggap kamu sudah bisa mendaftar sendiri.

Table of Contents

  • Cara Menambahkan Widget Chatbox Melayang di Blogger
    • Cara Mengatur CSS widget ChatBox
    • Cara modifikasi CSS ChatBox agar lebih menarik
    • Cara mengatur letak Widget ChatBox di Blogger

PENTING
Fitur chat seperti ChatBox bisa menurunkan bounce rate, dan tentu ini bagus untuk kualitas blog.

Cara Menambahkan Widget Chatbox Melayang di Blogger

Untuk kamu yang ingin tahu cara menambahkan widget ChatBox melayang di Blogger, kamu bisa ikuti panduan singkat yang akan saya bagikan di artikel ini. Tutorial ini cocok untuk kamu yang ingin menambahkan fitur chat pada Blogger, supaya blog kamu jadi lebih ramai dan mendukung fitur obrolan di blog. Kamu bisa menggunakan bantuan aplikasi atau tools pihak ketiga dari CBOX misalnya.

Tanpa basa-basi lagi, langsung aja simak panduan lengkap cara menambahkan widget ChatBox melayang di Blogger berikut:

Cara Mengatur CSS widget ChatBox

Kita lanjut aja ya, pertama silakan kamu atur terlebih dahulu ukuran panjang dan lebar chatbox kamu sebelum kamu memasang nya di blog.

Klik Tab Look & Feel > Layout Option > Atur sesuai keinginan.

Cara Menambahkan Widget ChatBox Show / Hide Melayang di Blog

Setelah mengatur ukuran Chatbox, sekarang kamu design dulu dah warna , font, background, dan border pada Chatbox kamu. Untuk memilih tema kamu klik style preset, untuk merubah warna dan fonts kamu pilih Color dan Font atau untuk lebih mudah nya kamu bisa mengedit Lewat CSS yang sudah saya sediakan, supaya lebih mudah dalam pengeditan.

Klik Edit CSS untuk mengedit lewat CSS, ini contoh CSS Chatbox di blog:

CSS
html,body{
scrollbar-face-color:#424242;
scrollbar-shadow-color:#424242;
scrollbar-highlight-color:#424242;
scrollbar-3dlight-color:#424242;
scrollbar-darkshadow-color:#424242;
scrollbar-track-color:#363636;
scrollbar-arrow-color:#2484F1;
scrollbar-base-color:#363636;
}
td{
font-family:Arial, sans-serif;
font-size:8pt;
color:#E5E5E5;
}
.mnbdy{
background-color:#363636;
overflow:auto;
padding:2px;
margin:0px;
}
.fmbdy{
background-color:#424242;
/*tambahkan Background URL jika ingin membuat gambar jadi background Chatbox
Backrgound:url(URL_GAMBAR) no-repeat 1PX 2PX;*/ 
/* value 1 dan 2 untuk mengatur posisi gambar*/
padding:2px;
margin:0px;
}
A:link{
text-decoration:none;
color:#2484F1;
}
A:visited{
text-decoration:none;
color:#2484F1;
}
A:active{
text-decoration:underline;
color:#12549A;
}
A:hover{
text-decoration:underline;
color:#12549A;
}
.hbtbl{
table-layout:fixed;
word-wrap:break-word;
overflow:hidden;
}
.stxt{
background-color:#363636;
color:#E5E5E5;
}
.stxt2{
background-color:#424242;
color:#A6A6A6;
}
.dtxt{
color:#666666;
font-size:7pt;
text-align:right;
}
.dtxt2{
color:#323232;
font-size:7pt;
text-align:right;
}
.pn_std{
}
.pn_reg{
}
.pn_mod{
}
.pn_adm{
}
.cfrm{
margin-bottom:0px;
}
.frmtb{
padding-left:3px;
padding-right:3px;
font-family:Arial, sans-serif;
font-size:8pt;
background-color:#424242;
border:#3D3D3D 1px solid;
color:#E5E5E5;
margin: 1px 2px 1px 2px;
}
.frmbtn{
font-family:Arial, sans-serif;
font-size:8pt;
background-color:#363636;
border:#3D3D3D 1px solid;
color:#A6A6A6;
font-weight:bold;
padding-left:3px;
padding-right:3px;
vertical-align:top;
margin: 2px 2px 2px 2px;
}
.lnk{
color:#2484F1;
}
.pic{
width:45px;
height:45px;
margin-left:-2px;
margin-right:0px;
padding-right:2px;
float:left;
}

Silakan atur dan modifikasi CSS Chatbox sesuai selera kamu, jika tampilan Chatbox sudah sesuai Selera sekarang kita tinggal memasangnya ke dalam blog.

PERHATIAN
Save CSS -nya bukan di Template yah melainkan di chatbox.

Cara modifikasi CSS ChatBox agar lebih menarik

Klik Tab Publishing > Maka kamu akan lihat menu seperti gambar berikut > Setting sesuai keinginan kamu.

Cara Menambahkan Widget ChatBox Show / Hide Melayang di Blog

Dari gambar di atas sudah terlihat jelas, tinggal kamu pilih aja Floating Button terus Copy-Paste Kode HTML -nya trus pasang deh. Gampang kan, selanjutnya bagaimana cara untuk mengatur posisi Button -nya berada di kanan , kiri , bawah atau atas blog?

Cara mengatur letak Widget ChatBox di Blogger

Cara nya sederhana, kita hanya merubah Style pada kode HTML tersebut, ikuti coding berikut :

HTML
/* ini untuk tombol Chatbox*/
<div id="cboxbutton" style="position: fixed; bottom: 8px; right: 16px; width: 200px; padding: 3px; text-align: center; cursor: pointer; background-color: #EDF3F7; border:#C3D7E5 1px solid;border-radius: 3px; font-family: Tahoma, sans-serif; font-size: 14px;" /*kita rubah "bottom" "Right" sesuai keinginan bisa "left" "top"*/ onclick="togglecbox()"><b>Open Cbox</b></div>

/*ini untuk chatbox nya*/
<div id="cboxdiv" style="display: none; position: fixed; bottom: 48px; right: 16px; width: 200px; background: #EDF3F7; padding: 3px; line-height: 0;border:#C3D7E5 1px solid;border-radius: 3px;" /*silakan atur posisi chat box munculnya dimana*/ ></div>

Sekian dulu tutorial dari saya, semoga cara memasang widget Chatbox melayang di kanan / kiri blog dengan efek Show Hide ini bermanfaat.

UPDATE
Bagaimana dengan Widget selain Chatbox? misal seperti Shoutbox, Shoutmix dan lain-lain. Untuk Tutorial Menambahkan widget Show/Hide Chatbox Shoutbox, Shoutmix, YourShoutbox dan lain lain. Kamu bisa baca di artikel cara menambahkan Chat Box di Blogger yang sudah saya tulis, di artikel itu bisa digunakan untuk semua jenis chat box apa pun.

Tags: CodingCSSWidget
Previous Post

Unboxing Lampu RGB BARDI Smart Light Bulb 9W (RGBWW)

Next Post

Threaded Comments Not Working di Akun Admin WordPress, Gara-gara Rocket Loader Milik Cloudflare

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Promo Jagoan Hosting

Promo Hosting Murah - Jagoan Hosting

Recommended Videos

For You
Cara Menghubungkan 1 Nomor WhatsApp di 2 HP Android yang Berbeda Tanpa Aplikasi Tambahan

Cara Menghubungkan 1 Nomor WhatsApp di 2 HP Android yang Berbeda Tanpa Aplikasi Tambahan!

39 VIEWS
March 13, 2023
Cara Upgrade Android 13 ROG di Phone 6/6 Pro (AI2201) via FOTA (Firmware Over-The-Air)

Cara Upgrade Android 13 di ROG Phone 6/6 Pro (AI2201) via FOTA (Firmware Over-The-Air)

57 VIEWS
March 3, 2023
Cara Membuat Website di Jagoan Hosting

Cara Membuat Website WordPress di Jagoan Hosting, 100% Mudah dan Cepat untuk Pemula!

38 VIEWS
February 26, 2023
Show More

© 2023 XKOMODOTCOM

  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • Sitemap
  • Terms & Conditions
  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • Sitemap
  • Terms & Conditions

© 2023 XKOMODOTCOM

No Result
View All Result
  • Account
XKOMODOTCOM
  • MENU
  • Home
  • Latest
  • Trending
  • FORUM
  • Members
  • Announcement
  • Need help?
  • CATEGORIES
  • Cryptocurrency
  • Download
  • Event
  • Internet
    • Social Media
  • Personal
    • Culinary
    • Travel
  • Publisher
  • Review
  • Technology
    • Apps
    • Computer
    • Game
    • Laptop
    • OS
      • Android
      • Windows
    • Peripheral
    • Smartphone
  • Tips
  • Tutorial
  • Unboxing
  • Web
    • Blogger
    • WordPress

© 2023 XKOMODOTCOM

Link Start!

Sign In with Google
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In

Add New Playlist