›

Cara Mudah Membuat dan Memasang Show Hide Komentar Untuk Blog AMP

1/03/2019 Edit
komputerdia.com - Seberapa pentingkah fitur komentar yang terdapat pada suatu situs atau blog? Jika kalian seorang blogger atau seseorang yang bermain didunia online yang memanfaatkan media website, tentu saja fitur komentar ini sangatlah penting untuk menaikkan ranking suatu blog atau situs.

Dengan adanya fitur komentar, tentu saja pengunjung blog kalian bisa memberikan feedback atau testimoni yang mereka rasakan ketika sedang mengunjungi blog kalian atau bahkan sesuatu ilmu yang bisa mereka dapatkan dari blog kalian

Dalam pembahasan kali ini, saya akan sedikit membahas tentang bagaimana cara membuat dan memasang kode show hide komentar untuk blog AMP Html. Seperti kita ketahui bahwa pada AMP HTML baru ada 2 buah sistem komentar yang mendukung AMP HTML yaitu: 
  1. Komentar Facebook 
  2. Komentar Disqus. 
Seperti halnya fitur komentar pada blog Non AMP, komentar yang terpasang pada blog AMP juga memberikan pengaruh kecepatan loading pada blog. Untuk mengatasi hal tersebut, kita juga perlu mengakali pemasangan komentar pada blog AMP tersebut agar tidak memberikan pengaruh loading yang cukup lama.

Baca Juga Artikel Lainnya :

Cara Mudah Membuat dan Memasang Show Hide Komentar Untuk Blog AMP

Cara Memasang Kode Show Hide Komentar Blog AMP

A. Pemasangan Kode Show Hide Komentar Disqus Blog AMP

  • Langkah paling pertama, pastikan template blog kalian telah memiliki kode Javascript pada amp-iframe seperti dibawah ini
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>
  • Silahkan tambahkan kode css dibawah ini di style amp-custom blog kalian
