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:

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