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: 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

      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

  • 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:

      <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.