Highlight Blog Owners/Authors Comments In BlogSpot Blogs

If you want to display your own comments, with a different background or text color or in any other customized way, then here's a simple hack for doing that.
After doing the coding work, all the comments made by you on your blog will get highlighted.

To do this;
Log in to Blogger, go to Layout -> Click on "Edit HTML" tab.
Then click on "Expand Template Widgets"

Now search for this line:

</head>

Immediately above this, add these lines:

<!--Blog-Owners-Comment-STARTS-->
<style>
.comment-body-author {
background: #F5EDE3; /* Background color*/
color: #000000; /* Text color*/
border-top:2px solid #002F66;border-bottom:1.2px dotted #002F66 ;border-left:1.2px dotted #002F66;border-right:2px solid #002F66;
line-height: 2.4em;
margin:0;
padding:0 0 0 20px; /* Posotion*/
}
</style>
<!--Blog-Owners-Comments-STOPS-->

The code in red are just comments, accordingly you can change the BLUE values. You can even use pictures as background images for your comments, for adding an image as background use this code:

background: url(http://DIRECT_LINK_OF_THE_IMAGE.jpg) ;


Border has two attributes one thickness ( in above example its 1.2 px u can change accordingly), another is border line ( in above example its solid u can change it to dotted accordingly). Line-hieght is width , increasing this can increase it width . Margin and padding define the position of comment withing comment box.

Now once this is done, see the code below:

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

The code in RED is what you have to add.

Now save the template and tell everybody that you are the Admin of the blog :)

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Google Facebook Twitter More

• Digg
• Linkedin
• Stumbleupon
• Delicious
• Tumblr
• BufferApp
• Pocket
• Evernote

Related Posts

• TinyPic Is Down Forever - Code 010394*UPDATE: The problem has been solved. See the bottom of this post for Tinypic's explanation on the issue. Now the image
• How To Redirect Old Blogger Posts To New Posts (SEO Friendly Way) This is definitely one of the best SEO solutions that Blogger has given to its blogs. You can now redirect your old
• Add A Free Forum To Your Blogger/BlogSpot BlogI strongly recommend all the readers to bookmark this post. A forum is a must for every blog with increasing readership
• New Lines Error In Blogger Post-EditorA quick update on an error reported by many Bloggers in the Blogger post-editor: In the recently updated Blogger post-