Mecha versi 2.6.3 sudah dirilis!

Menandai Komentar Admin pada Thread Komentar Blogger

Fitur komentar Blogger yang sekarang tidak mengizinkan kita untuk memodifikasi tampilan komentar admin. Blogger hanya memberikan sebuah ikon kecil secara otomatis untuk menunjukkan bahwa komentar yang memiliki ikon tersebut adalah komentar dari administrator blog:

Blogger Admin Comments Highlight
Tampilnya ikon administrator pada komentar yang ditulis oleh pemilik blog. (Gambar ikon umumnya berwarna hitam dengan gambar pena di dalamnya. Saya sudah memodifikasi tampilannya menjadi favicon).

Lalu bagaimana jika kita ingin membuat tampilan komentar yang berbeda pada blok komentar administrator secara keseluruhan? Dulu kita bisa menggunakan tag kondisional, tapi sekarang tidak lagi. Yang bisa kita lakukan adalah memanfaatkan JavaScript untuk mengecek keberadaan ikon komentar admin, kemudian menggunakan ikon tersebut sebagai elemen awalan untuk menyeleksi induk-induk yang mengelilinginya. Beberapa ada yang menggunakan jQuery, tapi Saya bisa menggunakan JavaScript mentah untuk ini:

Masuk ke Editor HTML template Anda, kemudian letakkan kode ini di atas tag </body>:

<script>
//<![CDATA[
// Highlight Blogger Admin Comments with JavaScript by Taufik Nurrohman
// URL: https://plus.google.com/108949996304093815163/about
(function() {
    if (document.getElementById('comment-holder')) {
        var comments = document.getElementById('comment-holder'),
            icon = comments.getElementsByTagName('span');
        for (var i = 0; i < icon.length; i++) {
            if (icon[i].className == "icon user blog-author") {
                icon[i].parentNode.parentNode.className += " admin-comment";
                icon[i].parentNode.parentNode.parentNode.className += " admin-comment-wrapper";
            }
        }
    }
})();
//]]>
</script>

Kemudian, tambahkan kode ini di atas ]]></b:skin> atau </style>:

.admin-comment-wrapper {
  padding-top:0 !important;
  padding-left:10px !important;
  padding-bottom:0 !important;
  border-left:4px solid green;
}

.admin-comment-wrapper a,
.admin-comment-wrapper a:visited {color:brown}

.admin-comment-wrapper .admin-comment {
  padding:10px 15px;
  border:1px solid darkgreen;
  background-color:skyblue;
  color:black;
}

Klik Simpan Template. Kode CSS bisa dimodifikasi sesuka hati.

Lihat Demo

45 Komentar

IRIL SAGITA

Aku googling udah lama g ketemu caranya, eh ternyata dibahas, makasih kak ?

Taufik Nurrohman

Kalau mau mencari coba pakai kata kunci bahasa Inggris mbak, cuma kebanyakan tekniknya memakai JQuery :)

Unknown

Keren nih mas !
saya simpan dulu !
hehe

abang ichal

di blogku memakai thread artistutorial.
apakah boleh memakai trik/kode diatas? atau kodenya beda lagi?

Taufik Nurrohman

Kalau fitur komentar sudah bukan berupa original (lebih tepatnya, memakai kerangka komentar lama yang kodenya masih terbuka) tidak perlu memakai ini. Tag kondisional sudah memisahkan kelas-kelas admin dan komentator umum secara otomatis:

<b:if cond='data:comment.author == data:post.author'>

Afif

mantap sob triknya
membantu banget nih buat pengunjung kalo lagi bertanya lewat komentar :-bd

thanks sob, sukses selalu

> www.elevenews.com

Anonim

