Onclick Event (Show and Hide Comment Blogger)

Onclick Event (Show and Hide Comment Blogger) - Menyembunyikan dan menampilkan comment blogger merupakan salah satu cara yang tepat untuk mengurangi scrolling yang terlalu panjang, Beberapa navigasi seperti related post, newer dan older post akan menjorok kebawah sehingga tanpa kita sadari bahwa komentar yang sudah terlalu banyak dapat mengurangi pendapatan iklan dan page view sebuah laman web (blogger), terlebih jika situs web diakses melalui platform mobile.

Agar itu tidak terjadi pada situs blog anda sebaiknya buatlah sebuah navigasi pada komentar blogger dengan menerapkan sistem buka tutup pada kolom komentar blog (Show and Hide Comment Blogger). Artikel ini akan menjelaskan dan membantu anda untuk membuat "Show and Hide Comment Blogger" dengan menggunakan Onclick Event dan sedikit javascript dan css.

Langkah-langkah Membuat Show and Hide Comment Blogger

1.Login ke Blogger > Template kemudian pilih Edit HTML
2.Cari dan temukan kode html yang serupa dengan kode dibawah ini
[code type="HTML"]<div class='comments' id='comments'>[/code]
Atau, jika tidak ditemukan maka cari kode di bawah ini, ini adalah kunci keberhasilan membuat / menambahkan Onclick Event (Show and Hide Comment Blogger) ke situs blog anda.
[code type="HTML"]<div class='comments'>[/code]
Kemudian ganti kode tersebut dengan kode onclick event dibawah ini;
[code type="HTML"]<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'/>[/code]
Selanjutnya, kita perlu menambahkan sedikit css, agar toggle "Show and Hide Comment Blogger" lebih terlihat menarik, tambahkan kode css di bawah ini tepat di area kumpulan css situs blog atau letakkan diatas kode ]]></b:skin> atau </style>.
[code type="CSS"]/* 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;}[/code]
Terakhir, tambahkan kode javascript Onclick Event Show and Hide Comment Blogger untuk memberikan sedikit efect show and hide comment blogger. Tambahkan javascript dibawah ini tepat diatas kode penutup </body> situs blog anda. Tekan tombol "Save Template" untuk mengakhiri "Langkah-langkah Membuat Show and Hide Comment Blogger" dan lihat hasilnya.

Jangan lupa cobalah tombol Show and Hide Comment untuk memastikan ia benar-benar bekerja dengan baik. Berikut javascript Onclick Event (Show and Hide Comment Blogger).
[code type="JavaScript"]<script type='text/javascript'>// 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>[/code]