Terbaru!!! Cara Membuat Tombol Buka Tutup Komentar Pada Blog dengan HTML

Pada kesempatan kali ini, saya akan memberikan bagaimana cara membuat Tombol buka-tutup komentar pada blog, tujuannya adalah agar blog tersebut memberikan waktu yang sangat singkat pada saat loading artikel dan menata tempat pada footer agar terlihat lebih bagus dan rapi.

Pembuatan tombol ini tidaklah sulit hanya mencari dan menempatkan beberapa kode HTML. Tutorial ini hanya bekerja atau berfungsi pada komentar blogger, yaitu kolom komentar bawaan dari blog, jika kamu menggunakan komentar Disqus ataupun Facebook, silahkan untuk di ganti terlebih dahulu. Next saya akan buat untuk Disqus dan Facebook. Langsung saja ke tutorialnya

Silahkan cari kode dibawah ini atau mirip kode dibawah ini

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

Kemudian ganti atau ubah kode diatas dengan kode dibawah 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>

Bila script diatas tidak ditemukan silahkan cari kode untuk memanggil

<b:include cond=

Biasanya penutup tag diatandai dengan 'name-comment'/>

Jika sudah silahkan save teemplatenya dan silahkan cek hasilnya di semua postingan, Jika ingin mengubah warna background tombolnya, cari dan sesuaikan pada kode 

background-color:#11589D;color:#fff;

Berikut adalah hasilnya

BUKA TUTUP KOMENTAR BLOG

Gimana mudah bukan?

Selesai dan selamat mencobanya.

✖

Bagikan:

• Bagikan melalui Facebook Bagikan melalui Twitter Bagikan melalui Pinterest Bagikan melalui Whatsapp Bagikan melalui Linkedin Bagikan melalui Telegram

Subscribe Our Newsletter