Cara Membuat Tombol Buka Tutup pada Komentar Blogspot dengan Tampilan Warna Gradasi

Cara Membuat Tombol Buka Tutup pada Komentar Blogspot dengan Tampilan Warna Gradasi. (Gambar: AdityaTekno)

AdityaTekno.com - Panduan cara membuat tombol buka tutup pada komentar blogspot akan disajikan di artikel ini. Yang sudah kita ketahui bersama, bahwa kolom komentar bawaan pada blog biasanya tidak ada tombol buka maupun tombol tutupnya. Kalaupun ada, biasanya menggunakan template blog yang sudah tersedia tombol buka tutupnya.

Ada alasan tersendiri mengapa widget komentar disembunyikan menggunakan tombol buka tutup, yaitu untuk meringankan loading blog dan membuat blog terlihat lebih rapi.

Yang mana jika loading blog cepat bisa membuat para pengunjung senang dan disukai oleh Google.

Baca Juga: 10 Cara Mempercepat Loading Blog Blogger

Nah, bagi kamu yang ingin mencoba memasang komentar blog dengan tombol buka dan tombol tutup, kamu bisa ikuti panduan dibawah.

Cara Membuat Tombol Buka Tutup pada Komentar Blog dengan Tampilan Warna Gradasi (Gradient Color)

1. Buka Blogger.
2. Pilih menu Tema >> Edit HTML.
3. Kemudian salin kode dibawah ini dan letakan diatas kode </style> atau ]]></b:skin>. (Pilih salah satu yang cocok di template blog kamu)

   /* 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}

4. Cari kode seperti dibawah ini. (Biasanya kode tersebut berada di bawah kode <b:include data='post' name='post'/>. Jika tidak sama dengan kode dibawah, cari yang mirip.)

   <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>

5. Jika sudah ketemu, pilih kode yang kedua, lalu ganti dengan kode 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>

6. Terakhir, simpan Tema. Dan lihat hasilnya.

Baca juga :

• Cara Membuat Komentar Disqus di Blog dengan Tombol Onclick Load
• Cara Memasang Lazy Loading Disqus on Scroll Di Blogger
• Cara Terbaru Memasang Komentar Disqus Permanen di Blog Blogger

Demikian Tutorial Cara Membuat Tombol Buka Tutup pada Komentar Blogspot dengan Tampilan Warna Gradasi (Gradient Color). Semoga bermanfaat! Salam AdityaTekno.com