Cara Mudah Membuat Show Hide Komentar Blogger

Tampilan yang rapi dan loading yang cepat adalah salah satu faktor penting yang harus ada di dalam sebuah blog. Kedua aspek diatas harus diperhatikan oleh para blogger dalam mendesain blognya. Oleh karena itu, banyak blogger yang menggunakan show and hide kedalam area komentar pada blognya.

Cara Mudah Membuat Show Hide Komentar Blogger

Memasang show hide pada komentar blog bukanlah tanpa tujuan. Pasalnya, jika postingan pada blog memiliki banyak komentar, tentunya akan memakan banyak tempat dan loading blog menjadi berat. Oleh karena itu, tujuan dari menambahkan fungsi show hide komentar adalah untuk meringankan loading di halaman postingan blog dan juga membuat tampilan terlihat lebih rapi.

Cara Menambahkan Show Hide Komentar Blogger

Penggunaan show hide komentar pada blog akan membuat blog menjadi lebih rapi dan ringan, meskipun banyak komentar yang ada di sebuah postingan. Hal itu karena cara kerja dari script ini adalah kolom komentar akan tetap tertutup sebelum pengunjung membua area komentar dan meng-klik tombol untuk membuka komentar.

Didalam blog sendiri biasanya terdapat 2 kode <div class="comments" id="comments"> yang berfungsi untuk membungkus elemen komentar. Kode pertama untuk keadaan kolom komentar yang belum terisi komentar pengunjung, sedangkan kode yang kedua untuk kondisi dimana sudah terdapat komentar pengunjung pada artikel. Lalu, bagaimana cara membuat show hide komentar di blogger ? simak proses dibawah ini.

1. Pertama, login Blogger > Tema > Edit HTML.

2. Kemudian cari kode <div class='comments' id='comments'> biasanya terdapat 2 kode tersebut. Ganti 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'/>

Cara Mudah Membuat Show Hide Komentar Blogger

3. Lalu tambahkan kode berikut sebelum atau diatas ]]></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:#02782f;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s}
#comments a.hiddencontent {background:#fff;color:#555555;transition:all .3s}
a.showcontent:hover{background:#fff;color:#02782f;}
#comments a.hiddencontent:hover{background:#555555;color:#fff;}

Cara Mudah Membuat Show Hide Komentar Blogger

4. Selanjutnya tambahkan kode dibawah ini sebelum </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>

Cara Mudah Membuat Show Hide Komentar Blogger

5. Simpan template

Demikian tutorial tentang Cara Mudah Membuat Show Hide Komentar Blogger, Jika bingung atau ada kesulitan, silahkan tanyakan di kolom komentar. Terimakasih dan selamat mencoba

Artikel Terkait

Belum ada Komentar untuk "Cara Mudah Membuat Show Hide Komentar Blogger"

Posting Komentar

Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini atau dengan menghubungi kami di halaman kontak.

1. Centang kotak Notify me/Beri tahu saya untuk mendapatkan notifikasi komentar.
2. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel