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 sanggup menunjukkan feedback atau testimoni yang mereka rasakan dikala sedang mengunjungi blog kalian atau bahkan sesuatu ilmu yang sanggup mereka dapatkan dari blog kalian
Dalam pembahasan kali ini, aku akan sedikit membahas wacana bagaimana cara menciptakan dan memasang isyarat show hide komentar untuk blog AMP Html. Seperti kita ketahui bahwa pada AMP HTML gres ada 2 buah sistem komentar yang mendukung AMP HTML yaitu:
- Komentar Facebook
- Komentar Disqus.
Baca Juga Artikel Lainnya :
- Cara Meningkatkan Kecepatan Loading dan Seo Template Evo Magz
- Cara Daftar Akun Github dan Cara Upload File Menggunakan GitHub
- Cara Praktis Memasang jQuery Di Blogger
- Cara Membuat dan Memasang Kode Anti Inspect Element DI Blogger
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 mempunyai isyarat Javascript pada amp-iframe menyerupai dibawah ini
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>
- Silahkan tambahkan isyarat 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 isyarat dibawah ini
<b:includable id='comments' var='post'> ............ </b:includable>
- Setelah struktur isyarat tersebut kalian temukan, langkah selanjutnya kalian copy dan pastekan isyarat dibawah ini sempurna dibawah kode </b:includable>
<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=komputerdia-cmt&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> - Setelah isyarat tersebut kalian pastekan, silahkan ganti goresan pena komputerdia-cmt dengan ID short name disqus kalian
- Langkah selanjutnya silahkan kalian copy dan pastekan isyarat dibawah ini, sempurna diatas isyarat related post blog kalian
<div id='close-comment'/>
- Langkah selanjutnya silahkan kalian cari isyarat dibawah ini
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comments'/> - Setelah isyarat diatas kalian temukan, silahkan ganti isyarat tersebut dengan isyarat dibawah ini
<b:include cond='data:blog.pageType == "item"' data='post' name='disquscomments'/>
B. Pemasangan Kode Show Hide Komentar Facebook Blog AMP
- Pastikan di blog AMP kalian sudah terpasang kdoe j4vascript amp-facebook-comments menyerupai dibawah ini
<script async='async' custom-element='amp-facebook-comments' src='https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js'/>
- Silahkan tambahkan isyarat 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 isyarat dibawah ini
<b:includable id='comments' var='post'> ............ </b:includable>
- Setelah struktur isyarat tersebut kalian temukan, langkah selanjutnya kalian copy dan pastekan isyarat dibawah ini sempurna dibawah kode </b:includable>
<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>
- Langkah selanjutnya silahkan kalian copy dan pastekan isyarat dibawah ini, sempurna diatas kode related post blog kalian
<div id='close-comment'/>
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comments'/> <b:include cond='data:blog.pageType == "item"' data='post' name='fbcomments'/>
- Selesai, dan semoga bermanfaat untuk kalian semunya
Tag :
Cara memasang isyarat komentar facebook show hide di blog amp
Cara memasang isyarat komentar disqus show hide di blog amp
Cara menciptakan komentar disqus tersembunyi di blog amp
Cara menciptakan 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
Sumber http://www.komputerdia.comCara memasang isyarat komentar facebook show hide di blog amp
Cara memasang isyarat komentar disqus show hide di blog amp
Cara menciptakan komentar disqus tersembunyi di blog amp
Cara menciptakan 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