Menambahkan Centang Biru di Samping Nama Admin dalam Komentar Blogger

Cara Menambahkan Tanda Admin (Author) di Samping Nama dalam Komentar Blogger

Kolom komentar adalah salah satu cara berinteraksi dengan pembaca. Mereka bisa memberikan masukan, kritik, saran, atau laporan yang berkaitan dengan artikel bersangkutan. Sangat penting bagi penulis untuk membalas setiap komentar agar pembaca merasa semakin dekat dengan blog yang dia kunjungi.

Agar komentar admin (author) bisa dibedakan dengan komentar pembaca, ada baiknya untuk diberikan satu penanda. Cotohnya bisa kamu lihat di komentar Disqus, dimana komentar admin akan diberikan tanda khusus.

Sayangnya komentar bawaan Blogger belum ditambahkan fitur seperti itu secara default. Padahal ini hal sepele ya, kok bisa tim Blogger belum menambahkan fitur ini bahkan setelah update layout v3.


Memberikan Tanda Ceklis Biru Pada Komentar Author di Blogger

Tenang, kamu bisa kok menambahkan sendiri tanda admin berupa centang biru di kolom komentar Blogger. Caranya pun mudah, hanya perlu beberapa baris script CSS.



Cara ini hanya bekerja pada komentar original bawaan Blogger ya. Kalau template kamu sudah menggunakan komentar bertingkat yang sudah dimodifikasi (bahasa kerennya: threaded comment hack) sih biasanya sudah ada dari sananya, ditambakan langsung oleh si pembuat script.

Tambahkan kode ini DI ATAS </style> atau ]]></b:skin>. Kode berfungsi untuk memunculkan ceklis alias centang biru di samping nama author.

/* Admin Badge on Blogger Comments by igniel.com */
#comments .comments-content .icon.blog-author{
  width: 16px;
  height: 16px;
  margin-left: 5px;
  vertical-align: -3px;
  display: inline-block;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z' fill='%23118ff9'/%3E%3C/svg%3E") no-repeat center center;
}

Setelah itu simpan template dan lihat hasilnya.

Memberikan Centang Biru Pada Komentar Admin di Blogger


Menambahkan Text (Bukan Centang Biru)

Ini cara alternatif yang bisa kamu coba. Bukan ikon centang biru, namun untuk menambahkan text atau tulisan yang berada tepat disamping nama admin. Caranya hampir sama, kamu hanya membutuhkan kode CSS saja. Sebagai contoh akan saya berikan text yang bertuliskan Admin. Silakan ganti dan atur sesuai dengan keinginan masing-masing.

/* Admin Mark on Blogger Comments by igniel.com */
#comments .comments-content .icon.blog-author:after{
  content: 'Admin'; /* Isi Text */
  background-color: #118ff9; /* Warna Background */
  color: #fff; /* Warna Text */
  font-size: 12px; /* Ukuran Text */
  display: inline-block;
  margin: 0px 7px;
  padding: 2px 5px;
  border-radius: 3px;
}
Menambahkan Tanda Admin di Samping Nama Author Komentar Blogspot

Cara ini bisa digabungkan dengan memberikan warna background (highlight) pada komentar admin agar lebih keren lagi. Tutorial di atas memang sederhana tapi bermakna. Saya suka sekali memperhatikan detail kecil dari template blog. Selamat mencoba.

Baca Juga
DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.igniel.com. Terima kasih.

Artikel Terkait

