Cara Menambahkan Tanda Admin/Author pada Komentar Blogger

Kali ini saya bakal berbagi Cara Menambahkan Tanda Admin/Author pada Komentar Blogger. Saat blogging sobat tentu sudah sering mengejar komentar pada Postingan atau artikel yang sobat buat, atau dalam kata lain tulisan atau artikel yang anda buat terdapat sebuah komentar.
Kali ini saya bakal berbagi Cara Menambahkan Tanda Admin/Author pada Komentar Blogger.

Cara Menambahkan Tanda Admin/Author pada Komentar Blogger

Saat blogging sobat tentu sudah sering mengejar komentar pada Postingan atau artikel yang sobat buat, atau dalam kata lain tulisan atau artikel yang anda buat terdapat sebuah komentar.

Nah, bila Hal tersebut terjadi tentu kita Admin akan menjawab komentar tersebut.

Namun kadang, di dibebeapa template tidak terdapat tanda Admin/Author dan Pengunjung/Visitor pada kolom komentarnya yang dapat membedakan antara penguunjung dan admin blog.

Jangan bingung, karena menambahakan tandanya cukup mudah, silahkan ikuti tutorial berikut.

Cara Menambahkan Tanda Admin/Author pada Komentar Blogger


Kali ini saya ada tiga style yang akan saya bagikan pada tutorial ini, silahkan simak tutorial dibawah.

Cara pasang Style 1


1. Buka dasbord Blogger sobat.
2. Buka menu Tema Lalu Edit HTML.
3. Pasang Kode di bawah ini sebelum Kode ]]></b:skin> atau </style>.

#comments .comments-content .icon.blog-author {margin: -10px 0 0 10px;height: 20px; width: 59px; font-size:12px; background: #f44336; color: #fff; padding: 4px 10px;border-radius: 3px;cursor:pointer;}
#comments .comments-content .icon.blog-author:before {content: 'ADMIN';}
#comments .comments-content .icon.blog-author:hover {background: #202020; color: #fff;}

4. Simpan Tema, dam lihat hasilnya.

Cara pasang Style 2


1. Buka dasbord Blogger sobat.
2. Buka menu Tema Lalu Edit HTML.
3. Pasang Kode di bawah ini sebelum Kode ]]></b:skin> atau </style>.

#comments .comments-content .icon.blog-author {
background: rgba(0, 0, 0, 0) url('https://1.bp.blogspot.com/-alsW2TeAv4M/Wr_my1GP9vI/AAAAAAAAAnQ/mwxFKz_DTnUv7iZ02n3gvQZYuyJVqp2jgCPcBGAYYCw/s1600/Author.png') no-repeat scroll 0 0;
display: inline-block;
margin: 0 0 -10px 6px;
height: 32px;
width: 100px;
}

Keterangan:
  • Ganti url yang berwarna merah dengan url gambar Anda, sementara untuk rgba ganti dengan kode warna apabila ingin menggunakan warna background misal #FFF untuk kode warna putih.
  • Sesuaikan tinggi (height) dan lebar (width) dengan gambar yang Anda pakai.
  • Sesuiakan juga margin karena setiap gambar berbeda maka ukuran margin akan berbeda dengan format: 0 (top) 0 (right) -10px (bottom) 6px (left).

4. Simpan Tema, dam lihat hasilnya.

Cara pasang Style 3


1. Buka dasbord Blogger sobat.
2. Buka menu Tema Lalu Edit HTML.
3. Pasang Kode di bawah ini sebelum Kode </body>.

<script src='http://code.jquery.com/jquery-latest.js'/>
<!-- Tag Author -->
<script>
$(function() {
function highlight(){
$('.user.blog-author,.ssyby').closest('.comment-block')
.css('border', '1px solid #00a3c1')
.css('background','#ecf3f4 url("https://1.bp.blogspot.com/-alsW2TeAv4M/Wr_my1GP9vI/AAAAAAAAAnQ/mwxFKz_DTnUv7iZ02n3gvQZYuyJVqp2jgCPcBGAYYCw/s1600/Author.png") no-repeat bottom right')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>

4. Simpan Tema, dam lihat hasilnya.

Cukup mudah bukan. sekian, semoga berhasil salam Blogger.
Haloo, Selamat datang Sobat Coder, Selamat Belajar.

Posting Komentar