Cara Mudah Membuat Show Hide Komentar di Blog

Beberapa di antara Blogger memilih tampilan blog yang simple, salah satunya dengan menggunakan show hide komentar sehingga halaman postingan menjadi lebih terfokus pada konten tulisan postingan dan jika memiliki komentar yang banyak maka halaman tidak akan tampak menjuntai ke bawah ketika halaman diakses. Buka tutup komentar kali ini untuk blog non AMP yang bisa untuk buka tutup komentar apa saja yang digunakan seperti disqus, blogger, atau facebook.
Cara Mudah Membuat Show Hide Komentar di Blog
Langsung saja ya, jika Anda ingin mencoba tombol show hide komentar Blogger non AMP, silahkan cari kode di bawah ini atau yang mirip seperti kode di bawah ini.

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

Kemudian silahkan ganti dengan kode berikut 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>


Silahkan save templatenya dan silahkan cek penampakannya di halaman postingan.

Jika ingin menyesuaikan warna background tombol dan warna tulisannya, silahkan sesuaikan pada kode background-color:#11589D;color:#fff; seperti yang saya tandai pada kode di atas.

Selesai dan selamat mencoba...

Thanks to : https://www.kompiajaib.com
Reaksi:
Jika Anda merasa bahwa artikel-artikel di blog ini bermanfaat, Anda bisa memberikan donasi melalui Paypal atau dengan Pulsa Dana hasil dari donasi akan digunakan untuk operasioanl Blog Kang Muroi - Terima kasih.

you might ALSO LIKE :

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar

0 Response to "Cara Mudah Membuat Show Hide Komentar di Blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel