-->

Cara Memasang Show And Hide Komentar Blogger dengan Onclick Event

Daftar Isi [Tampilkan]
Serieswans.com - Pada artikel sebelumnya saya juga sudah membuat artikel mengenai cara membuat show and hide komentar Disqus. tapi sekarang saya akan buat show and hide untuk komentar blogger.

Show anda Hide Komentar merupakan fitur yang berfungsi untuk membuka atau menyembunyikan widget komentar yang ada di situs website atau blog anda.
Cara Memasang Show And Hide Komentar Blogger dengan Onclick Event
Show And Hide Komentar Blogger
Dengan adanya penambahan artribut Javascript (Onclick Event) fitur ini akan jauh bekerja dengan baik. tujuan penambahan fungsi tersebut adalah untuk meringankan loading blog pada halaman postingan, khusus blog anda yang sudah banyak komentarnya ini sangat pas supaya meringankan
beban loading blognya.

Untuk cara kerja script ini adalah isi konten komentar ini akan tetap tertutup sebelum anda membuka kolom komentar tersebut dengan menekan tombol show and hide. oke kita langsung saja ke tutorialnya. silahkan simak dan pahami cara di bawah ini/

Cara Memasang Show And Hide Komentar Blogger dengan Onclik Event

  • Masuk ke Menu Dashboard Blogger => Pilih Tema => Edit HTML
  • Kemudian cari kode <div class='comments' id='comments'> dan kode tersebut biasanya ada 2. silahkan nanti ubah kode keduanya
Gunakan tombol CTRL + F untuk mempermudah mencari kode tersebut 
  • Jika sudah ketemu, hapus kode tersebut dan ganti dengan kode di bawah ini
  • 
    <a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Show comments</a>
    <div class='clear'/>
            <div class='comments hide-content' id='comments'>
    <a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">Hide comments</a>
    <div class='clear'/>
  • Selanjutnya cari kode ]]></b:skin> atau </style>
  • Lalu tambahkan kode di bawah tepat di atas kode tersebut

/* Show and Hide Comments */
.hide-content{display:none;margin:0;padding:0;}
a.showcontent,#comments a.hiddencontent{display:block;text-decoration:none;position:relative;color:#fff;font-weight:700;font-size:15px;padding:12.5px 0;background:#5593f0;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s}
#comments a.hiddencontent {background:#fff;color:#acb3b8;transition:all .3s}
a.showcontent:hover{background:#fff;color:#5593f0;}
#comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}
  • Setelah itu Cari kode </body>
  • Kemudian tambahakan kode di bawah ini dan letakan di atas kode tersebut
<script type='text/javascript'>
//<![CDATA[
// Show and Hide Comments
function showComm(e){document.getElementById(e)&&("none"!=document.getElementById(e+"-show").style.display?(document.getElementById(e+"-show").style.display="none",document.getElementById(e).style.display="block"):(document.getElementById(e+"-show").style.display="block",document.getElementById(e).style.display="none"))};
//]]>
</script>
  • Terakhir simpan tema atau template 
Setiap Template biasanya memiliki struktur data yang berbeda, silahkan anda sesuaikan saja kode di atas.
Nah, itulah tutorial mengenai Cara Memasang Show And Hide Komentar Blogger dengan Onclick Event. jika anda masih belum paham, silahkan tanyakan di kolom komentar di bawah. semoga bermanfaat dan jangan lupa bagikan ke teman-teman ataupun media sosial anda.
Next
Previous
Tidak ada kata "Tapi" dan "Nanti" jika anda ingin Sukses
  • Facebook
  • Twitter
  • Instagram
  • Related Posts

    Buka Komentar ( 12 )
    Tutup Komentar

    12 Komentar

    1. Kalo tutorial memunculkan sebagian komentar ada gan?? misal dibuat jadi beberapa halaman

      BalasHapus
      Balasan
      1. Bisa kayaknya gan, soalnya saya belum coba

        Hapus
    2. bagus bang langsung saya terapkan. tapi maaf bang saya punya masalah, kenapa show dan hidenya di blog saya bersamaan munculnya yaa..

      Terimakasih

      BalasHapus
      Balasan
      1. Bersamaan gimana mas, silahkan WA saja 089663419254 ...kirim foto nya biar saya tau detailnya

        Hapus
      2. terimakasih bang moho izin saya wa yaaa

        Hapus
      3. Silahkan gan, saya tunggu

        Hapus
    3. Biar cuma muncul di halaman postingan, ga muncul di halaman Navigasi kayak sitemap, contact, dll gimana ya gan?? Sudah saya tambah


      ......................................................


      Tapi tetap tampil dihalaman navigasi

      BalasHapus
      Balasan
      1. nonaktfikan komentar di menu halamannya

        Hapus
    4. )
      ......................................................
      (

      BalasHapus
    5. Ke sensor ga bisa tulis Comen script

      BalasHapus
    6. Terima kasih tutorialnya. Di beberapa artikel ada yang tidak bisa diklik dan muncul tanda pagar di akhir url. Itu kira2 kenapa yah kak?

      BalasHapus
      Balasan
      1. menurut saya kemungkinan kalo muncul tanda pagar di akhir url, ada kesalahan pada template atau memang belum di atur link pada artikel tersebut, biasanya halaman contact, atribut,Home, dll perlu edit di bagian templatenya kak. semoga membantu

        Hapus
    • Mohon Tinggalkan jejak sesuai dengan judul artikel.
    • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
    • Dilarang mencantumkan link aktif di komentar.
    • Komentar dengan link aktif akan otomatis dihapus
    • Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.
    • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
    • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
    • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
      <i>#comments</i>
    • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
      <em>#comments {margin:0; padding:10px 15px}</em>

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel

    x
    Berlangganan

    Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!