Cara Pasang Tombol Show Hide pada Web Chat Tlk.io Valid Blog AMP HTML

Cara Pasang Tombol Show Hide pada Web Chat Tlk.io Valid Blog AMP HTML

Cara Pasang Tombol Show Hide pada Web Chat Tlk.io Valid Blog AMP HTML


BloggerNTT -Sobat blogger, dengan menambahkan widget chatting di blog kita, kita bisa saling berinteraksi dengan pengunjung web atau blog. Tempat dimana kita bisa saling mengobrol sesama blogger.

Dengan adanya widget chat di blog, setiap pengunjung web atau blog bisa saling menyapa, menjawab, bertanya, atau juga percakapan lainnya sehingga ini membuat suasana web atau blog kita lebih hidup.

Untuk memasang widget chatting, kita menggunakan tool dari web chat Tlk.io . Cara penggunanya sangatlah mudah dan tidak perlu mendaftar atau login terlebih dahulu.Yang diperlukan hanya membuat channel di situs ini agar bisa mendapatkan kode widgetnya untuk dipasang ke web atau blog.

Anda juga bisa baca posting saya ini, Cara Buat atau Pasang Tab Panel di Postingan Blogger Valid AMP HTML

Berikut ini langkah-langkah membuat widget chat di Tlk.io :

1. Buka situs chat Tlk.io (link di atas)
2. Silahkan buat channel Anda lalu klik tombol Join, setelah itu Anda masuk dengan akun Twitter atau Facebook Anda agar bisa menjadi moderator/admin channel chat Anda.
3. Berikut adalah penerapan kode chat pada blog amp dan non amp :

1. Untuk Blog Non AMP

- Copy kode dibawah ini, lalu masuk ke tata letak di dashboard blogger Anda lalu masukan ke tab HTML.


<span class='open-chat' onclick='loadChatbox()'><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>

- Selanjutnya taruh kode dibawah ini di atas kode </body>


<style>
#chat-box,#chat-kompi{display:none}
#chat-box{position:fixed!important;z-index:1000;top:0!important;left:0!important;bottom:0!important;right:0!important}
.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 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}
body.flow{overflow:hidden;position:relative;}
@media screen and (max-width:320px){.chat-box-fixed,.chat-box-fixed amp-iframe{width:280px;}}
</style>
<div id='chat-box'>
<div class='lightbox-chat' 
onclick='document.getElementById(&quot;chat-box&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;chat-kompi&quot;).style.display=&quot;none&quot;;document.body.classList.remove(&quot;flow&quot;)'>
<div class="chat-box-fixed" id="chat-kompi">
<script>
//<![CDATA[
document.write('<div id="chat-kompi-in">')
document.write('<!--<iframe frameborder="0" height="300" 
id="chat-iframe" 
src="https://cdn.rawgit.com/KompiAjaib/chat/master/kompi_tlkchat.html?channel=NAMACHANEL" width="600">');
document.write('</iframe>--></div>');
function loadChatbox(){var 
e=document.getElementById("chat-kompi-in");e.innerHTML=e.innerHTML.replace('<!--','').replace('-->','');var
 e=document.getElementById("chat-box");e.style.display="block";var 
e=document.getElementById("chat-kompi");e.style.display="block";var body
 = document.body;body.classList.add("flow");}
//]]>
</script>
<div class='close-chat' 
onclick='document.getElementById(&quot;chat-box&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;chat-kompi&quot;).style.display=&quot;none&quot;;document.body.classList.remove(&quot;flow&quot;)'>&amp;times;</div>
  </div>
  </div>
  </div>

Anda bisa mengatur letak ikon chat tersebut, silahkan atur pada CSS .open-chat{position:fixed;top:20px;right:20px} yangditandai di atas.
Silahkan ganti kode NAMACHANEL dengan url channel Anda.



2. Untuk Blog AMP


Silahkan Anda simpan 2 buah script dibwah ini di atas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; dan jika ternyata di template blog Anda sudah ada kedua script ini, lewati langkah ini

<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>


- Copy kode dibawah ini, lalu masuk ke tata letak di dashboard blogger Anda lalu masukan ke tab HTML.

<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>

- 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;}}

- 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>

Ganti kode yourchannel dengan url channel Anda.

DEMO-RESULT



Semoga bermanfaat, sekian artikel Cara Pasang Tombol Show Hide pada Web Chat Tlk.io Valid Blog AMP HTML di blogger.
Blogger
Disqus
Pilih Sistem Komentar

No comments

۝ Peraturan dalam berkomentar :

☛ UpsS,. Budayakan berkomentar sesudah membaca artikel sob.
☛ Dilarang Menghina, Promosi (Iklan), Menyelipkan Link Aktiv, dsb.
☛ Dilarang berkomentar berbau Porno, Spam, Sara, Politic, Profokasi.
☛ Berkomentarlah yang Sopan,Bijak, dan Sesuai Artikel (Dilarang OOT)
☛ Saya sangat berterima kasih atas semua yang mau berkomentar diblog saya.
☛ Saya PASTI akan berkunjung balik ke blog Sobat yang sudah mau berkomentar di sini.

Copyright © 2018 - Blogger NTT® Bloggerntt.com✓

Advertiser