menambahkan tombol hapus komentar blogger

menambahkan tombol hapus komentar blogger di median ui 1.6

Hallo semua pada kesempatan kali ini saya akan membagikan cara menambahkan tombol hapus komentar di template median-ui.

secara default template median-ui tidak memiliki tombol hapus komentar jadi buat kalian yang ingin menambahkannya bisa ikuti panduan di bawah ini.

sebenarnya template apa aja bisa, hanya saja kalian harus paham sedikit kodingan untuk menyesuaikan css dan kode pada template masing - masing.

dikarenakan tiap tema memiliki struktur kode yang berbedah jadi saya buat tutorial khusus yang menggunakan template yang sama dengan saya saja, bedah template silakan sesuaikan saja sendiri.

catatan
cara untuk pengguna template median ui versi 1.6, bedah versi bisa saja memiliki kode yang berbedah.

Menambahkan Tombol Hapus Komentar Di Median Ui

langkah pertama silakan kalian cari dulu css seperti di bawah ini jika sudah ketemu hapus saja agar tidak bentrok dengan css yang akan saya berikan nanti, ada 3 baris css yang perlu kalian hapus.

<!-- css 1 yang di hapus -->
.cmRi:checked ~ .cmRp .thTg::after{content:attr(aria-label)}

<!-- css 2 yang di hapus -->
.thTg::before{content:'';width:28px;border-bottom:1px solid var(--widgetTac);opacity:.5}

<!-- css 3 yang di hapus -->
.thTg::after{content:attr(data-text);margin:0 12px;opacity:.7}

setelah css di atas sudah kalian hapus maka bisa tambahkan css ini agar tampilannya lebih rapih.

.cmHl .thCh a.deleteCm{position:absolute;right:10px;top:0}
.cmHl a.deleteCm{position:absolute;right:20px;top:10px}
.cmHl .thCh a.deleteCm svg,.cmHl a.deleteCm svg{width:20px;stroke:#989b9f}
.thTg::after{content:'';right:0;left:10rem;width:calc(100% - 13rem);border-bottom:1px solid var(--widgetTac);opacity:.5;position:absolute}
.thTg::before{content:attr(data-text);margin:0 12px;opacity:.7}
.cmRi:checked ~ .cmRp .thTg::before{content:attr(aria-label)}
.thCh > li:first-of-type:before{content:'';border:0}
.thCh > li:before{content:'';position:absolute;width:calc(100% - 3.8rem);border-top:1px solid var(--widgetTac);opacity:.5;left:20px;margin-top:-10px}

selanjutnya silakan ikuti petunjuk di bawah ini cari dan ubah lakukan dengan teliti yang perlu di ubah ada 2 namun kodenya hampir mirip - mirip jadi jangan keliru.

<!-- cari kode ini -->

<li class='c' expr:id='&quot;c&quot; + data:commentLevel1.id'>

<!-- ubah jadi -->

<li class='c' expr:id='&quot;c&quot; + data:commentLevel1.id'>
<a aria-label='Delete' class='deleteCm' expr:href='&quot;https://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; + data:commentLevel1.id' rel='nofollow noopener noreffer' target='_blank'><svg class='line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g transform='translate(3.500000, 2.000000)'><path d='M15.3891429,7.55409524 C15.3891429,15.5731429 16.5434286,19.1979048 8.77961905,19.1979048 C1.01485714,19.1979048 2.19295238,15.5731429 2.19295238,7.55409524'/><line x1='16.8651429' x2='0.714666667' y1='4.47980952' y2='4.47980952'/><path d='M12.2148571,4.47980952 C12.2148571,4.47980952 12.7434286,0.714095238 8.78914286,0.714095238 C4.83580952,0.714095238 5.36438095,4.47980952 5.36438095,4.47980952'/></g></svg>
</a>

<!-- cari kode ini -->
<li class='c' expr:id='&quot;c&quot; + data:commentLevel2.id'>

<!-- ubah jadi -->

<li class='c' expr:id='&quot;c&quot; + data:commentLevel2.id'>
<a aria-label='Delete' class='deleteCm' expr:href='&quot;https://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; + data:commentLevel2.id' rel='nofollow noopener noreffer' target='_blank'><svg class='line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g transform='translate(3.500000, 2.000000)'><path d='M15.3891429,7.55409524 C15.3891429,15.5731429 16.5434286,19.1979048 8.77961905,19.1979048 C1.01485714,19.1979048 2.19295238,15.5731429 2.19295238,7.55409524'/><line x1='16.8651429' x2='0.714666667' y1='4.47980952' y2='4.47980952'/><path d='M12.2148571,4.47980952 C12.2148571,4.47980952 12.7434286,0.714095238 8.78914286,0.714095238 C4.83580952,0.714095238 5.36438095,4.47980952 5.36438095,4.47980952'/></g></svg>
</a>

ok jadi sekian menambahkan tombol hapus komentar blogger yang bisa saya bagikan kali ini, terima kasih telah berkunjung dan semoga bermanfaat.