Cara membuat tombol buka tutup komentar yang benar pada blog


Cara membuat tombol buka tutup komentar yang benar pada blog - Hallo sobat blogger, apa kabar? Semoga selalu sehat dan di lancarkan rezekinya. Sesuai dengan judul artikel kali ini bloggerkampung.com akan memberikan sebuah tutorial Cara membuat tombol buka tutup komentar yang benar pada blog, semoga bisa bermanfaat bagi sobat blogger semuanya.

Tombol komentar atau widget komentar pada sebuah blog memiliki banyak manfaat, selain untuk komunikasi antar pengguna dan admin blog, widget komentar juga mempengaruhi performa blog. Seperti widget komentar pada blog ini yang dahulu, saya menggunakan 3 jenis komentar yaitu Disqus, Blogger dan Facebook, dengan kolom komentar seperti itu pastinya akan mempengaruhi performa blog jadi lambat apalagi jika yang komentar ada banyak, lalu saya mencoba untuk membuat tombol komentar tersebut menjadi buka tutup seperti sekarang ini, alhasil blog saya menjadi lebih ringan dan cepat loadingnya.

Bagi sobat yang ingin menggunakan cara ini, bisa ikuti tutorial saya di bawah ini, tetapi saya sarankan bagi sobat yang hanya menggunakan widget komentar bawaan template atau hanya kolom komentar blogger mending tidak usah di buat buka tutup, karena widget komentar seperti itu tidak terlalu mempengaruhi blog. Oke langsung saja ke tutorialnya berikut

Cara membuat tombol buka tutup komentar yang benar pada blog

1. Langkah pertama untuk membuat tombol buka tutup komentar, kalian cari kode seperti di bawah ini pada template blogger yang ingin di rubah widget komentarnya

<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>





2. Jika kode sudah ketemu, kalian ganti dengan kode di bawah ini:



<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>

.buka-komen,.tutup-komen{font-family:inherit;background-color:#11589D;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>


3. Setelah kalian ganti kode nya, lalu simpan templatenya, dan coba cek hasilnya. Tulisan yang sudah saya blog diatas, merupakan kode warna font dan background dari tombol buka tutup komentarnya, buat kalian yang kurang suka dengan warna nya bisa kalian ganti sesuka hati kalian.

Itulah Cara membuat tombol buka tutup komentar yang benar pada blog semoga bisa bermanfaat bagi sobat blogger semuanya.

Post a Comment

0 Comments