Modifikasi Komentar Blogger Median UI

 Siapa yang tidak mau blognya terlihat keren dan punya banyak fitur? Pastinya semuanya mau. Untuk memiliki blog yang keren dan unik kita perlu bisa sedikit memodifikasi template. Sayangnya, tidak semua orang bisa atau paham soal kode-kode pada template blog. Artikel ini akan membahas cara modifikasi komentar blogger, tepatnya template Median UI. Bagi kalian yang ingin mengedit fitur komentar blogger seperti milik saya ini, mari simak selengkapnya.

Template Median UI yang saya gunakan adalah versi 1.5. Jika kalian menggunakan versi lain, ya silahkan coba saja.

Oh ya. Tutorial ini saya buatkan karena request dari YUQEN. Dia minta agar dibuatkan tutorial membuat komentar seperti pada blog milik saya ini. Jujur saya kebingungan dalam membuat kata kunci untuk tutorial ini. Jadi asal nulis saja lah, entah nanti ada yang mencari tutorial ini atau tidak di Google penelusuran.

Berikut ini tutorialnya;

Modifikasi Komentar Blogger Median UI

Catatan: Gunakan laptop/pc supaya mempermudah dalam pengeditan, tekan Ctrl dan F untuk mencari kode. Untuk pengguna Android silahkan baca cara Ctrl dan F di Android.

1. Pertama buka menu Tema, lalu klik Edit HTML
2. Cari kode <!--[ Comment message ]-->
3. Letakkan kode HTML berikut ini di atasnya;
   

   <div id='cm-menu'>
   <input checked='' class='cm-menus1 hidden' id='offcm-menu1' name='accordion-menu' type='radio'/>
   <input class='cm-menus2 hidden' id='offcm-menu2' name='accordion-menu' type='radio'/>
   <div class='cmbutton'>
   <div class='cmbutton1'>
   <label class='cmbutton-title' for='offcm-menu1'>Komentar Blogger</label>
   </div>
   <div class='cmbutton2'>
   <label class='cmbutton-title' for='offcm-menu2'><a aria-label='Show comments' href='https://www.lutfisyafii.com/p/forum-diskusi.html'>Forum Diskusi</a></label>
   </div>
   </div>
   <div class='pesan-komen'>
   Tinggalkan komentar sesuai topik tulisan, centang <b>Beri tahu saya</b> untuk mendapatkan notifikasi via email ketika komentar kamu di balas.
   </div></div>

   (Jangan lupa, ganti yang saya warnai merah dengan alamat url forum diskusi milik Anda sendiri)
4. Selanjutnya, Cari kode ]]></b:skin>
5. Kemudian letakkan kode CSS berikut ini di atasnya;
   

   .cm-menus1:checked ~ .cmbutton .cmbutton1, .cm-menus2:checked ~ .cmbutton .cmbutton2 {background: rgba(23,191,99,.07)}
   .cmbutton2 {border-bottom-right-radius: 4px}
   .cm-menus1:checked ~ .cmbutton .cmbutton1 .cmbutton-title, .cm-menus2:checked ~ .cmbutton .cmbutton2 .cmbutton-title {border-top: 5px solid var(--link-color)}
   .cmbutton label {display: block;cursor: pointer}
   .cmbutton-title {padding: 10px;border-top: 5px solid #e8e8e8;display: block;text-align: center}
   .cmbutton {display: grid;grid-template-columns: 1fr 1fr;width: calc(100% - 40px);margin-top: 10px;position: absolute;bottom: 8px;}
   #cm-menu:before {content: '';display: block;border: 11px solid;border-color: #fff transparent transparent transparent;position: absolute;bottom: -22px;left: 31px}
   #cm-menu{position: relative;font-family: var(--font-body);font-size: 14px;background: #fff;border-radius: 4px;padding: 5px 20px 60px;color: #333;margin: 0 0 20px -2px;line-height: 1.5em;box-shadow: 0 6px 18px 0 rgb(9 32 76 / 8%)}

6. Simpan tema

Sekarang, lihat perubahan pada komentar blog kalian. Berhasil atau tidaknya silahkan katakan di kolom komentar yah. Terimakasih.

Demikian tutorial tentang Modifikasi Komentar Blogger Median UI, semoga bermanfaat.