Membuat Web Chat Dengan Show Hide Dari Tlk.io Pada Blog AMP HTML - Selamat malam teman blogger, pada malam ini aku akan mencoba posting mirip pada judul di atas, ialah Membuat Web Chat Dengan Show Hide Dari Tlk.io Pada Blog AMP HTML.
Widget chat pada web atau blog berfungsi sebagai tempat untuk berbincang-bincang semua pengunjung blog, dan widget chat ini sungguh simple dan mudah untuk menggunakannya. Pengguna bisa masuk sebagai anonim dengan sebuah nama atau masuk menggunakan akun Twitter atau Facebook.
Dengan adanya widget chat, maka setiap hadirin web atau blog kita bisa saling bersilahturahmi, menyapa, bertanya, menjawab, atau percakapan lainnya sehingga ini menyebabkan suatu alat kom4unikasi yang membuat suasana web atau blog lebih hidup.
Untuk memakai chat dari Tlk.io ini Anda tidak perlu mendaftar. Anda hanya perlu menciptakan channel maka ruang chatting pun sudah bisa dipakai. Anda tinggal membagikan URL ruang chat Anda ke teman Anda supaya bergabung di dalam ruang chat.
Agar mampu menggunakan chat ini, Anda mesti membuat channel Anda terlebih dahulu. Silahkan Anda masuk ke tkl.io dan silahkan buat channel Anda kemudian klik Join, sehabis itu silahkan masuk dengan akun Twitter atau Facebook Anda agar mampu menjadi moderator channel.
Kemudian, sehabis sukses membuat channel chat dan Anda sudah menjadi moderator, mari ikuti langkah berikut ini untuk memasang widget chat ini pada blog Anda.
Langkah Pertama.
Silahkan simpan CSS berikut di style amp-custom blog AMP Anda. .chat-box-fixedbackground:#fff;position:fixed;top:0;right:0;bottom:0;height:100%;height:100vh;width:300px;padding:0;z-index:999;-webkit-animation-name:slideInRight;animation-name:slideInRight;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;overflow:visible
.close-chat:active,.close-chat:focus,.open-chat:active,.open-chat:focusoutline:0
.close-chatposition:absolute;top:0;left:-25px;width:25px;height:25px;line-height:20px;text-align:center;font-size:40px;font-weight:300;color:#fff;cursor:pointer;z-index:2
.chat-box-fixed amp-iframeheight:100%;height:100vh;width:300px;position:absolute;top:0;left:0;bottom:0
.lightbox-chatbackground:rgba(0,0,0,.3);width:100%;height:100%;position:absolute
@-webkit-keyframes slideInRight0%-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible100%-webkit-transform:translateX(0);transform:translateX(0)@keyframes slideInRight0%-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible100%-webkit-transform:translateX(0);transform:translateX(0)
.open-chatposition:fixed;top:20px;right:20px
.open-chat svgvertical-align:middle;cursor:pointer
.open-chat:hover svg pathfill:#2B0C93;transition:all .4s ease-in-out
@media screen and (max-width:320px).chat-box-fixed,.chat-box-fixed amp-iframewidth:280px;
Untuk mengontrol letak ikon chat biar sesuai dengan cita-cita Anda, silahkan atur pada CSS .open-chatposition:fixed;top:20px;right:20px yang aku marking di atas.
Langkah Kedua.
Silahkan simpan 2 buah arahan js berikut ini di atas aba-aba Jika pada template blog Anda sudah ada kedua js ini, silahkan lewati langkah ini. Atau jika sudah ada js dari salah satunya, maka silahkan lengkapi dengan js satunya lagi supaya chat ini mampu berlangsung.
Langkah Ketiga.
Kemudian silahkan simpan aba-aba berikut di atas
×
Jangan lupa ganti instruksi yourchannel dengan channel chat Anda.
Langkah Keempat.
Kemudian silahkan simpan arahan HTML berikut untuk untuk menampilkan ikon dan widget chat ini. Silahkan simpan di mana Anda ingin menampilkannya.
Sumber: https://validamp.blogspot.com//search?q=menciptakan-show-hide-simple-web-chat-dari