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

Berikut cara membuat tombol Buka Tutup / Show Hide Komentar pada Blog Blogspot dengan warna gradasi (gradient color).
Cara Membuat Tombol Buka Tutup pada Komentar Blogspot dengan Tampilan Gradient Color
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.

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

Hi, Aku Aditya Nur Kahfi, biasa dipanggil Adit. Seorang Blogger, Content Writer, CEO & Founder AdityaTekno.com dan juga Editor/Redaktur di Portal Berita Lokal iNews.id - iNewsBekasi.id.

3 komentar

  1. Saya kan komentarnya pake disqus, bisa berfungsi gak gan ?
    1. Kalo pake disqus coba agan pelajari cara ini >> Cara Membuat Komentar Disqus di Blog dengan Tombol Onclick Load . ingat ya pelajari dulu. jangan langsung diterapkan. hehe
  2. saya sudah coba ini dan berhasil,tapi kolom komentar bawaan bloggernya masih ada jadinya ada dua kolom komentar,itu cara ngilanginnya gimana ya bg?