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.
Labels: Blogger, JavaScript, Menengah
45 Comments:
Aku googling udah lama g ketemu caranya, eh ternyata dibahas, makasih kak ?
Kalau mau mencari coba pakai kata kunci bahasa Inggris mbak, cuma kebanyakan tekniknya memakai JQuery :)
Keren nih mas !
saya simpan dulu !
hehe
di blogku memakai thread artistutorial.
apakah boleh memakai trik/kode diatas? atau kodenya beda lagi?
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'>
mantap sob triknya
membantu banget nih buat pengunjung kalo lagi bertanya lewat komentar :-bd
thanks sob, sukses selalu
> www.elevenews.com
iconnya bisa diganti gak mas..... :(
kalau saya make .comments .comments-content .blog-author:after { :)
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');
}
I really like your comment style. Can you post a tutorial about it.? Please.
At least how to make the reply like yours, with comment form under the post and not whit popup window.
mas itukan yang kata icon gambar yang disisipin..
kalo tulisan gimana caranya??
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
if (icon[i].className == "icon user blog-author") {
icon[i].textContent = "Blablablah...";
}
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
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
NO (-.-,) (-.-,) (-.-,)
I'm very sorry :'(
Why not? I'll pay you for your service.
Pakai itu saja juga bisa :)
itu kode Css nya untuk yg dimana di b:skin atau body
<b:skin> ... </b:skin>
mantab tutonya sobat, lengkap dan bergizi
mantap mas,.
jadi pengen nyoba nih :Q
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. :)
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}
Oh.. .visitor-comment
Soalnya saya bingung nyari di google keywordnya apa. Nanya kesini jadinya.
Terimakasih banyak mas ^_^ maaf kalo merepotkan ngebuatin kodingnya. hehe..
Waduh.. Ternyata ga work mas #comment-holder .visitor-comment p a {display:none;}
Jadi bingung saya :(
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?
Saya taruh di atas < / head > mas ~x(
Sekarang sudah bisa mas.. hehe.. :D
Bermasalah lagi mas
Jika saya berkomentar dengan menyematkan link, juga ikut hilang. :(
Mohon maaf kalo merepotkan mas
#comment-holder .visitor-comment p a {display:none}
#comment-holder .admin-comment p a {display:inline !important}
Akhirnya.. Work mas. ^_^
itu yg hilang hanya link'a atau tulisan yg mengandung link juga hilang??
jadi tulisan tidak hilang tetapi hanya link'a saja yg hilang??
Mas, misalnya ada 2 admin.. nah kalo berkomentar di post yang sama itu iconnya bakalan ada di 2 2 nya ato yg ngepost aja ?
Belum pernah membuat blog dengan admin berganda. Dicoba saja.
Yang saya cari2 nyelip di komentar. Saya sangat terbantu dan coba saya terapkan. Terima kasih banyak Mas. :-bd
UWOOO!!!!! Ini dia!!! Terima kasih Bocorannya!!! Ternyata saya kurang teliti sampe gak liat ke sana -_-
Kang Taufik, ada yang error nih, jika saya mereply komentar pengunjung, maka komentar saya(admin) pun akan memiliki kelas 'visitor-comment' gambarnya kayak gini:
http://1.bp.blogspot.com/-HUqJKkJpok8/Uf5EzMfKutI/AAAAAAAABzs/0lgj5-WHSG8/s1200/visitor+cmment.gif
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
...
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?
please tell me How to change this class [icon user-author blog] to [icon user] thanks
Like this:
if (icon[i].className == "icon user blog-author") {
icon[i].className = "icon user";
}
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.
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}
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');
});
Post a Comment
<< Home