24 Komentar

  1. Tutor auto watermark (gatau apa namanya) di seluruh gambar diblog dong mbak, hehe

    ReplyDelete
    Replies
    1. Otomatis nambahin text berupa alamat blog di ujung gambar yang kaya di blog ini? Tapi itu bukan watermark permanen lho. Kalo gambarnya di-save tetep aja textnya ilang.

      Delete
    2. iya mbak, itu maksud saya. nyari digoogle malah tambahin satu-satu tiap gambar, saya lihat punya mbak kok bisa auto semua gitu

      Delete
    3. mbaknya nyisipin kodenya langsung ke html Editornya..
      kalo yang agan liat satu satu itu kemungkinan di edit melalui postingan pada mode HTML gambarnya

      Delete
  2. ngga work mbak...
    kenapa ya?

    ReplyDelete
    Replies
    1. Kalau sesuai tutorial pasti work.

      Delete
    2. saya sudah test di ]]> di semua < /style > tapi sama aja mbak :'(

      Delete
    3. Kalau alamat blognya sesuai dengan yang tercantum di profil G+, itu artinya struktur HTMLnya beda dan harus pake kode ini:
      .comment-item .info .header .nama:after {
      content: '';
      width: 16px;
      height: 16px;
      margin-left: 5px;
      vertical-align: -3px;
      display: inline-block;
      background: url(data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000…9,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z' fill='%23118ff9'/%3E%3C/svg%3E) no-repeat center center;
      }

      Delete
  3. Terima kasih banyak mba tutorialnya, tapi di saya masih nggak work nih...
    Udah sesuai tutorial dan pakai kode:
    .comment-item .info .header .nama:after {
    content: '';
    width: 16px;
    height: 16px;
    margin-left: 5px;
    vertical-align: -3px;
    display: inline-block;
    background: url(data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000…9,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z' fill='%23118ff9'/%3E%3C/svg%3E) no-repeat center center;
    }


    masih ngga work juga...

    ReplyDelete
    Replies
    1. https://murenzonio.blogspot.com Mba

      Delete
    2. Coba pakai kode ini:
      #comments .user {
      display: inline-block;
      }
      #comments .icon.blog-author {
      width: 16px;
      height: 16px;
      margin-left: 5px;
      vertical-align: -3px;
      display: inline-block;
      background: url(data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000…9,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z' fill='%23118ff9'/%3E%3C/svg%3E) no-repeat center center;
      }

      Delete
    3. Sudah saya tambahkan di atas ] ] >< / b : skin > tapi masih belum muncul.

      Kalau tambahkan di atas < / style > sebaiknya yang dimana ya? Karena ada beberapa mba

      Delete
    4. Pilih yang ada di dalam tag kondisional post.
      <b:if cond='data:view.isPost'>
      <style>
      ....
      </style>


      ATAU

      <b:if cond=data:blog.pageType == "item"'>
      <style>
      ....
      </style>

      Delete
  4. Mbak. saya work, tapi tulisannya "admin" bukan simbol centang. gimana caranya untuk ngubahnya ya? mohon pencerahannya

    ReplyDelete
    Replies
    1. Tutorial ditambahkan. Silakan baca caranya di atas.

      Delete
  5. di blog saya kok gak work ya mbak? bisa minta tolong di cek?
    pintukom.blogspot.com
    Sudah saya coba semua cara yang mbak berikan, termasuk yang di komentar..

    ReplyDelete
  6. nyari yang untuk di semua admin bisa gk yah, saya rasa itu hanya untuk author postnya, hanya aksesoris di halaman postingan sendiri. kalau adminnya lebih dari satu gimana. apakah mungkin,,

    ReplyDelete
  7. mbak, saya mau ubah centang biru jadi tulisan admin kok malah vertikal ya mbak hasilnya, apakah ada css yang harus diubah?
    https://tereue.blogspot.com/

    ReplyDelete
  8. Cara ganti gambarnya gimana yah? Saya maunya yang kaya gambar admin disini...

    ReplyDelete
  9. kak, kenapa punya saya malah ketutup sama tanggal? cara edit tanggal comentar pakai css biar padding left nya diatur gimana?

    ReplyDelete
  10. nyobak sekali langsung work wkwkkwkw ... gandosssss

    ReplyDelete
  11. mantab, makasih tutorialya sangat membantu, saya cari2 akhirnya ktmu

    ReplyDelete
  1. Untuk menulis kode gunakan <i>KODE</i>
  2. Untuk menyisipkan kode ke dalam Syntax Highlighter gunakan <em>KODE YANG LEBIH PANJANG</em>
  3. Kode harus di-parse terlebih dulu agar bisa ditulis.
  4. Centang Notify me untuk mendapatkan notifikasi balasan komentar melalui Email.