Cara Gampang Show Hide Komentar Blogger Non Amp

Tutorial ini direquest oleh beberapa sahabat Kompi Ajaib untuk show hide komentar Blogger non AMP. Dan aku buatkan dengan cara yang paling gampang adalah hanya 1 kali mengganti arahan dengan arahan yang aku buatkan maka otomatis komentar blog Anda akan memakai tombol buka tutup komentar.

Langsung saja ya, kalau Anda ingin mencoba tombol show hide komentar Blogger non AMP, silahkan cari arahan di bawah ini atau yang menyerupai mirip arahan 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 arahan 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 arahan background-color:#11589D;color:#fff; menyerupai yang aku tandai pada arahan di atas.

Selesai dan selamat mencoba...


Sumber https://www.kompiajaib.com/

Share this post