iconnya bisa diganti gak mas..... :(

Taufik Nurrohman

Ini kode CSS untuk memodifikasi tampilan ikon administrator:

.comments .comments-content .icon.blog-author{
width:18px;
height:18px;
display:inline-block;
margin:0 0 -4px 6px;
background-repeat:no-repeat;
background-image:url('img/gambar-kustom-anda.png');
}

Faldart

itu kode Css nya untuk yg dimana di b:skin atau body

Putra

kalau saya make .comments .comments-content .blog-author:after { :)

Anonim

I really like your comment style. Can you post a tutorial about it.? Please.

Anonim

At least how to make the reply like yours, with comment form under the post and not whit popup window.

Taufik Nurrohman

Basically, the difference between default comment form and reply form is only on the parentID parameter:

// Default form:
http://www.blogger.com/comment-iframe.g?blogID=XXXXXX&postID=XXXXXX
// Reply form:
http://www.blogger.com/comment-iframe.g?blogID=XXXXXX&postID=XXXXXX&parentID=XXXXXX

Anonim

This is the link to my template http://www64.zippyshare.com/v/26182264/file.html

can you please make it with no popup and send it to my email: [email protected]

Thank you

Taufik Nurrohman

NO (-.-,) (-.-,) (-.-,)
I'm very sorry :'(

Anonim

Why not? I'll pay you for your service.

budkalon

UWOOO!!!!! Ini dia!!! Terima kasih Bocorannya!!! Ternyata saya kurang teliti sampe gak liat ke sana -_-

Unknown

mas itukan yang kata icon gambar yang disisipin..
kalo tulisan gimana caranya??

Taufik Nurrohman

if (icon[i].className == "icon user blog-author") {
icon[i].textContent = "Blablablah...";
}

Unknown

kok kalo di saya gak bisa ya mas,,, bisanya cuma pake .comments .comments-content .icon.blog-author:after{

} jadi tulisannya di samping nama author,itu gk kenapa²kan kalo pake itu

Agung Ngurah

mantab tutonya sobat, lengkap dan bergizi

Cyserrex

Iya mas. Itu untuk admin/author. .admin-comment

Sedangkan Class untuk visitor yang berkomentar apa ya mas?
Soalnya saya mau menghilangkan link aktif hanya pada komentar visitor yang menyematkan link.
Mohon jawabannya ya mas..
Terimakasih. :)

Taufik Nurrohman

Coba ini:

<script type='text/javascript'>
//<![CDATA[
// Highlight Blogger Admin Comments with JavaScript by Taufik Nurrohman
// URL: https://plus.google.com/108949996304093815163/about
(function() {
if (document.getElementById('comment-holder')) {
var comments = document.getElementById('comment-holder'),
icon = comments.getElementsByTagName('span');
for (var i = 0; i < icon.length; i++) {
if (icon[i].className == "icon user blog-author") {
icon[i].parentNode.parentNode.className += " admin-comment";
icon[i].parentNode.parentNode.parentNode.className += " admin-comment-wrapper";
} else {
icon[i].parentNode.parentNode.className += " visitor-comment";
}
}
}
})();
//]]>
</script>

Untuk menghilangkan tautan dari pengunjung, pakai CSS:

#comment-holder .visitor-comment p a {display:none}

Cyserrex

Oh.. .visitor-comment
Soalnya saya bingung nyari di google keywordnya apa. Nanya kesini jadinya.
Terimakasih banyak mas ^_^ maaf kalo merepotkan ngebuatin kodingnya. hehe..

Cyserrex

Waduh.. Ternyata ga work mas #comment-holder .visitor-comment p a {display:none;}
Jadi bingung saya :(

Taufik Nurrohman

Kelas visitor-comment itu muncul karena ditambahkan oleh kode ini:

icon[i].parentNode.parentNode.className += " visitor-comment";

Kode lengkap di atas diletakkan di atas </body> kan?

Cyserrex

Bermasalah lagi mas
Jika saya berkomentar dengan menyematkan link, juga ikut hilang. :(
Mohon maaf kalo merepotkan mas

Taufik Nurrohman

#comment-holder .visitor-comment p a {display:none}
#comment-holder .admin-comment p a {display:inline !important}

Cyserrex

Akhirnya.. Work mas. ^_^

Tricahyo Abadi

Yang saya cari2 nyelip di komentar. Saya sangat terbantu dan coba saya terapkan. Terima kasih banyak Mas. :-bd

Unknown

itu yg hilang hanya link'a atau tulisan yg mengandung link juga hilang??
jadi tulisan tidak hilang tetapi hanya link'a saja yg hilang??

Cyserrex

Saya taruh di atas < / head > mas ~x(
Sekarang sudah bisa mas.. hehe.. :D

Dandi Saseno

Mas, misalnya ada 2 admin.. nah kalo berkomentar di post yang sama itu iconnya bakalan ada di 2 2 nya ato yg ngepost aja ?

Taufik Nurrohman

Belum pernah membuat blog dengan admin berganda. Dicoba saja.

budkalon

Kang Taufik, ada yang error nih, jika saya mereply komentar pengunjung, maka komentar saya(admin) pun akan memiliki kelas 'visitor-comment' gambarnya kayak gini:

Taufik Nurrohman

Itu karena komentar balasan berada di dalam komentar pengunjung:

> .visitor-comment
> .visitor-comment
> .visitor-comment
> .admin-comment
> .visitor-comment
> .admin-comment
> .visitor-comment
> .visitor-comment
...

budkalon

Sebenarnya saya nyoba pake selektor css kayak gini:
.admin-komen:not('.visitor-komen') {}
Tapi gak ngaruh :( Kira-kira apakah selektornya yang salah? atau memang tidak bisa?

Admin

please tell me How to change this class [icon user-author blog] to [icon user] thanks

Taufik Nurrohman

Like this:

if (icon[i].className == "icon user blog-author") {
icon[i].className = "icon user";
}

Anonim

mas bisa gk kita manfaatin jquery ini untuk menandai komentar admin melalui URL.
var spamlist=[
'http://www.blogger.com/profile/12345678', /* contoh URL komentator */
'http://namablog.blogspot.com/',
'Alamat URL komentator ke-3' /* URL yang terakhir tak perlu diberi koma */
];
for(var v=0; v<spamlist.length; v=v+1){
$("a[href='"+spamlist[v]+"']").each(function(){
$(this).closest(".comment_inner").find(".comment_body")
.replaceWith("<div class='.comment_body' style='color:red'>Anda telah di banned! Silahkan tinggalkan blog ini!</div>"),
$(this).replaceWith("<span style='color:red'>BANNED USER!</span>");
})
}

Saya ingin menandai komentar admin dengan border-top:5px solid #000.

Taufik Nurrohman

Mungkin begini:

var urlAdmin = [
"http://www.blogger.com/profile/17973546667775491071", // admin 1
"http://www.blogger.com/profile/17973546667775491071"  // admin 2
];
$.each(urlAdmin, function(i) {
$('a[href="' + urlAdmin[i] + '"]').closest('.comment_inner').addClass('admin');
});
.comment_inner.admin {border-top:5px solid #000}

Anonim

terima kasih mas berhasil, tapi ada sedikit masalah jadi saya sempurnakan seperti ini. :-d
var urlAdmin = [
"URL ADMIN KE 1", // admin 1
"URL ADMIN KE 2" // admin 2
];
$.each(urlAdmin, function(i) {
$('a[href="' + urlAdmin[i] + '"]').closest('.comment_inner').css('border-top', '5px solid #ED1C24');
});

Komentar telah ditutup.