Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

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

  

Berlangganan

Berlangganan posting: Daftarkan alamat email Anda untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan.

 45 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Komunitas

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!