Membuat Web Chat Show Hide Dari Tlk.Io Untuk Blog Amp

Membuat Web Chat Show Hide Dari Tlk.io Untuk Blog AMP - Halo sobat blogger selamat malam, terasa sudah usang Saya tidak posting di blog yah sob. Pada malam ini saya akan coba posting Cara Membuat Web Chat Show Hide Dari Tlk.io Untuk Blog AMP.

Widget chating pada sebuah web atau blog berfungsi sebagai daerah untuk mengobrol semua pengunjung blog, dengan adanya widget chat ini kita akan semakin gampang untuk mengobrol melalui chat dengan semua pengunjung yang bertanya di luar topik atau sejedar menyapa. widget chat ini sangat simple dan gampang untuk di gunakan. 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 menimbulkan sebuah alat komunikasi yang menciptakan suasana web atau blog lebih hidup dan ramai.

Untuk memakai chat dari Tlk.io ini sobat tidak perlu mendaftar. sobat hanya perlu menciptakan channel maka ruang chatting pun sudah sanggup digunakan. Sobat tinggal membagikan URL ruang chat sobat ke teman-temen biar bergabung di dalam ruang chat.

Agar sobat sanggup memakai chat ini, sobat harus menciptakan channel sobat terlebih dahulu. Silahkan sobat masuk ke tkl.io dan silahkan buat channel sobat kemudian klik Join, sesudah itu silahkan masuk dengan akun Twitter atau Facebook sobat biar sanggup menjadi moderator channel.



Kemudian, sesudah berhasil menciptakan channel chat dan sudah menjadi moderator, mari ikuti langkah berikut ini untuk memasang widget chat ini pada blog AMP sobat.

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 impian Anda, silahkan atur pada CSS .open-chat{position:fixed;top:20px;right:20px} yang saya marking di atas.

Langkah Kedua.

Silahkan simpan 2 buah arahan js berikut ini di atas arahan </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; Jika pada template blog Anda sudah ada kedua js ini, silahkan lewati langkah ini. Atau jikalau 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 arahan 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'>&amp;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/AVvXsEiuBT6ZZFWCXdnJDCzBMVZTLTAuxUK1NaNj5lBE6Wt_zeyH3HVsj0QBcOAQYIKr-7H5fzkt2v2KP75Eb0KHM3hBhc9ve-h2fl4uO7AvOZ76WLHKawC1ul1UNqV-aWzaTC0hg-kUk2ew1wA/s1600/placeholder.png' width='auto'/></amp-iframe>
   </div>
   </div>
 </amp-lightbox>

Jangan lupa ganti arahan 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.

 <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://xomlic.blogspot.com/search?q=membuat-show-hide-simple-web-chat-dari

Share this Article