Memasang Show Hide Komentar Pada Blog Amp Html
Dengan show hide komentar pada blog AMP HTML, maka loading halaman menjadi lebih ringan dan lebih gampang diakses.Sebelumnya aku sudah membagikan cara menciptakan show hide komentar Disqus AMP, namun memakai amp-accordion. Nah kali ini kita akan menciptakan show hide untuk komentar Disqus atau komentar Facebook dengan hanya memakai action AMP sehingga akan lebih gampang kustomisasi tombol show hide dengan CSS.
Di sini kita tinggal menentukan sistem komentar apa yang akan dipakai 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;}
.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 dipakai pada blog Anda. Kode #11589D untuk mengatur warna background tombol show hide komentar.Kemudian silahkan cari isyarat berikut:
<b:includable id='comments' var='post'>
............
............
............
</b:includable>
Silahkan simpan isyarat berikut di bawah isyarat
</b:includable> dari isyarat 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 isyarat
kompi-minimalis dengan shortname Disqus blog Anda.Kemudian simpan isyarat
<div id='close-comment'/> di atas isyarat related post blog Anda. Ini berfungsi saat pengunjung menutup komentar, maka halaman akan scroll ke area related post.Kemudian silahkan cari isyarat di bawah ini
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comments'/>
Silahkan ganti dengan isyarat di bawah ini
<b:include cond='data:blog.pageType == "item"' data='post' name='disquscomments'/>
Kemudian pastikan isyarat 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 dipakai pada blog Anda. Kode #11589D untuk mengatur warna background tombol show hide komentar.Kemudian silahkan cari isyarat berikut:
<b:includable id='comments' var='post'>
............
............
............
</b:includable>
Silahkan simpan isyarat berikut di bawah isyarat
</b:includable> dari isyarat 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 isyarat
<div id='close-comment'/> di atas isyarat related post blog Anda. Ini berfungsi saat pengunjung menutup komentar, maka halaman akan scroll ke area related post.Kemudian silahkan cari isyarat di bawah ini
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comments'/>
Silahkan ganti dengan isyarat di bawah ini
<b:include cond='data:blog.pageType == "item"' data='post' name='fbcomments'/>
Kemudian pastikan isyarat 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 supaya bermanfaat.
0 Response to "Memasang Show Hide Komentar Pada Blog Amp Html"
Post a Comment