Cara Membuat Tombol Show Hide Kolom Komentar ala Blog ini
Ditulis pada: 7/02/2020
Asaalamualaikum sobat Shannenpio akan menerangkan Cara Membuat Tombol Show Hide Kolom Komentar ala Blog ini - Bagaimana kabar kalian? Pada kesempatan sebelumnya fahrinheit sudah berbagi tips blogging mengenai cara membuat gradasi warna pada background template blog. Apakah kalian sudah mencobanya? Tips tersebut berguna untuk mempercantik tampilan blog agar menarik pengunjung lebih betah bertahan di blog kalian. Nah pada kesempatan kali ini fahrinheit akan berbagi kembagi kembali salah satu tips yang tentunya sangat berguna yakni cara membuat tombol show-hide kolom komentar blogger.
Untuk tips yang satu ini juga saya ikuti dari salah satu blog panutan saya yakni blog Kompi Ajaib dari Mas Adhi Suryadi. Walau terlihat sepele namun tombol show-hide (buka-tutup) kolom komentar ini sangat berguna untuk mempercepat loading website anda. Tombol ini dapat meringankan loading blog karena perangkat (komputer/android) tidak perlu mengakses kolom komentar yang biasanya justru memperberat loading blog apalagi jika terdapat banyak komentar di dalam suatu artikel. Nah oleh karena itu tips yang satu ini sangat disarankan bagi anda yang mempunyai blog dengan kecepatan loading halaman yang cukup lama.
Penasaran bagaimana caranya? Yuk simak artikelnya berikut ini bagaimana cara membuat tombol show hide kolom komentar pada blogger ala blog Kompi Ajaib .
1. Masuk ke akun blogger anda.
2. Selanjutnya masuk ke menu template dan pilih menu edit HTML.
3. Setelah masuk menu edit html, selanjutnya cari script di bawah ini dengan menggunakan fitur pencarian (Ctrl + F) :.
4. Apabila sudah muncul script yang sudah anda cari di atas tadi selanjutnya gantilah dengan script yang ada di bawah ini:.
<style>
.buka-komen,.tutup-komen{font-family:inherit;background:#696969;color:#fff;font-size:16px;line-height:1.3em;padding:8px 10px;text-align:center;font-weight:700;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transition:all 218ms;-moz-transition:all 218ms;-o-transition:all 218ms;transition:all 218ms;-webkit-user-select:none;-moz-user-select:none;margin:20px 0 0;cursor:pointer;}
.buka-komen{display:block;margin-bottom:20px}
#comments-box{display:none}
</style>
<div aria-label='Buka Komentar' class='buka-komen' id='buka-komen' onclick='document.getElementById("comments-box").style.display="block";document.getElementById("tutup-komen").style.display="block";document.getElementById("buka-komen").style.display="none"' role='button' tabindex='0'>Buka Komentar</div>
<div aria-label='Tutup Komentar' class='tutup-komen' hidden='hidden' id='tutup-komen' onclick='document.getElementById("comments-box").style.display="none";document.getElementById("tutup-komen").style.display="none";document.getElementById("buka-komen").style.display="block"' role='button' tabindex='0'>Tutup Komentar</div>
</b:if>
<div id='comments-box'>
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comments'/>
</div>
5. Untuk anda yang ingin mengubah warna background dan tulisan pada tombol show-hide komentar agar lebih sesuai dengan warna template bisa kalian ganti pada tulisan berwarna merah yang ada pada script di atas. Atau jika ingin membuat gradasi warna pada tombol tersebut bisa kalian ganti dengan script yang sudah fahrinheit bagikan pada artikel sebelumnya tentang cara membuat gradasi warna pada background template blog..
6. Jika sudah selesai selanjutnya klik save untuk menyimpan. Sampai disini anda sudah selesai membuat tombol show-hide komentar sendiri.
Nah itulah tadi cara membuat tombol show-hide kolom komentar pada blogger ala blog Kompi Ajaib. Sangat mudah sekali bukan? Anda hanya tinggal menambahkan beberapa script yang sudah fahrinheit bagikan di atas. Dengan memasang tombol ini maka pagespeed blog anda akan menjadi lebih cepat dari sebelumnya. Sekarang selamat mencoba sendiri. Demikian artikel kali ini, semoga bermanfaat. Nantikan lagi berbagai tips blogging dari fahrinheit yang lainnya. See ya.