Skip to main content

Kode CSS Untuk Menampilkan Author Di Komentar Blogger



Bagi pengguna Blogger yang pada tampilan kolom komentarnya belum memiliki teks 'Author atau Admin atau yang biasanya tertera disamping nama pemilik blog pada komentarnya, bagi yang ingin menampilkan teks tersebut dapat ditampilkan dengan Css. Jadi jika anda ingin menampailkannya tinggal pasang selector css berikut ini, pendek saja kode cssnya.

.icon.blog-author::after{
display:inline-block;
font-size:8px;
content:'Admin';
border-radius:2px;
background:$(body.link.color);
color:$(body.background.color);
margin:0 7px;
padding:2px 4px;
white-space:nowrap
}

Selector css tersebut dapat ditambahkan kedalam template namun jika warna background dan teksnya tidak sesuai silakan disesuaikan saja. Tapi kemungkinan bakal sesuai karena kode warnanya saya balik. Warna background menjadi warna link dan warna link menjadi warna background.

Untuk menambahkan kode tersebut bisa langsung kedalam template (Blogger versi baru). 

Kunjungi Tema > Tap titik tiga > Edit HTML > Taruh di bagian Css antara <skin> dan </skin>. Karena pada tampilan mobile tidak bisa mencari teks silakan simpan dimana saja antara <skin> dan </skin> tersebut. Jika browser peramban anda bisa mencari teks sebaiknya cari teks #comments{ dan taruh kode diatas dan letakkan dibagian bawahnya.

Atau dari tampilan desktop, Kunjungi Tata Letak > Desiner Tema > Tambah css, simpan kode diatas kedalam kotak disana.

Sebaiknya masukkan kode diatas melalui tampilan desktop saja karena lebih mudah sebab tampilan desktop (Blogger versi klasik) bisa juga diakses menggunakan Smartphone.

content:'Admin'; dapat diubah sesuai selera misal menjadi content:'Author'; atau content:'Moderator'; atau kode2 karakter khusus untuk css misal kode 'titik' seperti ini content:'\00B7'; dan teks lainnya.

Background juga dapat dirubah menjadi gambar dengan terlebih dulu mengosongkan value bagian ini content:'Admin'; menjadi content:''; tapi tidak mengapa jika tidak dikosongkan hanya saja teks 'Admin' akan muncul bersamaan dengan gambar sekaligus.

Berikut ini kode merubah background menjadi gambar. Usahakan ukuran icon/gambarnya yang kecil saja seukuran semut, ukuran 8px × 8px mungkin.

background:url('isi-disini-dengan-alamat-url-gambar') no-repeat center center;

Jadi intinya bila ingin pakai gambar salin saja kode yang dibawah ini.

.icon.blog-author::after{
display:inline-block;
font-size:8px;
content:'';
border-radius:2px;
background:$(body.link.color) url('isi-disini-dengan-alamat-url-gambar') no-repeat center center;
color:$(body.background.color);
margin:0 7px;
padding:2px 4px;
white-space:nowrap
}

Sekian dan selamat mencoba!

Comments