*{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.disqus{margin:0 -8px;padding:0 0 20px;font-family:Roboto,sans-serif;}
.disclaimer_box{width:100%;padding:2px;background:linear-gradient(60deg,#f79533,#f37055,#ef4e7b,#a166ab,#5073b8,#1098ad,#07b39b,#6fba82);border-radius:6px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.disclaimer_box .content{background:#fff;padding:8px 12px;font-size:95%;border-radius:4px;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.disclaimer_box .content p{margin:0;padding:0}
.buka-komen,.tutup-komen{font-family:Roboto,sans-serif;background-color:#11589D;color:#fff;font-size:16px;line-height:1.3em;padding:5px 7px;display:block;min-width:54px;text-align:center;font-weight:500;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transition:all 218ms;-moz-transition:all 218ms;-o-transition:all 218ms;transition:all 218ms;-webkit-user-select:none;-moz-user-select:none;}
.buka-komen{margin:20px 0;cursor:pointer;}
.tutup-komen{margin:20px 0 0;cursor:pointer;}
  • Selanjutnya, silahkan kalian cari kode dibawah ini
<b:includable id='comments' var='post'>

............

</b:includable>
  • Setelah struktur kode tersebut kalian temukan, langkah selanjutnya kalian copy dan pastekan kode dibawah ini tepat dibawah kode </b:includable>
            <b:includable id='disquscomments' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='open-comment'/>
<div class='disclaimer_box'>
  <div class='content'>
    <b>Comment Policy:</b> Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
  </div>
</div>
<div class='buka-komen' id='buka-komen' on='tap:komen.show,tutup-komen.show,buka-komen.hide,open-comment.scrollTo(&quot;position&quot;=&quot;top&quot;)' role='button' tabindex='0' aria-label='Buka Komentar'>Buka Komentar</div>
<div class='tutup-komen' hidden='' id='tutup-komen' on='tap:komen.hide,tutup-komen.hide,buka-komen.show,close-comment.scrollTo(&quot;position&quot;=&quot;top&quot;)' role='button' tabindex='0' aria-label='Tutup Komentar'>Tutup Komentar</div>
</b:if>
             <div class='disqus' hidden='' id='komen'>
<amp-iframe expr:src='&quot;https://cdn.rawgit.com/KompiAjaib/kompi-html/master/ampdisqus_blogger4.html?shortname=komputerdia-cmt&amp;fontBodyFamily=sans-serif&amp;fontLinkColor=11589D&amp;canonicalurl=&quot; + data:blog.canonicalUrl + &quot;&amp;title=&quot; + data:blog.pageName' frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' width='600'>
<div aria-label='Disqus Comments' overflow='' role='button' tabindex='0'/>
</amp-iframe>
              </div>
            </b:includable>
  • Setelah kode tersebut kalian pastekan, silahkan ganti tulisan komputerdia-cmt dengan ID short name disqus kalian
  • Langkah selanjutnya silahkan kalian copy dan pastekan kode dibawah ini, tepat diatas kode related post blog kalian
<div id='close-comment'/>
  • Langkah selanjutnya silahkan kalian cari kode dibawah ini
<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>
  • Setelah kode diatas kalian temukan, silahkan ganti kode tersebut dengan kode dibawah ini
<b:include cond='data:blog.pageType == &quot;item&quot;' data='post' name='disquscomments'/>


B. Pemasangan Kode Show Hide Komentar Facebook Blog AMP

  • Pastikan di blog AMP kalian sudah terpasang kdoe javascript amp-facebook-comments seperti dibawah ini
<script async='async' custom-element='amp-facebook-comments' src='https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js'/>
  • Silahkan tambahkan kode css dibawah ini di style amp-custom blog kalian
*{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.fb-comments{margin:0 -8px;padding:0;font-family:Roboto,sans-serif;}
.disclaimer_box{width:100%;padding:2px;background:linear-gradient(60deg,#f79533,#f37055,#ef4e7b,#a166ab,#5073b8,#1098ad,#07b39b,#6fba82);border-radius:6px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.disclaimer_box .content{background:#fff;padding:8px 12px;font-size:95%;border-radius:4px;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.disclaimer_box .content p{margin:0;padding:0}
.buka-komen,.tutup-komen{font-family:Roboto,sans-serif;background-color:#11589D;color:#fff;font-size:16px;line-height:1.3em;padding:5px 7px;display:block;min-width:54px;text-align:center;font-weight:500;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transition:all 218ms;-moz-transition:all 218ms;-o-transition:all 218ms;transition:all 218ms;-webkit-user-select:none;-moz-user-select:none;}
.buka-komen{margin:20px 0;cursor:pointer;}
.tutup-komen{margin:20px 0 0;cursor:pointer;}
  • Selanjutnya, silahkan kalian cari kode dibawah ini
<b:includable id='comments' var='post'>

............

</b:includable>
  • Setelah struktur kode tersebut kalian temukan, langkah selanjutnya kalian copy dan pastekan kode dibawah ini tepat dibawah kode </b:includable>
            <b:includable id='fbcomments' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='open-comment'/>
<div class='disclaimer_box'>
  <div class='content'>
    <b>Comment Policy:</b> Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
  </div>
</div>
<div class='buka-komen' id='buka-komen' on='tap:komen.show,tutup-komen.show,buka-komen.hide,open-comment.scrollTo(&quot;position&quot;=&quot;top&quot;)' role='button' tabindex='0' aria-label='Buka Komentar'>Buka Komentar</div>
<div class='tutup-komen' hidden='' id='tutup-komen' on='tap:komen.hide,tutup-komen.hide,buka-komen.show,close-comment.scrollTo(&quot;position&quot;=&quot;top&quot;)' role='button' tabindex='0' aria-label='Tutup Komentar'>Tutup Komentar</div>
</b:if>
<div hidden='' id='komen'>
<div class='fb-comments' id='fb_comments'>
<amp-facebook-comments data-numposts='5' expr:data-href='data:post.url' height='180' layout='responsive' width='600'>
</amp-facebook-comments>
</div>
</div>
            </b:includable>
  • Langkah selanjutnya silahkan kalian copy dan pastekan kode dibawah ini, tepat diatas kode related post blog kalian
<div id='close-comment'/>

  • Langkah selanjutnya silahkan kalian cari kode dibawah ini

    • <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>

  • Setelah kode diatas kalian temukan, silahkan ganti kode tersebut dengan kode dibawah ini

    • <b:include cond='data:blog.pageType == &quot;item&quot;' data='post' name='fbcomments'/>
    • Selesai, dan semoga bermanfaat untuk kalian semunya

    Tag :
    Cara memasang kode komentar facebook show hide di blog amp
    Cara memasang kode komentar disqus show hide di blog amp
    Cara membuat komentar disqus tersembunyi di blog amp
    Cara membuat komentar faceboot tersembunyi di blog amp
    Cara memasang komentar faceboot tampil dan sembunyi di blog amp
    Cara memasang komentar disqus tampil dan sembunyi di blog amp

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel