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 Recent Comments Disqus di Blogger

Iklan 728x90

Cara Pasang Recent Comments Disqus di Blogger

    Bloggerntt.com, Cara Pasang Recent Comments Disqus di Blogger - Salah satu cara mempercantik blog atau web adalah dengan memasang widget recent comments dari disqus, dimana jika blog atau web Anda menggunakan komentar disqus itu sendiri.

    Cara Pasang Recent Comments Disqus di Blogger, comments blogger disqus facebook,comments disqus blogger,install-disqus-comments-in-blogger


    Baca juga :

    1. Cara Pasang Widget Author Box Admin Blog di Bawah Posting Blogger Valid AMP HTML
    2. Cara Memasang Watermark pada Gambar Artikel Blog Valid AMP HTML 2019
    3. Memasang Facebook Messenger Live Chat Valid AMP Blog 2019
    4. Memasang Label atau Kategori Blog di Bawah Posting Valid AMP Template 2019
    5. Cara Memasang Image Lightbox Valid AMP Blogger Template


    Banyaknya interaksi di dalam komentar sebuah halaman blog atau web maka page view blog pun akan meningkat dan kesempatan mendatangkan pengunjung dari hasil pencarian pun semakin tinggi. Untuk memudahkan Anda memantau komentar Disqus yang masuk, maka salah satu cara adalah memasang widget recent comment Disqus menjadi solusinya.



    Tugas Admin blog atau web akan menjadi lebih mudah untuk menjawab pertanyaan atau komentar yang diajukan pengunjung pada kolom komentar. Anda tinggal klik maka akan masuk ke halamannya. Pada kesempatan kali ini saya akan fokus pada cara penerapan widget recent comments disqus pada blog AMP HTML. Silahkan simak ulasanya dibawah ini.
    PERTAMA

    Silahkan Anda simpan 2 buah js berikut ini di atas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; , jika sudah dipasang di blog, abaikan 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>


    KEDUA

    Silahkan Anda simpan kode HTML berikut untuk ikon lonceng atau bell untuk menampilkan widget recent comments Disqus. Silahkan simpan di mana Anda ingin menampilkannya.


    
    <div class='open-recent' id='open-recent' 
    on='tap:disqus-recent.show,disqus-recent-iframe.show,recent-disqus-box' 
    role='button' tabindex='0' aria-label='Open Recent Comments'>
    <svg width='24' height='24' viewBox="0 0 24 24">
        <path fill="#000000" d="M12,22A2,2 0 0,0 14,20H10A2,2 0 0,0 
    12,22M18,16V11C18,7.93 16.36,5.36 13.5,4.68V4A1.5,1.5 0 0,0 
    12,2.5A1.5,1.5 0 0,0 10.5,4V4.68C7.63,5.36 6,7.92 
    6,11V16L4,18V19H20V18L18,16Z" />
    </svg>
      </div>

    Salin kode CSS dibawah ini :
    
    .open-recent{
      cursor:pointer;
      position:fixed;
      top:0;
      right:0;
      z-index:998;
      }
    
    .top-comments-box-fixed{
    
      background:#fff;
    
      position:fixed;
    
      top:0;
    
      right:0;
    
      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
    
      }
    
    .top-comments-box-fixed h3{
    
      font-size:18px;
    
      margin:0;
    
      padding:0 0 0 10px;
    
      color:#fff;
    
      height:50px;
    
      line-height:50px;
    
      background:#2e9fff;
    
      position:relative;
    
      -webkit-box-shadow: 0 1px 8px rgba(0,0,0,.3);
    
      box-shadow: 0 1px 8px rgba(0,0,0,.3);
    
      }
    
    .top-comments-box-fixed h3 span{
    
      position:relative;
    
      z-index:2;
    
      }
    
    .top-comments-box-fixed h3:after{
    
      content:"";
    
      background: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 
    438 80' width='160' height='40' xmlns='http://www.w3.org/2000/svg' 
    xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath 
    style='fill:%23ffffff' d='M30.208 1.602H.878v76.039h28.895c27.376 0 
    43.342-16.293 
    43.342-38.235v-.219c.002-21.943-15.75-37.585-42.907-37.585zM51.499 
    39.73c0 12.272-8.364 19.227-20.964 19.227h-8.582V20.286h8.582c12.6 0 
    20.964 7.06 20.964 19.226v.218zm35.629 
    37.907h21.182V1.602H87.128v76.035zm70.065-47.358c-10.538-2.391-13.145-3.911-13.145-7.385v-.22c0-2.716
     2.5-4.888 7.604-4.888 6.733 0 14.338 2.605 21.292 
    7.496l10.536-14.885C175.223 3.772 165.122.294 152.196.294c-18.25 
    0-29.438 10.21-29.438 24.332v.218c0 15.644 12.492 20.207 28.676 23.896 
    10.32 2.389 12.818 4.127 12.818 7.279v.217c0 3.258-3.042 5.213-8.69 
    5.213-8.798 0-17.163-3.148-24.657-9.123L119.173 66.34c9.342 8.365 22.16 
    12.604 35.63 12.604 18.466 0 30.742-9.232 
    30.742-24.768v-.217c-.001-14.229-10.865-19.877-28.352-23.68zm120.573 
    9.343v-.218C277.766 17.57 260.387.08 236.922.08c-23.462 0-41.06 
    17.708-41.06 39.542v.216c0 21.834 17.38 39.324 40.845 39.324 8.689 0 
    16.619-2.5 23.137-6.736l8.363 7.494 10.645-11.84-7.818-6.623c4.341-6.193
     6.732-13.799 6.732-21.835zm-21.398.433c0 2.607-.435 5.105-1.304 
    7.384l-10.319-9.341L234.1 50.047l10.537 9.018a21.655 21.655 0 0 1-7.711 
    1.412c-11.621 0-19.443-9.666-19.443-20.639v-.216c0-10.972 7.712-20.532 
    19.225-20.532 11.733 0 19.664 9.668 19.664 20.748v.216l-.004.001zm83.534
     4.345c0 10.643-5.543 15.639-14.016 15.639-8.472 
    0-14.013-5.211-14.013-16.184V1.602h-21.397v42.69c0 23.789 13.578 34.763 
    35.194 34.763 21.617 0 35.629-10.754 
    35.629-35.305V1.602h-21.397V44.4zm68.868-14.121c-10.537-2.391-13.145-3.911-13.145-7.385v-.22c0-2.716
     2.5-4.888 7.607-4.888 6.73 0 14.338 2.605 21.289 7.496L435.059 
    10.4C426.805 3.775 416.705.297 403.778.297c-18.25 0-29.438 10.21-29.438 
    24.332v.218c0 15.644 12.492 20.205 28.677 23.896 10.319 2.391 12.817 
    4.129 12.817 7.28v.216c0 3.258-3.043 5.215-8.69 5.215-8.8 
    0-17.164-3.152-24.658-9.125l-11.729 14.012c9.343 8.367 22.16 12.603 
    35.627 12.603 18.468 0 30.742-9.233 
    30.742-24.767v-.219c-.004-14.228-10.868-19.876-28.356-23.679z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e")
     no-repeat 10px 0;
    
      background-size:70%;
    
      opacity: 0.3;
    
      top: 0;
    
      left: 0;
    
      bottom: 0;
    
      right: 0;
    
      position: absolute;
    
      z-index:1;
    
      }
    
    .open-recent:focus,
    
    .open-recent:active,
    
    .close-recent:focus,
    
    .close-recent:active{
    
      outline:0;
    
      }
    
    .close-recent{
    
      position:absolute;
    
      top:0;
    
      right:0;
    
      width:50px;
    
      height:50px;
    
      line-height:45px;
    
      text-align:center;
    
      font-size:40px;
    
      font-weight:300;
    
      color:#fff;
    
      cursor:pointer;
    
      z-index:2;
    
      }
    
    .top-comments-box-fixed amp-iframe{
    
      height:calc(100vh - 50px);
    
      width:300px;
    
      position:absolute;
    
      top:50px;
    
      left:0;
    
      animation:myframe 1s;
    
      -moz-animation:myframe 1s;
    
      -webkit-animation:myframe 1s
    
      }
    
    .lightbox-recent-disqus{
    
      background:rgba(0,0,0,.8);
    
      width:100%;
    
      height:100%;
    
      position:absolute;
    
      }
    
    @keyframes myframe{from{top:100%}
    
    to{top:50px;}
    
    }
    
    @-moz-keyframes myframe{from{top:100%}
    
    to{top:50px;}
    
    }
    
    @-webkit-keyframes myframe{from{top:100%}
    
    to{top:50px;}
    
    }
    
    @-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)}
    
    }



    KETIGA

    Anda simpan kode HTML berikut di atas kode </body>

    
    <amp-lightbox id='recent-disqus-box' layout="nodisplay">
    
    <div class="lightbox-recent-disqus" 
    on="tap:disqus-recent.hide,disqus-recent-iframe.hide,recent-disqus-box.close"
     role="button" tabindex="0" aria-label="Close Recent Box">
    
    <div class='top-comments-box-fixed' id='disqus-recent' hidden=''>
    
    <h3><span>Recent Comments:</span><div 
    class='close-recent' 
    on='tap:disqus-recent.hide,disqus-recent-iframe.hide,recent-disqus-box.close'
     role='button' tabindex='0' aria-label='Close 
    Box'>&amp;times;</div></h3>
    
    <amp-iframe noloading='' id='disqus-recent-iframe'
    
       frameborder='0'
    
       height='300'
    
       layout='responsive'
    
       sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups'
    
       src='https://cdn.rawgit.com/KompiAjaib/kompi-html/master/amprecentcomments.html?shortname=flobamorapedia&amp;fontBodyColor=555555&amp;fontBodyFamily=sans-serif&amp;fontLinkColor=2B0C93&amp;linkHoverColor=333333'
    
       width='600' hidden=''>
    
    <amp-img noloading='' 
    src="https://2.bp.blogspot.com/-rRo__E6FsPs/Ws7U-IT8KNI/AAAAAAAAw_Q/qCwa6vKHgTIB-ytesdA4FlKrXMRYt5NMACLcBGAs/s1600/placeholder.png"
    
       layout="fixed-height"
    
       height="100vh"
    
       width="auto"
    
       placeholder=''>
    
        </amp-img>
    
      </amp-iframe>
    
      </div>
    
      </div>
    
    </amp-lightbox>


    Silahkan ganti kode flobamorapedia dengan shortname Disqus blog Anda, dan sesuaikan kode 2B0C93 dengan kode warna link blog Anda. Terakhir SAVE template blog Anda.
    Selamat mencoba, dan semoga bermanfaat. Sekian artikel Cara Pasang Widget Recent Comments Disqus di Blog AMP HTML.

    Penelusuran terkait:

    • membuat recent comment disqus
    • membuat recent comment disqus di blog
    • widget komentar disqus
    • cara membuat komentar disqus di blog
    • arlina disqus
    • cara memunculkan komentar disqus
    • komentar disqus tidak muncul
    • we were unable to load disqus if you are a moderator please see our troubleshooting guide
    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