Skip to main content

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 lama Saya tidak posting di blog Website Mini 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 tempat untuk mengobrol semua pengunjung blog, dengan adanya widget chat ini kita akan semakin mudah untuk mengobrol melalui chat dengan semua pengunjung yang bertanya di luar topik atau sejedar menyapa. widget chat ini sangat simple dan mudah untuk di gunakan. Pengguna bisa masuk sebagai anonim dengan sebuah nama atau masuk menggunakan akun Twitter atau Facebook.

Dengan adanya widget chat, maka setiap pengunjung web atau blog kita bisa saling bersilahturahmi, menyapa, bertanya, menjawab, atau percakapan lainnya sehingga ini menjadikan sebuah alat komunikasi yang membuat suasana web atau blog lebih hidup dan ramai.

Untuk menggunakan chat dari Tlk.io ini sobat tidak perlu mendaftar. sobat hanya perlu membuat channel maka ruang chatting pun sudah bisa digunakan. Sobat tinggal membagikan URL ruang chat sobat ke teman-temen agar bergabung di dalam ruang chat.

Agar sobat bisa menggunakan chat ini, sobat harus membuat channel sobat terlebih dahulu. Silahkan sobat masuk ke tkl.io dan silahkan buat channel sobat lalu klik Join, setelah itu silahkan masuk dengan akun Twitter atau Facebook sobat agar bisa menjadi moderator channel.



Kemudian, setelah berhasil membuat 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 agar sesuai dengan keinginan Anda, silahkan atur pada CSS .open-chat{position:fixed;top:20px;right:20px} yang saya marking di atas.

Langkah Kedua.

Silahkan simpan 2 buah kode js berikut ini di atas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; 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 agar chat ini dapat 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 kode 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://2.bp.blogspot.com/-rRo__E6FsPs/Ws7U-IT8KNI/AAAAAAAAw_Q/qCwa6vKHgTIB-ytesdA4FlKrXMRYt5NMACLcBGAs/s1600/placeholder.png' width='auto'/></amp-iframe>
  </div>
  </div>
</amp-lightbox>

Jangan lupa ganti kode yourchannel dengan channel chat Anda.

Langkah Keempat.

Kemudian silahkan simpan kode 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://www.kompiajaib.com/2018/05/membuat-show-hide-simple-web-chat-dari.html

You Might Also Like:

Buka Komentar