Cara Membuat Tombol Show Hide Komentar - , Hai sahabat blogger, bagaimana kabar kalian? Pada kesempatan sebelumnya fahrinheit sudah menyebarkan tips blogging mengenai cara menciptakan gradasi warna pada background template blog. Apakah kalian sudah mencobanya? Tips tersebut mempunyai kegunaan untuk mempercantik tampilan blog biar menarik pengunjung lebih betah bertahan di blog kalian. Nah pada kesempatan kali ini fahrinheit akan menyebarkan kembagi kembali salah satu tips yang tentunya sangat mempunyai kegunaan yaitu cara menciptakan tombol show-hide kolom komentar blogger.
Untuk tips yang satu ini juga saya ikuti dari salah satu blog panutan saya yaitu blog Kompi Ajaib dari Mas Adhi Suryadi. Walau terlihat sepele namun tombol show-hide (buka-tutup) kolom komentar ini sangat mempunyai kegunaan untuk mempercepat loading website anda. Tombol ini sanggup meringankan loading blog sebab perangkat (komputer/android) tidak perlu mengakses kolom komentar yang biasanya justru memperberat loading blog apalagi bila terdapat banyak komentar di dalam suatu artikel. Nah oleh sebab 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 menciptakan tombol show hide kolom komentar pada blogger ala blog Kompi Ajaib :
1. Masuk ke akun blogger anda
2. Selanjutnya masuk ke hidangan template dan pilih hidangan edit HTML
3. Setelah masuk hidangan edit html, selanjutnya cari script di bawah ini dengan memakai 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:
5. Untuk anda yang ingin mengubah warna background dan goresan pena pada tombol show-hide komentar biar lebih sesuai dengan warna template sanggup kalian ganti pada goresan pena berwarna merah yang ada pada script di atas. Atau bila ingin menciptakan gradasi warna pada tombol tersebut sanggup kalian ganti dengan script yang sudah fahrinheit bagikan pada artikel sebelumnya ihwal cara menciptakan gradasi warna pada background template blog.
6. Jika sudah final selanjutnya klik save untuk menyimpan. Sampai disini anda sudah final menciptakan tombol show-hide komentar sendiri
Nah itulah tadi cara menciptakan tombol show-hide kolom komentar pada blogger ala blog Kompi Ajaib. Sangat gampang 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 aneka macam tips blogging dari fahrinheit yang lainnya. See ya.
Penasaran bagaimana caranya? Yuk simak artikelnya berikut ini bagaimana cara menciptakan tombol show hide kolom komentar pada blogger ala blog Kompi Ajaib :
1. Masuk ke akun blogger anda
2. Selanjutnya masuk ke hidangan template dan pilih hidangan edit HTML
3. Setelah masuk hidangan edit html, selanjutnya cari script di bawah ini dengan memakai fitur pencarian (Ctrl + F) :
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comments'/>
4. Apabila sudah muncul script yang sudah anda cari di atas tadi selanjutnya gantilah dengan script yang ada di bawah ini:
<b:if cond='data:blog.pageType == "item"'>
<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>
<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 goresan pena pada tombol show-hide komentar biar lebih sesuai dengan warna template sanggup kalian ganti pada goresan pena berwarna merah yang ada pada script di atas. Atau bila ingin menciptakan gradasi warna pada tombol tersebut sanggup kalian ganti dengan script yang sudah fahrinheit bagikan pada artikel sebelumnya ihwal cara menciptakan gradasi warna pada background template blog.
6. Jika sudah final selanjutnya klik save untuk menyimpan. Sampai disini anda sudah final menciptakan tombol show-hide komentar sendiri
Nah itulah tadi cara menciptakan tombol show-hide kolom komentar pada blogger ala blog Kompi Ajaib. Sangat gampang 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 aneka macam tips blogging dari fahrinheit yang lainnya. See ya.
Cara Menciptakan Tombol Show Hide Kolom Komentar Ala Blog Kompi Ajaib
4/
5
Oleh
Arman Blogger News
