Dikolom komentar Pengunjung Blog sanggup memberi tanggapan, komentar atau bertanya wacana pembahasan yang belum sanggup dipahami oleh pengunjung blog melalui kolom komentar.
Tetapi mungkin agan agan semua juga sudah tau bahwa kolom komentar juga memberi beban komplemen loading sebuah blog, apalagi bila blog tersebut menggunakan kolom komentar selain dari Blogger menyerupai kolom komentar Disqus dan lainnya.
Lalu bagimana caranya supaya Blog sanggup menggunakan komentar Disqus tanpa takut Blog menjadi lala alias loading lama? Solusinya ialah dengan memasang sistem buka tutup komentar.
Dengan menggunakan sistem Buka Tutup komentar kita sanggup menggunakan kolom komentar Disqus tanpa takut Blog menjadi lambat dan berikut ini ialah langkah demi langkah menciptakan sistem buka tutup kolom komentar disqus di Blog AMP
- Pertama tama masuklah dulu ke Blogger >> Tema >> Edit HTML
- Pastikan Blog Agan sudah ada instruksi AMP-iframe menyerupai ini:
bila belum ada pasanglah dulu instruksi tersebut sebelum instruksi<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/></head><!--<head/>-->pada HTML blog Agan, - Kemudian langkah selanjutnya ialah menambahkan instruksi CSS dibawah ini pada 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;} - Selanjutnya cari instruksi dibawah ini menggunakan CTRL+F
penampakan kodenya biasanya akan terlihat menyerupai ini<b:includable id='comments' var='post'><b:includable id='comments' var='post'>...</b:includable> - Kemudian kopi + paste instruksi dibawah ini sempurna dibawah instruksi diatas
jangan lupa untuk menganti shortname https-unbloging-blogspot-com dengan shortname disqus milik Agan<b:includable id='disquscomments' var='post'> <b:if cond='data:blog.pageType == "item"'> <div id='open-comment'/> <div class='disclaimer_box'> <div class='content'> <b>Comment Policy:</b> GANTI DENGAN PERATURAN KOMENTAR DI BLOG AGAN </div> </div> <div class='buka-komen' id='buka-komen' on='tap:komen.show,tutup-komen.show,buka-komen.hide,open-comment.scrollTo("position"="top")' 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("position"="top")' role='button' tabindex='0' aria-label='Tutup Komentar'>Tutup Komentar</div> </b:if> <div class='disqus' hidden='' id='komen'> <amp-iframe expr:src='"https://cdn.rawgit.com/unbloging/AMPdisqus/5a559c7d/disqus.html?shortname=https-unbloging-blogspot-com&fontBodyFamily=sans-serif&fontLinkColor=11589D&canonicalurl=" + data:blog.canonicalUrl + "&title=" + 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> - Selanjutnya cari instruksi Seperti ini:
lalu ganti dengan instruksi yang ini:<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comments'/><b:include cond='data:blog.pageType == "item"' data='post' name='disquscomments'/> - Kemudian yang terakhir tambahkan instruksi
diatas instruksi related pos blog Agan, tujuannya supaya begitu kolom komentarnya ditutup ia akan eksklusif scroll ke related post blog<div id='close-comment'/>
Nah itulah Cara menciptakan sistem Buka Tutup atau Show Hide Comments Disqus di Blog AMP. Saya kira sangat gampang untuk diterapkan. Terimakasih sudah berkunjung dan jangan lupa untuk mampir ke kompiajaib.com daerah berguru blog paling lengkap dan juga tempatnya instruksi kode menyerupai diatas.