Cara Menambahkan Tanda Centang Disamping Nama Admin Pada Komentar

Tanda centang berwarna biru ini akan muncul disebelah nama author atau admin blog pada kolom komentar. Penerapan centang biru ini menggunakan CSS pada
Cara menambahkan tanda centang disamping nama admin di komentar blog - Tanda centang berwarna biru ini akan muncul disebelah nama author atau admin blog pada kolom komentar. Penerapan centang biru ini menggunakan CSS pada template. Jadi gak memberatkan loading blog berlebih.

Pemasangan centang biru ini juga sangat mudah. Bahkan orang yang masih baru di dunia blogging pun bisa memasang ikon centang biru ini disebelah nama admin blog. Manfaat dari ikon centang biru di sebelah admin sendiri berguna sebagai pembeda. Agar para pembaca dan orang yang berkomentar tahu mana yang asli author dan mana yang termasuk visitor. 

Centang biru ini juga banyak digunakan kalangan blogger. Diantaranya blog igniel.com, arlinacode.com dan diblog Tekno Thalib pun menerapkan CSS ikon centang biru ini. Alasan utama saya memasang CSS ini adalah bahwa ikon centang pada author di kolom komentar blog bisa meningkatkan kualitas blog serta menambah nilai positif terhadap visitor. Dan pastinya akan terlihat lebih profesional dong.

Nah, pada artikel kali ini saya akan memberikan tutorial bagaimana cara membuat dan menambahkan ikon centang biru ini pada author blog di kolom komentar. Ada beberapa CSS atau gaya centang yang bisa kamu pasang. Pilih saja yang sesuai dengan selera kamu. 

Cara Menambahkan Ikon Centang Biru Pada Author Blog Di Kolom Komentar



  • Masuk ke dasbor blogger kamu.
  • Masuk ke menu Theme > Edit HTML.
  • Cari kode ]]></b:skin> lalu tambahkan CSS berikut diatas kode tadi.

/* Tanda Admin di kolom komentar by teknothalib */
#comments .comments-content .icon.blog-author{
  width: 20px;
  height: 20px;
  margin-left: 5px;
  vertical-align: -1px;
  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;
}

  • Kemudian simpan temanya dan lihat hasilnya.

Itu CSS yang pertama dengan gaya centang biru berbentuk bulat. Kamu juga bisa pilih CSS lainnya dibawah ini.

2. Ikon Centang Biru Berbentuk Shield Elegan


/* Icon Tanda Centang Biru Admin by teknothalib */
#comments .comments-content .icon.blog-author{
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1Z' fill='%23118ff9'/%3E%3C/svg%3E") no-repeat center center;

3. Ikon Centang Biru Berbentuk Decagram


/* icon Centang Admin Biru by teknothalib */
#comments .comments-content .icon.blog-author{
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z' fill='%23118ff9'/%3E%3C/svg%3E") no-repeat center center;

4. Ikon Centang Biru Berbentuk Bookmark


/* icon Admin
Centang Biru by teknothalib */
#comments .comments-content .icon.blog-author{
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17,3A2,2 0 0,1 19,5V21L12,18L5,21V5C5,3.89 5.9,3 7,3H17M11,14L17.25,7.76L15.84,6.34L11,11.18L8.41,8.59L7,10L11,14Z' fill='%23118ff9'/%3E%3C/svg%3E") no-repeat center center;

5. Tulisan Author Atau Admin Berupa Tulisan (Bukan Ikon)


#comments .comments-content .icon.blog-author:after{
content: 'Admin';
background-color: #118ff9;
color: #fff;
font-size: 12px;
display: inline-block;
margin: 0px 7px;
padding: 2px 5px;
border-radius: 3px;
}

Kalau kamu mau ganti warna background dari tanda centangnya ganti saja teks yang diwarnai sesuai dengan warna yang kamu inginkan. Untuk ilustrasinya bisa kamu lihat pada gambar yang ada dibawah ini.



Itulah tutorial cara menambahkan ikon tanda centang disebelah nama Admin pada kolom komentar diblog yang bisa saya tulis pada artikel kali ini. Kalau masih bingung cara memasangnya, tanyakan langsung di kolom komentar.


There are many unique things in the world that you haven't seen

Tulis Komentar

1. Centang kotak "Notify Me" sebelum anda berkomentar.
2. Hindari berkomentar diluar pembahasan artikel diatas.
3. Dilarang memasukan link aktif!
4. Gunakan <i>comment</i> untuk menuliskan kode.
5. Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL.
6. Jika ingin memasukan kode, parse terlebih dahulu (Terutama JavaScript dan HTML).
7. Dilarang mempromosikan produk atau situs apapun di kolom komentar!