Cara Membuat Tombol Buka Tutup Komentar - , Hai sahabat blogger, apa kabar? Sudah usang blogotech tidak menyebarkan gosip dikarenakan kesibukan di dunia nyata. Nah pada kesempatan kali ini akan menyebarkan gosip mengenai blogging yakni cara menciptakan tombol buka tutup komentar. Bagi anda yang merasa template anda loadingnya terlalu lambat mungkin sanggup memakai cara ini alasannya yakni 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 instruksi script di bawah ini dengan memakai fitur pencarian Ctrl + F :
4. Jika sudah menemukan instruksi script di atas silahkan ganti dengan instruksi di bawah ini:
5. Untuk mengubah warna background tombol tab buka tutup komentar silahkan edit pada goresan pena merah yang ada pada instruksi 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 yakni banyaknya komentar. Anda pun sanggup menerapkannya pada blog anda sendiri ibarat yang sudah blogotech lakukan. Demikian artikel kali ini agar bermanfaat.
Sumber http://www.blogotech.net
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 instruksi 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 instruksi script di atas silahkan ganti dengan instruksi 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>
<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>
5. Untuk mengubah warna background tombol tab buka tutup komentar silahkan edit pada goresan pena merah yang ada pada instruksi 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 yakni banyaknya komentar. Anda pun sanggup menerapkannya pada blog anda sendiri ibarat yang sudah blogotech lakukan. Demikian artikel kali ini agar bermanfaat.