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.

8 comments for "Cara Membuat Tombol Buka Tutup Komentar Pada Blogger"

  1. You really make it appear really easy along with your
    presentation 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!

    ReplyDelete
  2. Yоur manner is very uniգue in contrast tօ other folks Ι have checked stuff from.
    Thank you for posting when you've got the opportunity,
    suppose I am just going to save thiѕ idea.

    ReplyDelete
  3. There is ⅾefinitely lots to learn aƅout this subjеct.
    I like all the information you provіɗed.

    ReplyDelete
  4. Amаzing! Ƭhanks a lot for this article!

    ReplyDelete
  5. Tһis is a nice info! Reаlly a must-read and a discovery!
    It really been very helpful to me thanks.

    ReplyDelete
  6. Sweet! Tһanks a lot for the artіcle!

    ReplyDelete

Post a Comment

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.