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

  • Pengertian CSS
    CSS atau Cascading Style Sheets merupakan bahasanya desainer web. Namun sebenarnya apa yang dimaksud dengan CSS? Kita akan membahas pengertian CCS dalam artikel ini. Pengertian CSS Untuk pengertian bebasnya, CSS adalah kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita bisa mengubah …
  • Input Kode CSS ke Halaman HTML
    Secara garis besar, terdapat 3 cara menginput kode CSS ke dalam HTML, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets. Metode Inline Style Metode Inline Style adalah cara menginput kode CSS langsung ke dalam tag HTML dengan menggunakan atribut style, contoh penggunaan Metode Inline Style CSS adalah sebagai berikut:…
  • Menghitung ke-spesifik-an Selector
    CSS memiliki aturan tertentu tentang ke-spesifik-an selector, yaitu ketika sebuah property dari CSS, saling menimpa satu sama lain, selector yang paling spesifik lah yang akan menang. Aturan ke-spesifik-an CSS dihitung menggunakan formula 4 digit, contohnya: 0,1,0,0. Perhitungannya sama seperti hitung-hitungan kita sehari-hari, dimana 0,1,0,0…
  • Cara Penulisan Kode CSS
    Setelah mempelajari pengertian selector, property dan value dari CSS pada tutorial sebelumnya, dalam tutorial CSS kali ini kita akan mempelajari aturan dan cara penulisan kode CSS itu sendiri. Untuk lebih mudah memahami aturan dan cara penulisan kode CSS, dibawah ini adalah contoh kode HTML + CSS sederhana yang akan kita bahas secara lebih me…
  • Prioritas Selector CSS (Cascading)
    Di dalam CSS, sebuah tag bisa memiliki lebih dari dari satu kode CSS. Dalam tutorial mengenal Urutan Prioritas Selector CSS ini kita akan membahas urutan atau prioritas dari kode CSS yang akan dipakai oleh tag HTML, atau dikenal dengan istilah Cascading. Pengertian Cascading dari CSS CSS adalah singkatan dari Cascading Style Sheet, dimana ca…
  • Jenis-jenis Selector Dasar CSS
    CSS memiliki jenis selector yang bervariasi, bahkan sangat beragam tergantung kebutuhan kita untuk mendesain halaman web. Dalam tutorial mengenal dasar selector CSS ini saya akan membahas 5 jenis selector dasar di dalam CSS. Selector CSS tidak hanya 5 jenis ini, namun dalam kebanyakan kasus sudah mencukupi untuk membuat sebuah halaman web HTML…

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