Cara Membuat Tombol Buka Tutup Komentar Pada Blogger

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 :
<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' 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 == &quot;item&quot;'>
<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(&quot;comments-box&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;none&quot;' role='button' tabindex='0'>Buka Komentar</div>
<div aria-label='Tutup Komentar' class='tutup-komen' hidden='hidden' id='tutup-komen' onclick='document.getElementById(&quot;comments-box&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;block&quot;' role='button' tabindex='0'>Tutup Komentar</div>
</b:if>
<div id='comments-box'>
        <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' 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.

Baca juga:

Fahrinheit
Fahrinheit

"Seorang Mantri Keliling yang bekerja sebagai Blogger Paruh Waktu, Pemimpi Pengangguran Sukses."

Buka Komentar
Blogger
Disqus
Pilih Sistem Komentar

No comments

Silahkan berkomentar sesuai dengan tema, gunakan kata-kata yang sopan dan bijak (no iklan, no SARA, no spam). Komentar yang menyertakan link aktif, iklan atau titip link akan dimasukkan dalam folder SPAM.