Menambahkan Centang Biru di Samping Nama Admin dalam Komentar Blogger

Tutorial cara memberikan dan menambahkan tanda admin berupa text atau ikon ceklis / centang biru di samping nama author blog pada kolom komentar bawaan Blogger (Blogspot) mudah hanya dengan CSS.
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.

54
Menambahkan Centang Biru di Samping Nama Admin dalam Komentar Blogger
Menambahkan Centang Biru di Samping Nama Admin dalam Komentar Blogger
Tutorial cara memberikan dan menambahkan tanda admin berupa text atau ikon ceklis / centang biru di samping nama author blog pada kolom komentar bawaan Blogger (Blogspot) mudah hanya dengan CSS.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

54 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Denz News
    11 Maret, 2024
    Profil: https://www.blogger.com/profile/07769641233731132826
    Mantappp, terimakasih tutorial nya gan....
  • elzeno.id
    28 Februari, 2024
    Profil: https://www.blogger.com/profile/06526104885269584111
    Pada template Igniplex v.3 tidak muncul
    www.house-shines.com
    • Igniel
      28 Februari, 2024
      Profil: https://www.blogger.com/profile/09199170379661896200
      Igniplex mah gak perlu. Udah ada dari sananya.
  • MAS WAHYU
    31 Januari, 2024
    Profil: https://www.blogger.com/profile/02435017789216513716
    Punya saya kok centangnya beda ya mbak reatrixweb.com work cuman kok centsngnya gk biru malah kayak gini mbak
  • MAS WAHYU
    31 Januari, 2024
    Profil: https://www.blogger.com/profile/02435017789216513716
    Komentar ini telah dihapus oleh MAS WAHYU selaku penulis.
  • MAS WAHYU
    31 Januari, 2024
    Profil: https://www.blogger.com/profile/02435017789216513716
    Komentar ini telah dihapus oleh MAS WAHYU selaku penulis.
  • Andi Suardi Nasa
    01 Oktober, 2023
    Profil: https://www.blogger.com/profile/12209423420813695885
    Ferfecto, di blogg aku work dengan kata loved. Tutorial kece kak igniel..
    andisuardinasa.blogspot.com
  • Blogger Madiun
    12 Juni, 2023
    Profil: https://www.blogger.com/profile/11180181528771757555
    Min buatkan artikel mengenai cara membuat centang biru di judul sebuah blog. bukan judul artikel ya Min tapi judul blognya
  • Lily Meilisa
    06 September, 2022
    Profil: https://www.blogger.com/profile/12973187158621256872
    Nyoba dulu ah siapa tau bisa di blog aku
  • Wslmbrk
    15 Februari, 2022
    Profil: https://www.blogger.com/profile/17863200857935080718
    /* 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;
    }

  • Blogger Pemula
    09 Desember, 2021
    Profil: https://www.blogger.com/profile/13774746739613266570
    Hallo kak igniel, terimakasih atas tutorial nya sangat bermanfaat, kalo boleh tau nih kak gimana yah caranya agar gambar di related posts tidak blur mohon di berikan link postingan nya kak jika sudah pernah post, terimakasih
  • Ben Timothy Marantika
    06 Juli, 2021
    Profil: https://www.blogger.com/profile/05361981051228619314
    https://www.benminx.xyz {margin:0; padding:10px 15px}

    work sih cuman, warnanya tergabung sama main color saya. Jadi gimana ya mas?? kalau mau liat komentar nya di cara mempercepat tampilan/loading blog ya mas.
  • Info lowongan kerja Indonesia
    03 Juli, 2021
    Profil: https://www.blogger.com/profile/15484090800832260385
    Ini gimana kok ga work sih
    • Igniel
      03 Juli, 2021
      Profil: https://www.blogger.com/profile/09199170379661896200
      Work kalau pasangnya bener.
    • Info lowongan kerja Indonesia
      03 Juli, 2021
      Profil: https://www.blogger.com/profile/15484090800832260385
      Cara centang biru di profil blog gmna brey
  • Ben Timothy M
    03 Juni, 2021
    Profil: https://www.blogger.com/profile/01542555944693974675
    Kak, Centang Biru Nya saya munculnya di tanggal :( ini kenapa ya kak.. ?
  • ⠀
    25 April, 2021
    Profil: https://www.blogger.com/profile/14861092182195724906
    Kalau Versi Disqus Cara Nya Gimana?
  • Riza Firli
    09 Maret, 2021
    Profil: https://www.blogger.com/profile/02601223532007093348
    penasaran tadi soalnya ada yang comment dan udah centang biru..
  • Anonim
    Anonim09 Februari, 2021
    Bagus banget Mbak
  • Andriyansyah Yusuf
    10 Desember, 2020
    Profil: https://www.blogger.com/profile/01993520700148136584
    tidak berfungsi di template Fiksioner mba,
  • Fastabikul Randa Ar-Riyawi
    03 November, 2020
    Profil: https://www.blogger.com/profile/10741955742899846381
    Mbak, buat centang biru di samping nama yang memposting artikel gimana ya mbak caranya?
  • KhasanNm
    28 Agustus, 2020
    Profil: https://www.blogger.com/profile/15539934906421557034
    # Ini gimana ya kak Igniel, komentar adminnya ada tulisan Admin tapi vertikal https://khasannm.blogspot.com/2020/08/covid-19-dan-pencegahannya.html {margin:0; padding:10px 15px}
  • Alexave
    01 Agustus, 2020
    Profil: https://www.blogger.com/profile/08267912980235023664
    https://www.bosman.my.id/2019/08/bagai-mana-cara-melihat-traffic.html


    cuma admin biru ngak muncul centang padahal .paste yg css centang .. bisa d bantu mbak .terimakasih
  • Admin
    18 Juli, 2020
    Profil: https://www.blogger.com/profile/09696948603376299266
    mbak igniel cara bikin centang biru di profil dibawah postingan blog gimana ya?
    pliss buat tutorialnya
  • Marfa Umi
    01 Juli, 2020
    Profil: https://www.blogger.com/profile/05885966094455820968
    halo kak, udah coba pakai kode di atas tp munculnya malah sebelum tanggal di bawah tulisan author, yg perlu diedit apa ya? trims
  • Saif Ghofur
    03 Juni, 2020
    Profil: https://www.blogger.com/profile/04924137136364466463
    saya coba yg centang biru, tapi centang birunya ketutupan tulisan Author nya mbk
  • Rusdi Al Irsyad
    22 Mei, 2020
    Profil: https://www.blogger.com/profile/15149439183815784599
    cek
  • Movierall
    02 Desember, 2019
    Profil: https://www.blogger.com/profile/01907106568891816532
    Tutorialnya sudah saya coba, dan berhasil. Terima kasih banyak mas. Jadi, biar keliatan kalo adminnya yang balas
  • Rian
    09 Oktober, 2019
    Profil: https://www.blogger.com/profile/01230509647052706348
    mantap bahkan ada poto codingt jamanya :3
  • RM
    29 Agustus, 2019
    Profil: https://www.blogger.com/profile/18074091780019887108
    mantab, makasih tutorialya sangat membantu, saya cari2 akhirnya ktmu
  • Rumah Khitan Canggih Jember
    05 Juli, 2019
    Profil: https://www.blogger.com/profile/14804560840391020566
    nyobak sekali langsung work wkwkkwkw ... gandosssss
  • BelajarHTML
    22 Juni, 2019
    Profil: https://www.blogger.com/profile/08094377445419146039
    kak, kenapa punya saya malah ketutup sama tanggal? cara edit tanggal comentar pakai css biar padding left nya diatur gimana?
  • Syarif
    01 Maret, 2019
    Profil: https://www.blogger.com/profile/07827051198571493696
    Cara ganti gambarnya gimana yah? Saya maunya yang kaya gambar admin disini...
  • Mhd Amirul Azhar
    08 Februari, 2019
    Profil: https://www.blogger.com/profile/12853446140649976680
    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/
    • Mhd Amirul Azhar
      09 Februari, 2019
      Profil: https://www.blogger.com/profile/12853446140649976680
      Done mbak, udah bisa ternyata
  • Anonim
    Anonim26 Januari, 2019
    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,,
  • kholis
    25 Januari, 2019
    Profil: https://www.blogger.com/profile/00021883946774134708
    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..
  • Droppers
    07 Januari, 2019
    Profil: https://www.blogger.com/profile/13470987006598843235
    Mbak. saya work, tapi tulisannya "admin" bukan simbol centang. gimana caranya untuk ngubahnya ya? mohon pencerahannya
    • Igniel
      08 Januari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Tutorial ditambahkan. Silakan baca caranya di atas.
    • Unknown
      08 November, 2021
      Profil: https://www.blogger.com/profile/17664978270194428452
      #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;
      }
  • Mur
    28 Desember, 2018
    Profil: https://www.blogger.com/profile/12365541183446307767
    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...
    • Igniel
      28 Desember, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Alamat blognya apa?
    • Mur
      06 Januari, 2019
      Profil: https://www.blogger.com/profile/12365541183446307767
      https://murenzonio.blogspot.com Mba
    • Igniel
      06 Januari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      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;
      }
    • Mur
      08 Januari, 2019
      Profil: https://www.blogger.com/profile/12365541183446307767
      Sudah saya tambahkan di atas ] ] >< / b : skin > tapi masih belum muncul.

      Kalau tambahkan di atas < / style > sebaiknya yang dimana ya? Karena ada beberapa mba
    • Igniel
      08 Januari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      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>
  • Arif Santoso
    25 Desember, 2018
    Profil: https://www.blogger.com/profile/03365865900593576473
    ngga work mbak...
    kenapa ya?
    • Igniel
      25 Desember, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kalau sesuai tutorial pasti work.
    • Arif Santoso
      25 Desember, 2018
      Profil: https://www.blogger.com/profile/03365865900593576473
      saya sudah test di ]]> di semua < /style > tapi sama aja mbak :'(
    • Igniel
      25 Desember, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      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;
      }
  • Mhd Amirul Azhar
    24 Desember, 2018
    Profil: https://www.blogger.com/profile/12853446140649976680
    Tutor auto watermark (gatau apa namanya) di seluruh gambar diblog dong mbak, hehe
    • Igniel
      24 Desember, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      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.
    • Mhd Amirul Azhar
      24 Desember, 2018
      Profil: https://www.blogger.com/profile/12853446140649976680
      iya mbak, itu maksud saya. nyari digoogle malah tambahin satu-satu tiap gambar, saya lihat punya mbak kok bisa auto semua gitu
    • Tuoka20
      29 Mei, 2019
      Profil: https://www.blogger.com/profile/07175678781392185906
      mbaknya nyisipin kodenya langsung ke html Editornya..
      kalo yang agan liat satu satu itu kemungkinan di edit melalui postingan pada mode HTML gambarnya