Highlight warna komen author dekat komen list

05 January 2009

Mungkin anda mahu kelainan kepada komen anda sediri daripada komen-komen pembaca. pembaca juga senang bezakan komen penulis dengan komen pembaca. takde la pembaca nak kena tengok elok-elok nak tahu siapa yang komen. dengan adanya warna yang membezakan komen ini pembaca tidak akan keliru lagi. malah mudah mengenali komen author ataupun penulis dengan ada nya highligh color ni.

ikuti tutorial di bawah ini. aku menggunakan template minima putih sebagai rujukan. supaya mudah anda mencari code-code yang perlu diedit.

Tutorial highlight author comment
aku pecahkan kepada dua section. CSS section dengan XML section. untuk memudahkan anda.

Sebelum mulakan pastikan anda backup template anda dulu. If anything happen later.

CSS editing


  1. login ke blogger. kemudian pergi ke Layout > Edit HTML.
  2. cari code seperti dibawah ini.
    #comments-block .comment-body {
      margin:.25em 0 0;
    }
    #comments-block .comment-footer {
      margin:-.25em 0 2em;
      line-height: 1.4em;
      text-transform:uppercase;
      letter-spacing:.1em;
    }
    #comments-block .comment-body p {
    margin:0 0 .75em;
    }

  3. kemudian, dibawah code itu masuk kan code ini
    #comments-block .comment-body-author {
      margin:.25em 0 0;
    }
    #comments-block .comment-body-author p {
      margin:0 0 .75em;
      color: #ff0000;
      text-height:bold;
    }

    dan ianya akan kelihatan macam ni
    #comments-block .comment-body {
      margin:.25em 0 0;
    }
    #comments-block .comment-footer {
      margin:-.25em 0 2em;
      line-height: 1.4em;
      text-transform:uppercase;
      letter-spacing:.1em;
    }
    #comments-block .comment-body p {
      margin:0 0 .75em;
    }
    #comments-block .comment-body-author {
      margin:.25em 0 0;
    }
    #comments-block .comment-body-author p {
      margin:0 0 .75em;
      color: #ff0000;
      font-weight:bold;
    }
    

  4. siap bahagian CSS styling.


XML editing


  1. di Layout > Edit HTML, check kan checkbox Expand Widget Templates
  2. cari <dl id='comments-block'>
  3. kenal pasti semua code seperti di bawah
    <dl id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>
    <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
    <a expr:name='data:comment.anchorName'/>
    <b:if cond='data:comment.authorUrl'>
    <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
    <b:else/>
    <data:comment.author/>
    </b:if>
    <data:commentPostedByMsg/>
    </dt>
    <dd class='comment-body'>
    <b:if cond='data:comment.isDeleted'>
    <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
    <p><data:comment.body/></p>
    </b:if>
    </dd>
    <dd class='comment-footer'>
    <span class='comment-timestamp'>
    <a expr:href='data:comment.url' title='comment permalink'>
    <data:comment.timestamp/>
    </a>
    <b:include data='comment' name='commentDeleteIcon'/>
    </span>
    </dd>
    </b:loop>
    </dl>

  4. musukkan code seperti dibawah.
    <dl id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>
    <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
    <a expr:name='data:comment.anchorName'/>
    <b:if cond='data:comment.authorUrl'>
    <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
    <b:else/>
    <data:comment.author/>
    </b:if>
    <data:commentPostedByMsg/>
    </dt>
    <b:if cond='data:comment.author == data:post.author'>
    <dd class='comment-body-author'>
    <p><data:comment.body/></p>
    </dd>
    <b:else/>
    <dd class='comment-body'>
    <b:if cond='data:comment.isDeleted'>
    <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
    <p><data:comment.body/></p>
    </b:if>
    </dd>
    </b:if>
    <dd class='comment-footer'>
    <span class='comment-timestamp'>
    <a expr:href='data:comment.url' title='comment permalink'>
    <data:comment.timestamp/>
    </a>
    <b:include data='comment' name='commentDeleteIcon'/>
    </span>
    </dd>
    </b:loop>
    </dl>

  5. siap XML editing sekarang anda boleh save kerja anda kemudian preview. gambar ni hasil aku buat.


anda boleh design warna highlight anda dengan mengedit code dalam no.3 CSS editing.

sekian, selamat mencuba

5 comments

  1. tutorial ni berdasarkan template minima. tapi kalau ko pakai template laen coding nya maybe berbeza.

    tapi methodnya still sama lagi. ko cari code
    <dd class='comment-body'>
    <b:if cond='data:comment.isDeleted'>
    <span class='deleted-comment'><data:comment.body/>&lt/span>
    <b:else/>
    <p><data:comment.body/></p>
    </b:if>
    </dd>

    pastu letak code yg kaler merah tu atas ngan bawah code ni.

    try la dulu. takpun biasakan dii dulu edit minima template. kemudian baru try template laen.

    :D

    ReplyDelete
  2. cop2 nk tnye,kne wat both ke?xml n css?

    ReplyDelete
  3. ye saya. kena edit dua-dua code. XML and CSS

    ReplyDelete