Cara Membuat Tombol Buka Tutup Komentar Pada Blogger
Cara Membuat Tombol Buka Tutup Komentar - Blogotech, Hai sahabat blogger, apa kabar? Sudah lama blogotech tidak berbagi informasi dikarenakan kesibukan di dunia nyata. Nah pada kesempatan kali ini Blogotech akan berbagi informasi mengenai blogging yakni cara membuat tombol buka tutup komentar. Bagi anda yang merasa template anda loadingnya terlalu lambat mungkin bisa menggunakan cara ini karena 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 membuat tombol buka tutup komentar pada blogger ala Blogotech :
1. Masuk ke laman blogger anda atau dengan mengklik link DISINI
2. Setelah masuk selanjutnya masuk ke edit template anda melalui menu Theme
3. Setelah masuk ke edit html template, selanjutnya cari kode script di bawah ini dengan menggunakan fitur pencarian Ctrl + F :
4. Jika sudah menemukan kode script di atas silahkan ganti dengan kode di bawah ini:
5. Untuk mengubah warna background tombol tab buka tutup komentar silahkan edit pada tulisan merah yang ada pada kode di atas. Script di atas Blogotech sajikan dengan memberikan warna gradasi 3 warna pada tombol tab buka tutup komentar. Jika ingin lebih jelas bagaimana cara mengeditnya bisa kalian lihat pada artikel sebelumnya yang berjudul Cara Membuat Gradasi Warna Pada Background Blog.
Nah itulah tadi cara membuat tombol buka tutup komentar pada blogger. Selain mempercantik tampilan blog, tombol buka tutup komentar ini juga dapat menambah pagespeed website anda sehingga tidak perlu memuat loading terlalu lama karena banyaknya komentar. Anda pun dapat menerapkannya pada blog anda sendiri seperti yang sudah blogotech lakukan. Demikian artikel kali ini semoga bermanfaat.
Penasaran bagaimana caranya? Yuk simak artikelnya berikut ini bagaimana cara membuat tombol buka tutup komentar pada blogger ala Blogotech :
1. Masuk ke laman blogger anda atau dengan mengklik link DISINI
2. Setelah masuk selanjutnya masuk ke edit template anda melalui menu Theme
3. Setelah masuk ke edit html template, selanjutnya cari kode script di bawah ini dengan menggunakan fitur pencarian Ctrl + F :
<b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comments'/>
4. Jika sudah menemukan kode script di atas silahkan ganti dengan kode 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 tulisan merah yang ada pada kode di atas. Script di atas Blogotech sajikan dengan memberikan warna gradasi 3 warna pada tombol tab buka tutup komentar. Jika ingin lebih jelas bagaimana cara mengeditnya bisa kalian lihat pada artikel sebelumnya yang berjudul Cara Membuat Gradasi Warna Pada Background Blog.
Nah itulah tadi cara membuat tombol buka tutup komentar pada blogger. Selain mempercantik tampilan blog, tombol buka tutup komentar ini juga dapat menambah pagespeed website anda sehingga tidak perlu memuat loading terlalu lama karena banyaknya komentar. Anda pun dapat menerapkannya pada blog anda sendiri seperti yang sudah blogotech lakukan. Demikian artikel kali ini semoga bermanfaat.
You really make it appear really easy along with your
ReplyDeletepresentation however I to find this matter to bbe really
something which I believe I would never understand. It sort of feels too
complicated and extremely large for me. I am having a look fforward
for yopur subsequent post, I'll ttry to get the dangle of it!
Yоur manner is very uniգue in contrast tօ other folks Ι have checked stuff from.
ReplyDeleteThank you for posting when you've got the opportunity,
suppose I am just going to save thiѕ idea.
There is ⅾefinitely lots to learn aƅout this subjеct.
ReplyDeleteI like all the information you provіɗed.
Amаzing! Ƭhanks a lot for this article!
ReplyDeleteTһis is a nice info! Reаlly a must-read and a discovery!
ReplyDeleteIt really been very helpful to me thanks.
Sweet! Tһanks a lot for the artіcle!
ReplyDeleteTerima kasih sudah berkunjung
ReplyDeletewow
ReplyDelete