VEzcwOIzJo2ocMRnvNfZmXylSxSqdBdXDBtRZkxw
Bookmark

Cara Memasang Show And Hide Komentar Blogger dengan Onclick Event

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.
12 komentar

12 komentar

  • Marfa Umi
    Marfa Umi
    Oktober 19, 2021
    Terima kasih tutorialnya. Di beberapa artikel ada yang tidak bisa diklik dan muncul tanda pagar di akhir url. Itu kira2 kenapa yah kak?
    • Marfa Umi
      Kurniawan
      Oktober 25, 2021
      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
    Reply
  • Khenzl
    Khenzl
    Januari 09, 2020
    Ke sensor ga bisa tulis Comen script
    Reply
  • Khenzl
    Khenzl
    Januari 09, 2020
    )
    ......................................................
    (
    Reply
  • Khenzl
    Khenzl
    Januari 09, 2020
    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
    • Khenzl
      Mr.Tutorial
      Januari 09, 2020
      nonaktfikan komentar di menu halamannya
    Reply
  • Agrikompleks
    Agrikompleks
    Desember 06, 2019
    bagus bang langsung saya terapkan. tapi maaf bang saya punya masalah, kenapa show dan hidenya di blog saya bersamaan munculnya yaa..

    Terimakasih
    • Agrikompleks
      Kurniawan
      Desember 07, 2019
      Bersamaan gimana mas, silahkan WA saja 089663419254 ...kirim foto nya biar saya tau detailnya
    • Agrikompleks
      Agrikompleks
      Desember 07, 2019
      terimakasih bang moho izin saya wa yaaa
    • Agrikompleks
      Kurniawan
      Desember 07, 2019
      Silahkan gan, saya tunggu
    Reply
  • Syahrul Arul
    Syahrul Arul
    September 28, 2019
    Kalo tutorial memunculkan sebagian komentar ada gan?? misal dibuat jadi beberapa halaman
    • Syahrul Arul
      Kurniawan
      Oktober 02, 2019
      Bisa kayaknya gan, soalnya saya belum coba
    Reply