Skip to main content
Ivhaa Design

follow us

Cara Membuat Show Hide Komentar Pada Blog AMP HTML

Pada blog AMP HTML ini hanya support komentar Disqus dan Facebook. Pada artikel kali ini saya akan memberikan tutorial lagi buat kalian semua, Tutorial tersebut adalah Cara Membuat Show Hide Komentar Pada Blog AMP HTML.

Baca juga:



Sebuah elment komentar pada sebuah blog itu sangat penting karena seseorang yang berkunjung bisa bertanya atau memberikan saran terhadap artikel yang kita buat. Selain itu juga bisa mendekatkan pengunjung dengan author blog tersebut .

Pada blog AMP HTML ini hanya support komentar Disqus dan Facebook. Pada artikel kali ini saya akan memberikan tutorial lagi buat kalian semua, Tutorial tersebut adalah Cara Membuat Show Hide Komentar Pada Blog AMP HTML. Keunggulan dari fitur ini adalah membuat blog menjadi ringan saat di akses pada browser kalian.

Jika blog kalian sudah ada komentar disqus nya jadi kita tinggal membuat tombol show hide nya.

Nah jika kalian ingin menerapkan komentar tersebut pada blog kalian bisa langsung aja simak tutorial berikut ini :


Show Hide Komentar Disqus

Langkah pertama kalian tambah kan CSS berikut ini di amp-custom di 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;}
Untuk warnanya kalian bisa ganti kode #11589D dengan sesuka hati kalian.

Langkah kedua cari kode berikut ini :

<b:includable id='comments' var='post'>
............
............
............
</b:includable>
Kemudian simpan kode berikut ini di bawah kode </b:includable> dari kode yang di atas.

<b:includable id='disquscomments' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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(&quot;position&quot;=&quot;top&quot;)' 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(&quot;position&quot;=&quot;top&quot;)' role='button' tabindex='0' aria-label='Tutup Komentar'>Tutup Komentar</div>
</b:if>
             <div class='disqus' hidden='' id='komen'>
<amp-iframe expr:src='&quot;https://cdn.rawgit.com/KompiAjaib/kompi-html/master/ampdisqus_blogger4.html?shortname=kangsudar&amp;fontBodyFamily=sans-serif&amp;fontLinkColor=11589D&amp;canonicalurl=&quot; + data:blog.canonicalUrl + &quot;&amp;title=&quot; + 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 ganti kalimat Comment Policy sesuai keinginan kalian dan nama Kangsudar ganti dengan Username Disqus kalian

Kemudian simpan kode <div id='close-comment'/> di bawah kode related-post ini bertujuan agar saat kita tutup komentarnya akan scrol ke atas.

Langkah berikut nya cari kode di bawah ini :

<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>
Ganti dengan kode di bawah ini :

<b:include cond='data:blog.pageType == &quot;item&quot;' data='post' name='disquscomments'/>
Ini yang paling penting cek apakah kode JS AMP ini sudah di pasang di blog kalian.

<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>
Semoga bermanfaat buat kalian untuk demonunya bisa cek di artikel ini sendiri dan coba tes komentar nya.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar