Cara Memasang Show And Hide Komentar Blogger dengan Onclick Event

Daftar isi [Tampil]
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.
Show comments
Hide comments

10 Komentar untuk "Cara Memasang Show And Hide Komentar Blogger dengan Onclick Event"

  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
Catatan Untuk Para Jejaker
  • 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.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Copyright © 2019 - 2020 Serieswans - All Rights Reserved Created With