Cara Membuat Show Hide Simple Web Chat Dari Tlk.io Untuk Blog AMP Dan Non AMP




Cara Membuat Show Hide Simple Web Chat Dari Tlk.io Untuk Blog AMP Dan Non AMP
Cara Membuat Show Hide Simple Web Chat Dari Tlk.io Untuk Blog AMP Dan Non AMP : Pagi ini saya akan share cara membuat  Membuat Show Hide Simple Web Chat Dari Tlk.io. Tentunya setiap seorang blogger pasti blog/website mereka ingin terlihat bagus indah ataupun menarik pastinya. Gunanya agar pengunjung betah berlama-lama pada blog merek baik itu merubah dan mendesign kotak komentar pada blogger agar nantinya lebih keren.

Untuk Membuat Show Hide Simple Web Chat Dari Tlk.io Untuk AMP Dan Non AMP - cara nya pun tidak terlalu sulit juga, karena kode sudah di sediakan di bawah ini dan kita tinggal mengikuti langkah- langkah di bawah ini dan memasukan kode pada template blog anda. Sudah tidak asing lagi dengan kata- kata chat, dan hampir tiap hari kita selalu chat dengan orang baik itu kepada, keluarga, teman, pacar dan saudara. Nah jika anda masih awam tidak tau apa itu chat saya akan menjelaskan sedikit apa itu chat. 

Chat atau chatting adalah sebuah komunikasi antara 2 atau lebih orang di internet yang menggunakan media online. Dan widget chat di web atau blog berfungsi sebagai tempat untuk mengobrol semua pengunjung blog. Dengan adanya widget chat maka setiap pengunjung web atau blog bisa saling menyapa, bertanya, menjawab, atau percakapan lainnya sehingga ini menjadikan sebuah alat komunikasi yang membuat suasana web atau blog lebih hidup dan keren lah pastinya.

kebetulan saya menemukan sebuah tool chat yang cukup simple dan sangat mudah dalam menggunakannya. Pengguna bisa masuk sebagai anonim dengan sebuah nama atau masuk menggunakan akun Twitter atau Facebook. Tool chat ini saya temukan dari tlk.io, penggunaannya cukup simple dan tidak perlu mendaftar lagi. Anda hanya perlu membuat channel maka ruang chatting pun telah siap untuk digunakan. Disini anda tinggal membagikan URL ruang chat Anda ke teman Anda untuk bergabung di dalam ruang chat. 

Widget chat dari talk.io ini pun bisa di-embed di dalam web atau blog. Maka dari  itu saya buatkan widget chat dari tlk.io ini dengan show hide untuk AMP dan Non AMP dengan mudah di terapkan. Yang pertama Anda lakukan adalah memastikan channel Anda bisa dibuat. Silahkan masuk ke tkl.io dan silahkan buat channel Anda lalu klik Join, kemudian silahkan anda masuk dengan akun Twitter atau Facebook Anda agar bisa menjadi moderator channel chat Anda.Setelah channel chat berhasil dibuat dan Anda menjadi moderator, Untuk lebih jelasnya silahkan anda ikuti langkah di bawah ini untuk memasang widget chat ini di blog Anda.

# Untuk Blog AMP

1. Pertama , pastikan anda sudah masuk di dasbhor anda sendiri
2. Kemudian anda masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
3. Silahkan simpan 2 buah js berikut ini di atas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;dan jika ternyata di template blog Anda sudah ada kedua js ini, silahkan langkahi step ini. Nah jika sudah ada JS dari salah satunya, maka silahkan lengkapi dengan js satunya lagi.
<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>
4. Selanjutnya silahkan anda simpan kode HTML berikut untuk ikon chat untuk menampilkan widget chat ini. Lalu 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>
5. Dan salin kode di bawah ini kemudian simpan CSS berikut di style amp-custom Di 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;}}
6. Nah jika anda ingin mengubah atau ingin mengatur letak ikon chat silahkan atur pada CSS .open-chat{position:fixed;top:20px;right:20px} yang saya tandai di atas. 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>
7. Terakhir anda ganti kode yourchannel dengan kode anda. 
8. Terakhir baca bismillah dan berdoa semoga bisa , kemudian klik save

# Untuk Blog Non AMP

  1. Pertama , pastikan anda sudah masuk di dasbhor anda sendiri
  2. Kemudian anda masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
  3. Silahkan simpan kode HTML berikut untuk ikon chat untuk menampilkan widget chat ini. Silahkan simpan di mana Anda ingin menampilkannya.
    <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>
  4. Lalu silahkan anda simpan kode berikut 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=yourchannel" 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>
  5. Bagi anda yang ingin Untuk mengatur letak ikon chat silahkan anda atur pada CSS .open-chat{position:fixed;top:20px;right:20px} yang sudah saya tandai color di atas.
  6. Silahkan ganti kode yourchannel dengan channel Anda.
  7. Untuk iframe chat ini sudah menggunakan script untuk menunda pemuatan iframe, jadi jangan khawatir iframe ini tidak akan mengganggu loading blog Anda.
Widget chat tlk.io ini disediakan secara gratis, dan Anda bisa menjadi sponsor widget chat yang keren ini agar widget chat ini bisa terus dikembangkan. Silahkan masuk masuk pada situs resminyauntuk menjadi sponsor widget chat tlk.io ini.

UPDATE
Dalam chat, Anda bisa menggunakan smiley. Berikut list smiley yang bisa digunakan di dalam chat ini:

1. :) = happy
2. :D = laugh
3. :( = unhappy
4. :@ = angry
5. :'( = cry
6. :o = surprised
7. ;) = wink
8. :p = tongue
9. :/ = displeased
10. :| = sleep
11. }:) = devil
12. (y) = thumbsup
13. 0:) atau o:) = saint
Dan berikut format tulisan:

__bold__
_italic_
`code`
~~strike~~
* list
> blockquote
--- hr
[alt](link)
![alt](image.jpg)

 Nah gimana mudah bukan cara memasang web chat dari Tlk.io di blog kan. Selamat mencoba semoga berhasil. Demikian penjelasan pada pagi ini. semoga bermanfaat untuk anda. Salam Blogger.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect