Blog

Membuat Show dan Hide Commentar Blog

Mungkin anda pernah melihat komentar blogger yang akan terbuka jika di klik terlebih dahulu seperti yang ada diblog ini, kali ini saya akan membahasnya. Apa gunya ? tentunya agar blog tidak berat karena harus membuka banyak komentar untuk blog yang sudah terkenal dan banyak pegunjungnya mungkin ini salah satu cara agar blog lebih cepat di buka oleh pengunjung dan tidak terganggu oleh banyaknya komentar di blog anda.

Penampilannya sebelum di klik dan sesudah di klik

Sebelum Di Klik

Setelah Di Klik

Langsung saja caranya seperti di bawah ini.

  1. Cari Kode di bawah ini
  2.  <div class='comments' id='comments'> 

    *Biasanya terdapat 2 Kode seperti di atas silahkan ganti Kode di atas 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'/>

  3. Tambahkan CSS di bawah ini di </style> atau ]]></b:skin>
  4.  /* Show and Hide Comments KecoaINDO */
    .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:#0EA46E;border:2px solid;border-radius:3px;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:#0EA46E;}
    #comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}

  5. Tambahkan JavaScript di bawah ini sebelum </body>
  6.  <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>

  7. Langkah terakhir tinggal save dan lihat hasilnya 
Silahkan Klik Demo di bawah ini lalu sorot bagian komentarnya.

8 Comment(s)

  1. Dewangga Dias Prayoga
    April 10, 2016

    Wow keren nih, responsive juga

  2. Ryan Pratama
    April 10, 2016

    Coba dulu tapi sebelum di coba lebh baik di backup dulu kalaupun ada error tinggal di kembalikan backpuppannya.

  3. Muhammad 'Keyzee' Anggi
    April 10, 2016

    apa ini support buat semua template gan??
    takutnya ga support buat template ane xD

  4. Roby firmansyah
    April 10, 2016

    Pertamax gan, ijin coba 😀

  5. Aldo Dimas Anugrah
    April 10, 2016

    Nice tutorial gan(y) ijin praktek

  6. Ryan Pratama
    April 10, 2016

    iya nih baru selesai saya ketik hihihi, semoga bermanfaat untuk blog anda.

  7. Hax Worlds
    April 10, 2016

    wih keren nih mas 😀

  8. Mochaab Hafidh
    December 12, 2016

    waah mayan nih gan thanks ya

Write a comment