Muhammad Fauzan
Muhammad Fauzan Gue biasa dipanggil “Ozan” lahir dengan sehat pada tanggal 17 Mei 2000, Gue kuliah di UIN Alauddin Makassar, Jurusan Sistem Informasi. Facebook Twitter Instagram

Menambahkan Centang Biru Pada Komentar Blogger

No comments



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 diatas </style> atau ]]></b:skin>. Kode berfungsi untuk memunculkan ceklis alias centang biru di samping nama author.


/* Admin Badge on Blogger Comments by fauzanmsc.blogspot.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.

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 fauzanmsc.blogspot.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;
}

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. 

Segitu dulu tutorial kali ini. Jika ada pertanyaan, mari berjumpa pada kolom komentar di bawah. Semoga bermanfaat!.

Muhammad Fauzan
Muhammad Fauzan Gue biasa dipanggil “Ozan” lahir dengan sehat pada tanggal 17 Mei 2000, Gue kuliah di UIN Alauddin Makassar, Jurusan Sistem Informasi. Facebook Twitter Instagram

Comments

Lorem ipsum dolor sit amet, consectetur adipisicing elit, !