Cara Membuat Tombol Show dan Hide Komentar Blog Non AMP - InformasiAjib

Cara Membuat Tombol Show dan Hide Komentar Blog Non AMP

Hallo semuanya ! Pada kesempatan kali ini saya akan berbagi tips bagaimana sih cara membuat kolom komentar dengan tombol Show dan hide atau dalam bahasa Indonesianya buka dan tutup (sembunyikan) khusus blog Non AMP. Membuat kolom komentar dengan tampilan seperti itu tentu akan sangat menarik dan bisa mempercantik tampilan blog daripada membiarkanya terbuka begitu saja.

Ketika sebuah halaman blog dibuka maka kolom komentar yang biasanya muncul akan disembunyikan. Untuk memunculkan kolom komentar tersebut kita diharuskan untuk menekan tombol "Show" dan jika ingin menutupnya kembali tekan tombol "Hide". Jadi maksudnya jika para pengunjung ingin berkomentar mereka harus menekan tombol di bawah postingan agar bisa berkomentar.

Seperti yang saya jelaskan di atas, cara ini hanya bisa dilakukan pada blog biasa saja yang bukan AMP dan menggunakan sistem komentar Disqus, Facebook dan juga bawaan blogger (Default). Baiklah, tanpa banyak basa-basi ikuti tutorial singkat dibawah ini untuk membuat tombol efek Show dan Hide komentar pada halaman/postingan blog.

Cara Membuat Tombol Komentar Show dan Hide :

  • Cari dan hapus kode seperti dibawah ini atau yang mirip
<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>
  • Kemudian ganti dengan kode berikut ini
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.buka-komen,.tutup-komen{font-family:inherit;background-color:#11589D;color:#fff;font-size:16px;line-height:1.3em;padding:8px 10px;text-align:center;font-weight:700;-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;margin:20px 0 0;cursor:pointer;}
.buka-komen{display:block;margin-bottom:20px}
#comments-box{display:none}
</style>
<div aria-label='Buka Komentar' class='buka-komen' id='buka-komen' onclick='document.getElementById(&quot;comments-box&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;none&quot;' role='button' tabindex='0'>Buka Komentar</div>
<div aria-label='Tutup Komentar' class='tutup-komen' hidden='hidden' id='tutup-komen' onclick='document.getElementById(&quot;comments-box&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;block&quot;' role='button' tabindex='0'>Tutup Komentar</div>
</b:if>
<div id='comments-box'>
        <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>
          </div>
  • Kalian bisa menyesuaikan warna tombol show hide yang di inginkan dengan mengedit kode warna pada background-color:#11589D;color:#fff .
  • Terakhir simpan Tema dan lihat hasilnya dengan cara membuka salah satu halaman atau postingan blog.
Show Comments

0 Response to "Cara Membuat Tombol Show dan Hide Komentar Blog Non AMP"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel