Cara Menciptakan Tombol Buka Tutup Komentar Pada Blogger
Cara Membuat Tombol Buka Tutup Komentar - , Hai sobat blogger, apa kabar? Sudah usang blogotech tidak membuatkan informasi dikarenakan kesibukan di dunia nyata. Nah pada kesempatan kali ini akan membuatkan informasi mengenai blogging ialah cara menciptakan tombol buka tutup komentar. Bagi anda yang merasa template anda loadingnya terlalu lambat mungkin sanggup memakai cara ini alasannya website kita hanya menampilkan tombol buka-tutup komentar sehingga tidak perlu meloading komentar-komentar yang ada.
Penasaran bagaimana caranya? Yuk simak artikelnya berikut ini bagaimana cara menciptakan tombol buka tutup komentar pada blogger ala :
1. Masuk ke laman blogger anda atau dengan mengklik link DISINI
2. Setelah masuk selanjutnya masuk ke edit template anda melalui sajian Theme
3. Setelah masuk ke edit html template, selanjutnya cari arahan script di bawah ini dengan memakai fitur pencarian Ctrl + F :
4. Jika sudah menemukan arahan script di atas silahkan ganti dengan arahan di bawah ini:
5. Untuk mengubah warna background tombol tab buka tutup komentar silahkan edit pada goresan pena merah yang ada pada arahan di atas. Script di atas sajikan dengan memperlihatkan warna gradasi 3 warna pada tombol tab buka tutup komentar. Jika ingin lebih terang bagaimana cara mengeditnya sanggup kalian lihat pada artikel sebelumnya yang berjudul Cara Membuat Gradasi Warna Pada Background Blog.
Nah itulah tadi cara menciptakan tombol buka tutup komentar pada blogger. Selain mempercantik tampilan blog, tombol buka tutup komentar ini juga sanggup menambah pagespeed website anda sehingga tidak perlu memuat loading terlalu usang alasannya banyaknya komentar. Anda pun sanggup menerapkannya pada blog anda sendiri menyerupai yang sudah blogotech lakukan. Demikian artikel kali ini agar bermanfaat.
Baca Juga
3. Setelah masuk ke edit html template, selanjutnya cari arahan 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. Jika sudah menemukan arahan script di atas silahkan ganti dengan arahan di bawah ini:
<b:if cond='data:blog.pageType == "item"'>
<style>
.buka-komen,.tutup-komen{font-family:inherit;background:#696969;
background:-moz-linear-gradient(left,#696969 0,#000000 80%,#800000 100%);
background:-webkit-linear-gradient(left,#696969 0,#000000 80%,#800000 100%);
background:linear-gradient(to right,#696969 0,#000000 80%,#800000 100%);;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>
.buka-komen,.tutup-komen{font-family:inherit;background:#696969;
background:-moz-linear-gradient(left,#696969 0,#000000 80%,#800000 100%);
background:-webkit-linear-gradient(left,#696969 0,#000000 80%,#800000 100%);
background:linear-gradient(to right,#696969 0,#000000 80%,#800000 100%);;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 mengubah warna background tombol tab buka tutup komentar silahkan edit pada goresan pena merah yang ada pada arahan di atas. Script di atas sajikan dengan memperlihatkan warna gradasi 3 warna pada tombol tab buka tutup komentar. Jika ingin lebih terang bagaimana cara mengeditnya sanggup kalian lihat pada artikel sebelumnya yang berjudul Cara Membuat Gradasi Warna Pada Background Blog.
Nah itulah tadi cara menciptakan tombol buka tutup komentar pada blogger. Selain mempercantik tampilan blog, tombol buka tutup komentar ini juga sanggup menambah pagespeed website anda sehingga tidak perlu memuat loading terlalu usang alasannya banyaknya komentar. Anda pun sanggup menerapkannya pada blog anda sendiri menyerupai yang sudah blogotech lakukan. Demikian artikel kali ini agar bermanfaat.