Dengan show hide komentar pada blog AMP HTML, maka loading halaman menjadi lebih ringan dan lebih mudah diakses.Sebelumnya saya sudah membagikan cara membuat show hide komentar Disqus AMP, namun menggunakan amp-accordion. Nah kali ini kita akan membuat show hide untuk komentar Disqus atau komentar Facebook dengan hanya menggunakan action AMP sehingga akan lebih mudah kustomisasi tombol show hide dengan CSS.
Di sini kita tinggal memilih sistem komentar apa yang akan digunakan dan komentar hanya ditampilkan di halaman postingan saja.
Jika Anda ingin mencobanya, silahkan ikuti langkah-langkah di bawah ini.
1. Show hide komentar Disqus.
Silahkan tambahkan CSS berikut di style amp-custom blog AMP Anda.
*{-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;}Silahkan sesuaikan
font-family yg sesuai dengan font yang digunakan pada blog Anda. Kode #11589D untuk mengatur warna background tombol show hide komentar.Kemudian silahkan cari kode berikut:
<b:includable id='comments' var='post'>
............
............
............
</b:includable>Silahkan simpan kode berikut di bawah kode
</b:includable> dari kode di atas.
<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> 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("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/KompiAjaib/kompi-html/master/ampdisqus_blogger4.html?shortname=kompi-minimalis&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>Silahkan sesuaikan kalimat pada Comment Policy sesuai dengan kehendak Anda. Kemudian ganti kode
kompi-minimalis dengan shortname Disqus blog Anda.Kemudian simpan kode
<div id='close-comment'/> di atas kode related post blog Anda. Ini berfungsi ketika pengunjung menutup komentar, maka halaman akan scroll ke area related post.Kemudian silahkan cari kode di bawah ini
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comments'/>Silahkan ganti dengan kode di bawah ini
<b:include cond='data:blog.pageType == "item"' data='post' name='disquscomments'/>Kemudian pastikan kode js untuk amp-iframe sudah terpasang pada blog Anda.
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>2. Show hide komentar Facebook.
Silahkan tambahkan CSS berikut di style amp-custom blog AMP Anda.
*{-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;}Silahkan sesuaikan
font-family yg sesuai dengan font yang digunakan pada blog Anda. Kode #11589D untuk mengatur warna background tombol show hide komentar.Kemudian silahkan cari kode berikut:
<b:includable id='comments' var='post'>
............
............
............
</b:includable>Silahkan simpan kode berikut di bawah kode
</b:includable> dari kode di atas.
<b:includable id='fbcomments' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<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("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 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>Silahkan sesuaikan kalimat pada Comment Policy sesuai dengan kehendak Anda.
Kemudian simpan kode
<div id='close-comment'/> di atas kode related post blog Anda. Ini berfungsi ketika pengunjung menutup komentar, maka halaman akan scroll ke area related post.Kemudian silahkan cari kode di bawah ini
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comments'/>Silahkan ganti dengan kode di bawah ini
<b:include cond='data:blog.pageType == "item"' data='post' name='fbcomments'/>Kemudian pastikan kode js untuk amp-facebook-comments sudah terpasang pada blog Anda.
<script async='async' custom-element='amp-facebook-comments' src='https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js'/>Selamat mencoba dan semoga bermanfaat.