Cara Tambah Centang Biru di Samping kanan Nama Author Komentar Blogger - Mediaachmad

Cara tambah centang biru di samping kanan nama author di komentar blogger dan dengan berbagai macam icon pilihan. Kesempatan kali ini mediaachmad akan memberikan tutorial Cara tambah centang biru di samping kanan nama admin di komentar blogger.

Kolom komentar merupakan tempat berinteraksi dengan para pembaca. Mereka bisa memberikan saran, kritik, atau laporan yang berkaitan dengan artikel yang terkait. Bagi para penulis blog, membalas komentar blog sangatlah penting, karena dapat mendekatkan blog dengan pembaca.

Saat berkomentar agar pembaca bisa membedakan mana admin mana pembaca lain, ada baiknya untuk menambahkan icon atau tanda centang biru di samping kanan nama komentar admin. Cara penambahannya juga cukup mudah, Cuma hanya menambahakan kode CSS.

Disini mediaachmad akan memberikan berbagai macam variasi tanda centang, sobat mediaachmad bisa memilih dengan keinginan kalian sendiri. Oke langsung saja silakan simak tutorial berikut ini.

Cara tambah centang biru di samping kanan nama author di komentar blogger.

Pertama, Kalian login Blogger – masuk ke TEMA – klik EDIT HTML.

Kedua, Tambahkan kode CSS dibawah ini, Letakkan di ATAS tag ]]></b:skin> atau </style>.

Script menggunakan Centang biru Circle (default)

/* Admin icon Centang Biru by mediaachmad */
#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='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;
 display: inline-block;
 margin-left: 5px;
 height: 16px;
 width: 16px;
 vertical-align: -3px;
}

Keterangan:

Untuk mengganti dengan icon yang lain Kode CSS yang ditandai warna biru silakan ganti dengan beberapa pilihan kode dibawah ini.

Untuk mengganti warna silakan kalian ganti kode warna HEX yang ada di dalam attribute fill, Namun kalian jangan menghapus kode %23.
Contoh: fill='%23118ff9'
Ganti dengan kode warna HEX yang bertanda warna merah.

Beberapa icon lain, untuk cara ganti silakan simak keterangan diatas point 1.

Centang Biru Shield |

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;

Centang Biru Decagram |

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;

Centang Biru Bookmark |

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;

Dua Centang Biru |

background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.41,13.41L6,19L7.41,17.58L1.83,12M22.24,5.58L11.66,16.17L7.5,12L6.07,13.41L11.66,19L23.66,7M18,7L16.59,5.58L10.24,11.93L11.66,13.34L18,7Z' fill='%23118ff9'/%3E%3C/svg%3E") no-repeat center center;

Centang Biru Marker |

background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,16L5,11L6.41,9.58L10,13.17L17.59,5.58L19,7M19,1H5C3.89,1 3,1.89 3,3V15.93C3,16.62 3.35,17.23 3.88,17.59L12,23L20.11,17.59C20.64,17.23 21,16.62 21,15.93V3C21,1.89 20.1,1 19,1Z' fill='%23118ff9'/%3E%3C/svg%3E") no-repeat center center;

Bukan hanya itu sobat juga bisa mengganti centang biru menggunakan Text. Simak berikut ini

Script Menambahkan Text (Bukan Centang Biru)

#comments .comments-content .icon.blog-author:after{
  content: 'Author'; /* 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;
}

Ketiga, Silakan Simpan Tema, dan lihat hasilnya.

Mungkin itu yang dapat mediaachmad sampaikan tentang Cara tambah centang biru di samping kanan nama author di komentar blogger, semoga dapat bermanfaat jika ada kendala silakan komentar dibawah. Sekian dan Terima Kasih.