Cara Buat Tombol Kotak Komentar Blogger Buka Tutup Keren

Cara menciptakan tombol Buka Tutup / Show Hide di komentar blog - Pada post artikel kali ini ane akan bagikan cara menciptakan tombol komentar buka tutup menyerupai yang ane pake di template mas adhy kompiflexiblle ini, tetapi ini memakai warna bergradasi keren loh gan.

Widget kotak komentar ini sangatlah bermanfaat untuk semua pengunjung yang nantinya bakal menjadi blog anda menggambarkan ramai di kunjungi dan menambah kualitas blog.

Dengan menambahkan widget komentar blog yang disembunyikan atau dapat di buka tutup. Bisa meringankan blog ketika load d semua perangkat loh, dan pastinya memaksimalkan pengunjung juga gan.

Berikut ialah tutorial cara buat tombol buka tutup kotak komentar blogger.

Cara Terbaru Membuat Tombol Buka Tutup Komentar dengan Gradient

Seperti halnya mengedit di html caranya agan Buka Dashboard Blogger - Pilih Tema - Klik Edit HTML,lalu copy dan pastekan arahan dibawah ini diatas arahan </style> atau ]]></b:skin>. Kalian pilih salah satu mana yang cocok ditemplate blog anda.

  
 /* CSS Tombol Buka Tutup Komen */
 
 .buka-komen,.tutup-komen{font-family:inherit;background: linear-gradient(to right, #38b3e0, #e53bb2);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:10px 5px 5px 5px;cursor:pointer;}
 
 .buka-komen{display:block;margin-bottom:20px}
 #comments-box{display:none} 

Agan juga dapat mengedit warna yang berupa arahan html color di css dengan mengubahnya sesuka agan pada arahan #38b3e0, #e53bb2 untuk mengeditnya.

Kemudian cari arahan menyerupai yang menyerupai di bawah ini

 <b:if cond='data:blog.pageType == &quot;static_page&quot;'>               <b:if cond='data:post.showThreadedComments'>                 <b:include data='post' name='comments'/>               <b:else/>                 <b:include data='post' name='comments'/>               </b:if>             </b:if> 

Jika agan menemukan arahan yang sama menyerupai yang menyerupai diatas, anda pilih arahan yang di bawahnya dan ganti dengan arahan di bawah ini.

  
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 
     <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'>Click to Comment!</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'>Close Comment!</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> 

Nah, kini sudah simpulan gan cara buatnya, gimana? mudahkan , supaya dengan cara ini untuk menciptakan buka tutup komentar postingan artikel blog anda menjadi fast load dan pastinya keren.