Sunday, January 9, 2011

How To Highlight Author Comment in Blogger

In the blogger comment form, there is nothing to distinguish whether the comments from the blog author or blog visitors. If you wanna highlight blog author comment in blogger comment form, you can highlight it by follow this tutorial provided. 

Author comment highlighted!

Just need to add a little blogger hack code. Let's start :

1. Go to your Dashboard >> Design >> Edit HTML >> Check Expand Widget Templates.

2. Search this code (Ctrl + F), </head>


3. Then, add this code below, above it :
<style>
.comment-body-author {
background: #FEF9EA;
color: #333333;
border-top:1.2px dotted #002F66;border-bottom:1.2px dotted #002F66 ;border-left:1.2px dotted #002F66;border-right:1.2px dotted #002F66;
line-height: 1.4em;
margin:0;
padding:0 0 0 20px;
}
</style>

You can change : 
#FEF9EA = background color
#333333 = text color
1.2px = border size


You also can use image as a background, use this code :
<style>
.comment-body-author {
background: #FEF9EA;
color: #333333;
background: url(URL OF YOUR BACKGROUND IMAGE) ;
border-top:1.2px dotted #002F66;border-bottom:1.2px dotted #002F66 ;border-left:1.2px dotted #002F66;border-right:1.2px dotted #002F66;
line-height: 1.4em;
margin:0;
padding:0 0 0 20px;
}
</style>

4. Once it done, find this code or something like this :
<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' expr:id='data:widget.instanceId   data:comment.cmtBodyIdPostfix'>
<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>

You only need to add the red code correctly!

5. Save your template & DONE!


Now, your comment will be highlighted as blog author.

Ditulis Oleh : silent screamer // 4:31 AM
Kategori:

15 comments:

  1. suda sa try mcm tia dapt owh bos

    ReplyDelete
  2. @beaty
    eh, xdpt ka..? dpt ba..tgk aku ni..:a

    ko try cari kod ni :
    </dt>

    dan pastikan d atsnya ada kod ini :
    <data:commentPostedByMsg/>

    pastu ko buat la mcm dlm tutorial tu. k

    Selamat berjaya beaty :a

    ReplyDelete
  3. @beaty
    ok..nt klu mcm nda jadi gak..gtau jak .k..:a

    ReplyDelete
  4. just want to say, your instructions are the easiest that I have seen and I have search a lot of tutorial.

    I have a border around all comments, though I can't seem to get the author box to have the same padding as the other comments, other than that, this is a wonderful tutorial.

    Thank you very much.

    ReplyDelete
  5. @lissa
    ur welcome lissa.. TQ for spend some time here :a

    ReplyDelete
  6. bro, yang ini aku tak dapat la.. template terus error bila try preview.. mcmana ek?

    ReplyDelete
  7. @Haz Issac
    Mesti dpt tu bro..ikut saja macam arahan tu..

    Tp klu kmu da tmbh reply to comment tu..ssh skit nak pdn kan kod..tp still boleh..rumit skit la..

    Try j bro..pasti dpt..

    ReplyDelete
  8. @Alfian J. yup.. aku dah tambah dah "balas komen ini" bro, nak cari coding dier balik, alahai, pening betul kepala.. kalau buang code tu dulu, ada effect error x nnt?

    ReplyDelete
  9. @Haz Issac
    Lagi senang. Alihkan dulu kod untuk "balas komen ini" tu, kendian tambah kod untuk highlight author comment ni macam dlm tutorial ni.

    Bila dah ok, tambah la semula kod utk "balas komen ini" tu. Beres. :a

    ReplyDelete
  10. tengkiyu bro! hehe :n akhirnya berjaya :p

    ReplyDelete
  11. @Haz Issac
    Wahh! Tahniah bro..:a

    Senang jak kan..:q

    ReplyDelete
  12. da buat da ... lagi cute dari incik alfian punye . tehehe :P thx a lot !

    ReplyDelete
  13. Este pensamiento admirable tiene que justamente a propГіsito
    http://www.frgporn.com/

    scuba1

    ReplyDelete
  14. @cikmudatoxin
    Wah, lawa tauke nampak. hehe. ok bgs la tu. :)

    ReplyDelete

 

Followers

Sponsor

 
Powered by Blogger.