Cara Buat Tombol Kotak Komentar Blogger Buka Tutup Keren

Cara Buat Tombol Kotak Komentar Blogger Buka Tutup Keren

Cara membuat tombol Buka Tutup / Show Hide di komentar blog - Pada post artikel kali ini ane akan bagikan cara membuat tombol komentar buka tutup seperti yang ane pake di template mas adhy kompiflexiblle ini, tetapi ini menggunakan 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 bisa di buka tutup. Bisa meringankan blog saat load d semua perangkat loh, dan pastinya memaksimalkan pengunjung juga gan.

Berikut adalah 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 kode dibawah ini diatas kode </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 bisa mengedit warna yang berupa kode html color di css dengan mengubahnya sesuka agan pada kode #38b3e0, #e53bb2 untuk mengeditnya.

Kemudian cari kode seperti yang mirip 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 kode yang sama seperti yang mirip diatas, anda pilih kode yang di bawahnya dan 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>

Nah, sekarang sudah selesai gan cara buatnya, gimana? mudahkan , semoga dengan cara ini untuk membuat buka tutup komentar postingan artikel blog anda menjadi fast load dan pastinya keren.
Advertisement

Baca juga:

Buka Komentar
Disqus
Silahkan Komentar Gaes