Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Buat Kolom Komentar Disqus Dengan Model Buka Tutup

Cara buat kolom komentar blog dengan model buka tutup dapat memberikan dampak positif bagi blog. Seperti yang telah kita ketahui bersama bahwa fungsi dari kolom komentar adalah tempat berinteraksi antara pengunjung dan pemilik blog.

Selain itu juga dengan adanya kolom komentar, pengunjung dapat memberikan respon atau tanggapan pada artikel yang kamu posting di blog.

Seperti misal kalau blog kamu merupakan blog tutorial, entah itu tutorial tentang membuat blog, tutorial Android, atau yang lainnya, maka dengan adanya kolom komentar pengunjung bisa secara praktis berkonsultasi atau bertanya mengenai hal-hal yang menurutnya belum paham.

Fungsi lain dari hadirnya kolom komentar pada blog adalah dapat menjadi media berpendapat, bertukar pikiran, antara pengunjung yang berkomentar dengan pemilik blog, dan juga dengan pengunjung lainnya.

Nah dengan demikian sangat penting ya kehadiran dari kolom komentar ini. Saran saja untuk temans sekalian untuk tidak menonaktifkan fitur yang satu ini ya.


Sebagai informasi tambahan, selain fitur kolom komentar yang telah disediakan platform blog seperti blogger ini, kamu juga bisa memodifikasi dengan menambahkan fitur komentar lainnya, misalnya komentar Facebook dan komentar Disqus.

Namun disisi lain, ada yang beranggapan bahwa kolom komentar ini dapat menjadikan bebang loading blog akan menjadi lambat ketika diakses. Nah untuk mengakali hal ini, maka kolom komentar dapat dibuat dengan model buka tutup. Hmmm seperti apa ya? Simak terus artikel ini ya temans..

Cara Buat Kolom Komentar Blog Dengan Model Buka Tutup


Solusi menghadirkan kolom komentar dengan model buka tutup dengan tujuan agar kecepatan loading blog tetap terjaga, tanpa harus meniadakan fitur yang penting ini.

Jika kamu merasa loading blog kamu lambat atau lemot, maka kamu bisa mencoba hal ini. Kolom komentar Disqus model buka tutup juga bisa diimplementasikan pada blog AMP dan caranya silahkan baca disini.

Baiklah temans, agar tidak berlama-lama menyimpan rasa penasaran langsung saja silahkan ikuti langkah-langkah berikut ini untuk membuat kolom komentar model buka tutup yaitu :
  • Masuk ke edit HTML, caranya dari dashboard Blogger -> Tema -> Edit HTML
  • Kemudian carilah kode ]]></b:skin> atau kode </style> , untuk memudahkannya kamu bisa gunakan fitur CTRL+F 
  • Selanjutnya copy kode HTML dibawah ini: 


/* 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;}


  • Jika sudah, paste-kan tepat diatas kode ]]></b:skin> atau kode </style> tadi
  • Kemudian tambahkan kode dibawah ini tepat diatas kode </body>


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


Belum selesai ya temans...

  • Langkah selanjutnya adalah carilah dua kode berikut :


<div class='comments' id='comments'>

  • Kemudian gantilah kedua kode tersebut dengan kode dibawah ini :


<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Buka Komentar</a>


<div class='clear'/>


        <div class='comments hide-content' id='comments'>


<a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">Tutup Komentar</a>


<div class='clear'/>



  • Jika sudah selesai, pilih simpan template
  • Silahkan cek hasilnya pada artikel postingan


Nah temans, jika pada artikel postingan dibagian kolom komentarnya sudah berupa model buka tutup artinya kamu sudah berhasil membuatnya. Bagi kamu yang belum, tertarik jugakah untuk mencoba hal yang satu ini? Semoga bermanfaat.

Posting Komentar untuk "Cara Buat Kolom Komentar Disqus Dengan Model Buka Tutup"