gacerindo.com - Adanya kolom komentar pada sebuah blog rasanya sangat penting. Manfaatnya agar terjalin komunikasi antara pengunjung dengan pemilik blog atau website.Akan tetapi untuk blog AMP hanya ada 2 fitur yang mendukung komentar di blog yaitu komentar facebook dan Disqus.
Permasalahan yang muncul biasanya dengan adanya platform komentar pada blog, akan memperberat loading blog kita. Salah satu caranya yaitu dengan membuat tombol show hide untuk komentar.
Dengan pemakaian show hide komentar, maka loading blog akan sedikit cepat. Itu karena pemuatan komentar akan dilakukan setelah kita menekan tombol show.
Berikuti kode untuk membuat tombol show hide komentar pada blog
Show Hide Komentar Disqus
1. Tambahkan CSS berikut pada template blog AMP
*{-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 dan kode yang dikasih mark itu sebagi warna latar belakang.
2. Cari Kode berikut ini
<b:includable id='comments' var='post'>
............
............
............
</b:includable>
3. Simpan Kode Berikut ini dibawah kode </b:includable> pada kode diatas
<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=gacerindo&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>
Sesuaikan kalimat pada Comment Policy dengan kalimat yang kamu inginkan.
4. simpan kode <div id='close-comment'/> diata kode related posts yang ada pada template kamu.5. Cari kembali kode dibawah ini
<b:include cond="data:blog.pageType in {"static_page","item"}" data="post" name="comments">
6. Ganti kode diatas dengan kode dibawah ini
<b:include cond='data:blog.pageType == "item"' data='post' name='disquscomments'/>
7. Pastikan kode JS untuk amp-iframe sudah terpasang pada blog kamu
Show Hide Komentar Facebook
1. Tambakan kode CSS dibawah ini dibawah kode style amp-costum
*{-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 dan kode yang dikasih mark itu sebagi warna latar belakang.
2. Cari Kode berikut ini
<b:includable id='comments' var='post'>
............
............
............
</b:includable>
3. Simpan Kode Berikut ini dibawah kode </b:includable> pada kode diatas
<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>
Sesuaikan kalimat pada Comment Policy dengan kalimat yang kamu inginkan.
4. simpan kode <div id='close-comment'/> diata kode related posts yang ada pada template kamu.
5. Cari kembali kode dibawah ini
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comments'/>
6. Ganti kode diatas dengan kode dibawah ini
<b:include cond='data:blog.pageType == "item"' data='post' name='fbcomments'/>
7. Pastikan kode JS untuk amp-iframe sudah terpasang pada blog kamu
