Cara Menambahkan Tanda Admin/Author pada Komentar Blogger - Deny Listianto

1 April 2018

Cara Menambahkan Tanda Admin/Author pada Komentar Blogger

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.
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Ad Placement

Notifications

Disqus Logo