Cara Menciptakan Show Hide Comments Blogger Dengan Onclick Event
Cara Membuat Show Hide Comments Blogger dengan Onclick Event - Maksud dari judul yang akan saya bahas kini ini yaitu menambahkan fungsi show and hide ke dalam area kolom komentar blogger dengan memakai sebuah atribut tombol, dimana tombol ini berfungsi untuk menampilkan dan menyembunyikan form kotak kolom komentar serta seluruh isi komentar pengunjung blog.
Adapun tujuan menambahkan fungsi ini yaitu untuk meringankan loading halaman postingan blog yang sudah terdapat banyak komentar pengunjung didalamnya. Coba anda bayangkan kalau sebuah postingan di blog mempunyai ratusan komentar bahkan hingga ribuan. Saya sanggup pastikan loading halaman postingan tersebut akan menjadi lambat, sebab harus me-loading gambar atau avatar profil dari para komentator terlebih dahulu.
Sistem kerja script ini cukup sederhana yaitu ketika postingan dibuka, area komentar akan tetap tertutup sebelum anda membuka area komentar dengan menekan tombol Show Comments dan anda pun sanggup menutup kembali area komentar dengan menekan kembali tombol Hide Comments ibarat Sistem kerja Spoiler.
Untuk lebih jelasnya sanggup dilihat pada gambar berikut.
Menambahkan Fungsi Show and Hide ke Area Komentar Blogger dengan Tombol
Untuk menambahkan fungsi buka dan tutup kolom komentar ini cukup sederhana sekali. Disini saya akan memakai beberapa isyarat CSS, isyarat HTML, dan isyarat JavaScript untuk ditambahkan ke dalam isyarat template blog. Berikut langkah-langkahnya.
1. Masuk ke akun blogger anda.
2. Pilih hidangan Template atau Tema.
3. Klik Backup / Pulihkan untuk download full template (Untuk berjaga-jaga kalau terjadi kesalahan dikala melaksanakan edit template).
4. Jika sudah, silahkan klik Edit HTML.
5. Letakkan isyarat CSS dibawah ini sebelum kode ]]></b:skin>.
Kesimpulan :
Dengan menciptakan kolom komentar memakai fungsi show hide, maka ketika pengunjung mengakses salah satu artikel yang mempunyai banyak komentar, loading atau proses kanal halaman tersebut akan menjadi lebih ringan dan cepat, sebab kolom komentar yang mempunyai banyak komentar tidak akan terlihat sebelum tombol show komentar di klik oleh pemilik blog maupun pengunjung blog. Selain itu tampilan halaman postingan akan terlihat sederhana yakni pendek tidak memanjang ke bawah sehingga ketika pengunjung hendak ingin melihat gadget tertentu yang terletak pada belahan paling bawah ( footer ) blog akan merasa kesulitan dengan menscroll roll mouse beberapa kali untuk mencapai ke belahan paling bawah.
Demikian tutorial sederhana mengenai bagaimana menambahkan fungsi show and hide ke area komentar blogger dengan onclick event, Selamat mencoba dan biar berhasil. " Happy Blogging "
Sumber https://harmansh.blogspot.com/
Adapun tujuan menambahkan fungsi ini yaitu untuk meringankan loading halaman postingan blog yang sudah terdapat banyak komentar pengunjung didalamnya. Coba anda bayangkan kalau sebuah postingan di blog mempunyai ratusan komentar bahkan hingga ribuan. Saya sanggup pastikan loading halaman postingan tersebut akan menjadi lambat, sebab harus me-loading gambar atau avatar profil dari para komentator terlebih dahulu.
Sistem kerja script ini cukup sederhana yaitu ketika postingan dibuka, area komentar akan tetap tertutup sebelum anda membuka area komentar dengan menekan tombol Show Comments dan anda pun sanggup menutup kembali area komentar dengan menekan kembali tombol Hide Comments ibarat Sistem kerja Spoiler.
Untuk lebih jelasnya sanggup dilihat pada gambar berikut.
 |
| Show Comments |
 |
| Hide Comments |
Menambahkan Fungsi Show and Hide ke Area Komentar Blogger dengan Tombol
Untuk menambahkan fungsi buka dan tutup kolom komentar ini cukup sederhana sekali. Disini saya akan memakai beberapa isyarat CSS, isyarat HTML, dan isyarat JavaScript untuk ditambahkan ke dalam isyarat template blog. Berikut langkah-langkahnya.
1. Masuk ke akun blogger anda.
2. Pilih hidangan Template atau Tema.
3. Klik Backup / Pulihkan untuk download full template (Untuk berjaga-jaga kalau terjadi kesalahan dikala melaksanakan edit template).
4. Jika sudah, silahkan klik Edit HTML.
5. Letakkan isyarat CSS dibawah ini sebelum kode ]]></b:skin>.
/* Show and Hide Comments */6. Letakkan isyarat di bawah ini sebelum isyarat </body>.
.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;}
<script type='text/javascript'>7. Temukan isyarat berikut.
//<![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>
<div class='comments' id='comments'>Biasanya terdapat dua isyarat ibarat diatas di dalam template. Ganti kedua kedua tersebut satu persatu dengan isyarat di bawah ini.
<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Show comments</a>8. Terakhir klik Simpan Tema atau Save Template.
<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'/>
Kesimpulan :
Dengan menciptakan kolom komentar memakai fungsi show hide, maka ketika pengunjung mengakses salah satu artikel yang mempunyai banyak komentar, loading atau proses kanal halaman tersebut akan menjadi lebih ringan dan cepat, sebab kolom komentar yang mempunyai banyak komentar tidak akan terlihat sebelum tombol show komentar di klik oleh pemilik blog maupun pengunjung blog. Selain itu tampilan halaman postingan akan terlihat sederhana yakni pendek tidak memanjang ke bawah sehingga ketika pengunjung hendak ingin melihat gadget tertentu yang terletak pada belahan paling bawah ( footer ) blog akan merasa kesulitan dengan menscroll roll mouse beberapa kali untuk mencapai ke belahan paling bawah.
Demikian tutorial sederhana mengenai bagaimana menambahkan fungsi show and hide ke area komentar blogger dengan onclick event, Selamat mencoba dan biar berhasil. " Happy Blogging "
Sumber https://harmansh.blogspot.com/