Membuat Web Chat Dengan Show Hide Dari Tlk.io Pada Blog AMP HTML - Selamat malam sobat blogger, pada malam ini saya akan mencoba posting ibarat pada judul di atas, adalah Membuat Web Chat Dengan Show Hide Dari Tlk.io Pada Blog AMP HTML. Widget chat pada web atau blog berfungsi sebagai daerah untuk mengobrol semua pengunjung blog, dan widget chat ini sangat simple dan gampang untuk menggunakannya. Pengguna sanggup masuk sebagai anonim dengan sebuah nama atau masuk memakai akun Twitter atau Facebook.
Dengan adanya widget chat, maka setiap pengunjung web atau blog kita sanggup saling bersilahturahmi, menyapa, bertanya, menjawab, atau percakapan lainnya sehingga ini menyebabkan sebuah alat kom4unikasi yang menciptakan 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 sanggup digunakan. Anda tinggal membagikan URL ruang chat Anda ke teman Anda biar bergabung di dalam ruang chat.
Agar sanggup memakai chat ini, Anda harus menciptakan 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 biar sanggup menjadi moderator channel.
Kemudian, sehabis berhasil menciptakan 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-fixed{background:#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:focus{outline:0}
.close-chat{position: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-iframe{height:100%;height:100vh;width:300px;position:absolute;top:0;left:0;bottom:0}
.lightbox-chat{background:rgba(0,0,0,.3);width:100%;height:100%;position:absolute}
@-webkit-keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}
.open-chat{position:fixed;top:20px;right:20px}
.open-chat svg{vertical-align:middle;cursor:pointer}
.open-chat:hover svg path{fill:#2B0C93;transition:all .4s ease-in-out}
@media screen and (max-width:320px){.chat-box-fixed,.chat-box-fixed amp-iframe{width:280px;}}
Untuk mengatur letak ikon chat biar sesuai dengan cita-cita Anda, silahkan atur pada CSS
.open-chat{position:fixed;top:20px;right:20px} yang saya marking di atas.Langkah Kedua.
Silahkan simpan 2 buah isyarat js berikut ini di atas isyarat</head> atau </head><!--<head/>--> Jika pada template blog Anda sudah ada kedua js ini, silahkan lewati langkah ini. Atau kalau sudah ada js dari salah satunya, maka silahkan lengkapi dengan js satunya lagi biar chat ini sanggup berjalan. <script async="" custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async="" custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Langkah Ketiga.
Kemudian silahkan simpan isyarat berikut di atas</body> <amp-lightbox id='chat-box' layout='nodisplay'>
<div aria-label='Close Chat Box' class='lightbox-chat' on='tap:chat-kompi.hide,chat-iframe.hide,chat-box.close' role='button' tabindex='0'>
<div class='chat-box-fixed' hidden='' id='chat-kompi'>
<div aria-label='Close Chat Box' class='close-chat' on='tap:chat-kompi.hide,chat-iframe.hide,chat-box.close' role='button' tabindex='0'>&times;</div>
<amp-iframe frameborder='0' height='300' hidden='' id='chat-iframe' layout='responsive' noloading='' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' src='https://cdn.rawgit.com/KompiAjaib/chat/master/kompi_tlkchat.html?channel=yourchannel' width='600'>
<amp-img height='100vh' layout='fixed-height' noloading='' placeholder='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDEvHgOO95h0sPcAfNxRxDsNpL1WfWajtNDtzb5gGqdUBNhJI0nmvQSbI_HUrNwjH9Jvp_n-4854GQyetmLYHG0ocq-jbrTzFiyTikKzoK0WjroMTKQ8vW8bs7O2c_eONYSnjwDOoYDn8/s1600/placeholder.png' width='auto'/></amp-iframe>
</div>
</div>
</amp-lightbox>
Jangan lupa ganti isyarat yourchannel dengan channel chat Anda.
Langkah Keempat.
Kemudian silahkan simpan isyarat HTML berikut untuk untuk menampilkan ikon dan widget chat ini. Silahkan simpan di mana Anda ingin menampilkannya. <span aria-label='Open Chat' class='open-chat' on='tap:chat-kompi.show,chat-iframe.show,chat-box' role='button' tabindex='0'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M12,23A1,1 0 0,1 11,22V19H7A2,2 0 0,1 5,17V7A2,2 0 0,1 7,5H21A2,2 0 0,1 23,7V17A2,2 0 0,1 21,19H16.9L13.2,22.71C13,22.89 12.76,23 12.5,23H12M13,17V20.08L16.08,17H21V7H7V17H13M3,15H1V3A2,2 0 0,1 3,1H19V3H3V15M9,9H19V11H9V9M9,13H17V15H9V13Z' fill='#333'/></svg></span>
Sumber: https://mamankdzgn.blogspot.com//search?q=membuat-show-hide-simple-web-chat-dari
