Cara Membuat Tombol Show Hide Komentar Disqus Template Kompi Design V.1 AMP

Dalam postingan mas Adhy dan bung franki, salah satu elemen yang membuat loading blog menjadi lambat adalah widget komentar disqus. Widget ini sangat berguna bagi pengguna template blogger AMP seperti saya karena skrip komentar bawaan blogger akan membuat template blog AMP menjadi tidak valid. Jadi saya mencoba mempraktekkan panduan membuat tombol show hide komentar disqus milik mas Adhy Suryadi.


Bung Frangki sendiri masih tetap bertahan dengan menggunakan skrip java dan jquery yang dapat dikreasikan sendiri, hal yang tidak bisa dilakukan jika seorang blogger menggunakan teknologi AMP yang disarankan oleh google.


Setelah beberapa trial dan error akhirnya saya menyerah dan meminta mas Adhy untuk memperbaiki kode show hide komentar disqus yang terdapat di buatblogger.net. Sementara mas Adhy membantu memperbaiki kode komentar disqus, saya pun mencoba kembali untuk mempraktekkan panduan yang dibagikan mas Adhy di kompiajaib.com.


Hasilnya saya berhasil membuat tombol untuk membuka dan menutup komentar disqus di blog lain yang sengaja saya buat. Kali ini saya ingin membagi langkah-langkah saya dalam mempraktekkan panduan yang telah diberikan kompiajaib tersebut. Berikut langkah-langkahnya:

• tambahkan kode styling berikut di style amp-custom:
  

  *{-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;}
  .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;}

  
  
  catatan: jika anda jeli, maka anda akan menemukan enam styling amp-custom di dalam template yang dibagikan oleh mas Adhy Suryadi tersebut. Jadi tambahkan di semua styling amp-custom. Jika anda miss di satu styling saja kemungkinan besar hasilnya tidak akan sesuai dengan harapan. Ini pengalaman pribadi saya loh.
• temukan kode <b:include id='disqus-comments', lalu ubah jadi disquscomments.
• ganti shortname disqus dengan shortname blog/web Anda sendiri
  

  
  <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=bbnet&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>

• cari kode styling <div class='halaman'> lalu tepat dibawahnya tempelkan kode

  <div id='close-comment'/>

• cari kode

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

  lalu ganti disqus-comments; dengan disquscomments
  . Langkah ini cukup tricky. Agar lebih memudahkan pencarian ketikan disqus di fitur pencarian edit html.
• Tekan tombol save atau simpan