Iklan Billboard 970x250

Artikel Terkait

Untuk Anda yang mau mengirimkan karya literasimu, baik itu cerpen, puisi, esai dan karya literasi lainya, silahkan Anda buka disini Kirim Artikel. LINK UNDUH SUDAH SAYA PERBAIKI. (Khusus Pada Artikel Aplikasi Android )

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

Iklan 728x90

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

    Bloggerntt.com - Cara Pasang Tombol Show Hide pada Web Chat Tlk.io Valid Blog AMP HTML -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.

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


    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.

    Baca juga :
    1. Cara Memasang Image Lightbox Valid AMP Blogger Template
    2. Memasang Widget Multi Tab Valid AMP di Blogger Template 2019
    3. Cara Melindungi Konten Blog dengan Widget DMCA Badge di Blogger AMP HTML
    4. Memasang Kotak Subscribe Berlangganan FeedBurner Email di AMP Blogger
    5. Cara Terbaru Seting robot.txt dan Header Tag Super SEO 2019 pada Blog AMP

    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.
    Baca Juga
    SHARE
    Marko Kono
    Hi, My name is Marko. Pencinta Malam, Penyuka Hitam, Penikmat Gelap dan Pengurus Tapaleuk, hehehe 😃 Selain blogging, punya pekerjaan pribadi sebagai Staf Teknik bagian Pengawasan Proyek. Teknik Sipil menjadi bagian tak terpisahkan dari kehidupanya.
    Masukan Email Anda Untuk Dapatkan Update GRATIS!

    Artikel Terkait:

    Post a Comment

    Iklan Tengah Post