Menambahkan Tombol Show Hide Comments Di Template VioMagz

Blog Buttatoa | Memasang Tombol Show Hide Comments - Kali ini, saya akan membagikan sebuah tutorial mengenai cara menambahkan tombol (button) show hide comments pada template VioMagz terbaru. Tombol show hide comments ini berfungsi untuk menyembunyikan dan menampilkan komentar postingan.

Bagi kalian yang suka melakukan Redesign Template VioMagz👀, menambahkan tombol (button) show hide comments akan memperindah tampilan blog karena komentar yang banyak dapat di sembunyikan dan ditampilkan sesuai keinginan. Selain itu akan meringankan beban loading saat menampilkan postingan yang memiliki banyak komentar.

 

Tombol (button) show hide commnets yang saya bagikan kali ini, saya tambahkan icon svg agar tampilan sedikit lebih menarik. So, langsung saja kalian simak cara membuat atau menambahkan tombol (button) show hide comments berikut:

1. Seperti biasa, kalian menuju ke dashboard blogger lalu pilih Tema 👉 Edit HTML.

2. Cari kode ]]></b:skin>, lalu tambahkan CSS berikut diatas kode ]]></b:skin> tersebut.

/* CSS ShowHide Comment By Blog Butttoa */
.koment {
    position: relative;
    height: 36px;
    width:180px;
    line-height: 35px;
    padding: 0;
    border-radius: 20px;
    background: #5d5776;
    border: 2px solid #fe780278;
    box-shadow: 0 0 3px #fe780278;
    transition: .5s;
    margin: 20px 0;
}
.koment.show:hover, .koment.show span.circleshow {background-color: #148e42}
.koment.hide:hover, .koment.hide span.circlehide {background-color: #bd081c}

.koment span.circleshow, .koment span.circlehide {
    display: block;
    color: #fff;
    position: absolute;
    float: left;
    margin: 2px;
    line-height: 40px;
    height: 28px;
    width: 28px;
    top: 2px;
    left: 3px;
    transition: .5s;
    border-radius: 50%;
}
.koment span.circlehide {
    left: 145px;
}
.koment:hover span.circleshow, .koment:hover span.circlehide {
    background-color: #2c2c31;
}
.koment span.circleshow {
 background-color: #3b5998;
 background-position:center;
 background-repeat:no-repeat;
 background-size:17px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22H9M11,6V9H8V11H11V14H13V11H16V9H13V6H11Z' fill='white'/%3E%3C/svg%3E")}
.koment span.circlehide {
 background-color: #ff0000;
 background-position:center;
 background-repeat:no-repeat;
 background-size:17px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 2H4C2.9 2 2 2.89 2 4V16C2 17.11 2.9 18 4 18H8V21C8 21.55 8.45 22 9 22H9.5C9.75 22 10 21.9 10.2 21.71L13.9 18H20C21.11 18 22 17.11 22 16V4C22 2.9 21.11 2 20 2M16 11H8V9H16V11Z' fill='white'/%3E%3C/svg%3E")}

.koment span.titleshow, .koment span.titlehide , .koment span.titleshow-hover, .koment span.titlehide-hover {
    position: absolute;
    transition: .5s;
    left: 40px;
    text-align: center;
    margin: 0 auto;
    font-size: 14px;
    font-weight: bold;
    transition: .5s;
    color: #ffffff;
}
.koment span.titlehide, .koment span.titlehide-hover {
    left: 15px;
    color: #ffffff;
}
#comments-box{display:none}

3. Kemudian cari kode <b:includable id='commentPicker' var='post'>. Pada Template VioMagz terbaru, kalian akan menemukan 3 (tiga) kode yang sama. Kalian pilih kode urutan ke 2 (dua). Tepat dibawah kode <b:includable id='commentPicker' var='post'> tersebut, kalian akan menemukan script seperti dibawah ini:

 <b:if cond='data:post.showThreadedComments'>
  <b:include data='post' name='threadedComments'/>
 <b:else/>
  <b:include data='post' name='comments'/>
 </b:if>

Hapus script tersebut diatas dan ganti dengan script dibawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='koment show' id='koment show' onclick='document.getElementById(&quot;comments-box&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;koment hide&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;koment show&quot;).style.display=&quot;none&quot;' role='button' tabindex='0'><span class='circleshow'/><span class='titleshow'>Show Comments</span>
  <span class='titleshow-hover'>Show Comments</span></div>
<div class='koment hide' hidden='hidden' id='koment hide' onclick='document.getElementById(&quot;comments-box&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;koment hide&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;koment show&quot;).style.display=&quot;block&quot;' role='button' tabindex='0'><span class='circlehide'/><span class='titlehide'>Hide Comments</span>
  <span class='titlehide-hover'>Hide Comments</span></div>
</b:if>
<div id='comments-box'>
<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='threadedComments'/>
</div>

4. Klik Save, lalu kalian perhatikan komentar postingan kalian.

Catatan: Jangan lupa dibagian Setelan👉 Lokasi Komentar, kalian pilih "Tersemat" atau "Halaman Penuh" atau "Jendela pop-up". Sementara di bagian Setelan Post 👉 Opsi, kalian pilih ⦿ Izinkan.

Demikian tutorial singkat cara menambahkan tombol (button) show hide comments kali ini. Kalian bisa melihat beberapa redesign template lainnya pada label post #Blogging👀. Semoga bermanfaat, Wassalam.

Share :