Cara Membuat Tombol Show and Hide Komentar di Blogger

Jagoandzgn.com - Pada kesempatan kali ini admin akan memberikan sebuah tutorial bagaimana Cara Membuat Tombol Show / Hide Komentar di Blogger yaitu sebuah tombol yang dapat membuka dan menutup kolom komentar pada Blogger. Tombol buka tutup komentar ini memiliki banyak fungsinya, diantaranya adalah memperindah tampilan blog kamu, membuat blog kamu menjadi lebih profesional, meringakan loading blog walaupun hanya sedikit, dan Juga tampilan blog tidak berantakan karena kolom komentar.


Artikel ini terinspirasi dari sebuah blog yang mempunyai kolom kometar yang bisa membuka dengan sebuah tombol dan dengan menekan kembali untuk menutup kolom komentar tersebut. Untuk cara pembuatannya tidak terlalu sulit hanya memerlukan kode CSS dan Javascript pada template blog kalian.

Cara Membuat Tombol Show and Hide Komentar di Blogger

1. Silahkan kamu login di blogger.com dengan menggunakan Gmail kamu.
2. Masuk ke menu TEMA > klik Edit HTML
3. Kemudian kamu cari kode berikut ini dengan menggunakan CTRL + F <div class='comments' id='comments'> biasanya terdapat 2 markup, silahkan kamu ganti kedua kode tersebut 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'/>

4. Kemudian kamu tambahkan kode CSS dibawah ini tepat di ATAS kode ]]></b:skin> atau </style>

/* 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:#555;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s}
#comments a.hiddencontent {background:#fff;color:#555;transition:all .3s}
a.showcontent:hover{background:#fff;color:#555;}
#comments a.hiddencontent:hover{background:#555;color:#fff;}

5. Langkah terakhir adalah dengan menambahkan kode JavaScript dibawah ini tepat di ATAS kode </body> pada template blog kalian.

<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>

6. Silahkan klik SIMPAN dan Selesai.

Nah, Begitulah Cara Membuat Tombol Show / Hide Komentar di Blogger apabila kamu memiliki kendala dalam mebuat tutorial diatas kamu bisa konsultasi kami lewat komentar dibawah artikel ini atau dengan Contact kami di halaman Contact.
Seorang yang memiliki kepribadian yang menyendiri, tanpa mengenal dunia luar hanya melalui dunia online.
  • Facebook
  • WhatsApp
  • Instagram
  • Tampilkan Komentar
    Sembunyikan Komentar

    4 Komentar

    1. Mas, ini berhasil caranya. Cuma kok di klik komentarnya nggak muncul.

      BalasHapus
      Balasan
      1. Gak muncul gimana pas, coba cek lagi nanti ada yang kode yang belum di terapkan

        Hapus
    2. kalau sudah membuat tampilan ini kemudian membalikkan ke semula gimana ya mas?

      BalasHapus
      Balasan
      1. Dengan menghapus kode yang di tambahkan dan menambahkan kode yang dihapus, Terima kasih sudah berkunjung di Jagoandzgn

        Hapus

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel