Menandai komentar admin dengan css

Menandai komentar admin dengan css

CSS Komentar sitemap Trik

Buat sahabta blogger yang masih bertanya tanya tentang cara membuat tanda pada komentar admin untuk mempermudah pengunjung mencari mana komentar admin kali ini saya beri trik dan caranya.
blogger tidak memberikan ijin secara penuh untuk melakukan modifikasi penuh komentar admin, 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.
jadi untuk lebih mudahnya kita akan menggunakan dan memanfaatkan css tanpa javascript...


oke langsung saja simak trik di bwah ini:

Pertama buka editor template blogger

cari kode tag berikut ini dalam template sobat...

<b:includable id='comments' var='post'>

lalu temukan kode di bawah ini dalam area tag komentar tersebut

1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-5<b:if cond='data:comment.authorUrl'>
  <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a> 
   <b:else/>
  <data:comment.author/> 
</b:if>

setelah anda temukan, letakkan kode berikut ini di bawah kode di atas

1code-line:3-1<span class='comment_author_flag'>Admin</span>

Kemudian, tambahkan kode ini di atas ]]></b:skin> atau </style>:

.comment_admin .comment_author_flag {display:inline;background:#bbb;font-size:13px;font-weight:normal;padding:2px 6px;margin-left:8px;color:#fff;border-radius:4px;text-transform:uppercase;letter-spacing:.1em}

untuk mengubah background komentar milik admin tambahkan kode css berikut ini di atas   ]]></b:skin> atau </style>:

1code-line:5-1div.comment_inner.comment_admin {background:#394549;}

jika dalam template sobat sudah ada, ganti saja warnanya dengan tampilan warna yang anda suka dengan merubah nilai pada {background:#394549;}

sekarang tinggal lihat hasilnya...

demikian saja semoga berguna dan bermanfaat sob...

Artikel Terkait

  • Javascript random banner
    Memasang banner atau iklan dengan gambar bukan hal baru yang sudah banyak di ketahui oleh semua sobat blogger, namun bagaimana cara agar sekumpulan banner atau banner yang lebih dari satu bisa di tampilkan secara berbeda - beda hanya di satu halaman bagi sobat yang belum tahu inilah triknya. sehingga banner sobat tidak bertumpuk dan berderet d…
  • Memasang Auto Read Mode Thumbnail No Image di Blogger
     Auto read more ini adalah sebuah trik dan cara untuk meringkas tampilan posting, seiring perkembangannya kini berkembang menjadi gaya keren tersendidi. bagaimana trik membuatnya? ikuti langkah di bawah ini.... Auto Readmore dengan Default Thumbnail   Untuk membuat Auto readmore dengan default thumbnail, anda perlu melakukan 2 langk…
  • Trik untuk menghilangkan atribut default blogger
    Jika sobat ingin menghilangkan atribut atau element bawaan default dari blogger berikut ini adalah caranya. 1. Login ke Blogger.Com. 2. Kemudian menuju Design, lalu Edit HTML. 3. Dan cari kode berikut ini. ]]></b:skin> 4. Tepat diatas kode itu, ]]></b:skin> klik pada kode diatas, kemudian copy kode di bawah ini tepat di at…
  • Menambahkan kode CSS Threaded Comments
    Untuk langkah - langkahnya, silahkan sobat ikuti cara di bawah ini   Menambahkan Kode CSS Threaded Comments 1. Masuk ke Dashboard 2. Edit HTML 3. Centang Expand Template Widget 4. Temukan kode ini (Gunakan Ctrl dan F untuk mempermudah pencarian): <b:includable id='feedLinksBody' var='links'> 5. Tambahkan kode dibawah ini tepat sebe…
  • Show hide searchbox blogger
    Membuat tampilan blog menjadi unik memang tidak ada habisnya dan kali ini saya coba untuk berbagi cara membuat kotak pencarian yang bisa di munculkan dan di sembunyikan pada blogger. lihat contoh berikut selain untuk menambah unik tampilan, trik kotak pencarian seperti ini juga bisa di gunakan untuk menghemat ruang dan kolom. bagaimana ca…
  • Trik Sederhana Cara Proteksi Gambar
    Nah disini sebenarnya ada Trik Proteksi sederhana yang bisa anda lakukan untuk menghindari gambar anda di simpan dari tangan-tanagn jahil, dimana hasil dari gambar yang dicoba disimpan nantinya hanya berupa gambar kosong. Kode standar dari gambar biasanya seperti ini: <img width="500" height="375" src="http://defandaky.blogspot/contohgam…

17 komentar

  1. Dafin defandaky22 Maret 2014 pukul 16.42

    sma sama sob smoga sukses, haha :-bd

    BalasHapus
  2. Rz Bot22 Maret 2014 pukul 17.47

    kalau sudah pakai thread comment tinggal ganti saja yah biar sesuai template :D

    BalasHapus
    Balasan
    1. Dafin defandaky22 Maret 2014 pukul 18.01

      ini memang thread comment gan, 

      <b:includable id='comments' var='post'>
      itu elemen area komentar yang muncul sedangkan 
      <b:if cond='data:comment.authorUrl'>
  <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a> 
   <b:else/>
  <data:comment.author/> 
</b:if>
      adalah seleksi kusus yang di terapkan... :)

      Hapus
  3. Wahyu Eka Prasetiyarini22 Maret 2014 pukul 20.58

    dengan adanya simbol tulisan admin pada komentar, maka kita bisa lebih mudah untuk membedakan mana komentar pengunjung dan mana komentar admin blog ya mas. Boleh juga nih tutorialnya dicoba. Terimakasih atas share nya ya ;)

    BalasHapus
    Balasan
    1. Dafin defandaky22 Maret 2014 pukul 23.11

      betul mbak, pa lagi yang masih mengijinkan komen anonim yang terkadang ngaku admin jadi bisa lebih mudah membedakan :)

      Hapus
  4. Kang Mousir29 Maret 2014 pukul 21.03

    lebih simple pake CSS daripada pake jQuery yang bikin ribet dan loading lama. Cara ini yang paling efektif dan aman untuk Menandai Komentar Admin :-d

    BalasHapus
  5. 24-art.blogspot.com7 April 2014 pukul 17.12

    gan , Emang nya Gabisa di Geser yah ?

    BalasHapus
  6. 24-art.blogspot.com7 April 2014 pukul 17.15

    Cara Membuat Kaya Komentar Admin disini Gimana ?

    BalasHapus
  7. 24-art.blogspot.com7 April 2014 pukul 17.16

    Terus Cara Membuat Komentar nya Kayak Gini Gimana ?
    Masih Banyak Tutorial nih
    Back yah

    BalasHapus
  8. Fahri Samudra2 Juni 2015 pukul 19.45

    kok gk work ya di blog ane, mohon cek gan fahri-artikel.blogspot.com

    BalasHapus
  9. Dafin defandaky6 Juli 2018 pukul 10.36

    sip :)

    BalasHapus
  10. Dafin defandaky7 Juli 2018 pukul 23.17

    jangan nyepam bos

    BalasHapus

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...