Cara Membuat Tombol Show Hide Komentar Blogger

Cara Membuat Tombol Show Hide Komentar Blogger

Mediaachmad.com - Cara membuat Tombol Show Hide Komentar Blogger. Pada kesempatan kali ini mediaachmad akan memberikan tutorial Cara membuat Tombol Show Hide Komentar Blogger. Manfaat yang dapat kalian dapatkan dari memasang fungsi Tombol Show Hide Komentar ini, yaitu dapat meringkas halaman website sobat, terutama untuk tingginya.

Jika ada postingan sobat yang mendapat komentar dengan jumlah 100 an maka akan membuat halaman blog semakin Panjang kebawah, scroll akan semakin mengecil. Namun jika sobat memasang fungsi ini, tampilan blog sobat akan lebih ringkas walaupun terdapat ratusan komentar.

Oke langsung saja silakan simak tutorial dibawah ini.

Cara membuat Tombol Show Hide Komentar Blogger

  1. Pertama, silakan sobat login ke Blogger – masuk ke TEMA – lalu klik EDIT HTML. Lalu silakan cari kode dibawah ini.
  2. <div class='comments' id='comments'>

    Biasanya kode diatas terdapat 2 buah, silakan ganti yang kedua kode diatas dengan kode dibawah 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. Kedua, tambahkan kode CSS dibawah ini di ATAS kode ]]></b:skin> atau </style>.
  4. .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;}
    
  5. Ketiga, tambahkan kode JS dibawah di ATAS </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. Terakhir, klik Simpan Tema dan sekarang lihat hasilnya.

Mungkin itu tutorial yang dapat mediaachmad sampaikan tentang Cara membuat Tombol Show Hide Komentar Blogger, Semoga dapat bermanfaat sekaian dan terima kasih.

Cara Membuat Tombol Show Hide Komentar Blogger
Wahyu Achmad
Her Blue Sky

Postingan Terkait

Posting Komentar