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:

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.
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:
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:
Faldart
itu kode Css nya untuk yg dimana di b:skin atau body
Taufik Nurrohman
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: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: arhads@gmail.com
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
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
Taufik Nurrohman
Pakai itu saja juga bisa :)
Agung Ngurah
mantab tutonya sobat, lengkap dan bergizi
Yogi Prasetian
mantap mas,.
jadi pengen nyoba nih :Q
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:
Untuk menghilangkan tautan dari pengunjung, pakai CSS:
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: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
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:
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:
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:
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');
});