d-Nyonri.....Blog`s

This trick is to give a Highlight Author Comment . This will make the
blog's owner comments looks different from the visitors comments. It's
very usefull and interesting blogger hack tips. You can see the
example in my blog. Here is what to do to make a "Highlight Author
Comment" effect in Blogspot.

1. Login to blogger, then choose "Layout --> Edit HTML". Don't forget
to backup your template first.
2. Check the "Expand Widget Templates" box.
3. Copy this script and put it before ]]></b:skin> or copy to your CSS area.
.comment-body-author {
background: #E6E6E6; /* Background color*/
color: #000; /* Text color*/
border-top: 1px dotted #223344;border-bottom: 1px dotted
#223344;border-left: 1px dotted #223344;border-right: 1px dotted
#223344;
margin:0;
padding:0 0 0 20px; /* Posotion*/
}

4. Then find this code:
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<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>
said...
</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='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

5. The red color text is the code that you have to add to your script.
The position must be right.
6. And then save your template.

* You have to login into your blogger account before to give comments.

If you bored with your blog face, may be you can use this trick to
make your blog more beautiful. This trick will explain "how to change
posting date to become a calender icon" like as you see in my blog. If
you interest c'mon let's do it now.
The first thing you have to do is change your "date header format" to
become mm.dd.yyyy (1.24.2008). How to do this? go to your blogger
account, then chose "Setting --> Formatting, change "date header
format" to become what I said before (mm.dd.yyyy) then save your
setting.

Next step is go to tabs "Template --> Edit HTML". Don't forget to
backup your template first. Click on a "Expand Widget Templates" check
box. OK lets go to the deep trick.

1. Find this code <TITLE><data:blog.pageTitle/></TITLE> in your HTML.
If you found it, put the code below under it.

<SCRIPT type='text/javascript'>
//<![CDATA[
/*********************************/
/* http://trick-blog.blogspot.com */
/*********************************/
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div
class='day'>"+day+"</div>");
}
//]]>
</SCRIPT

2. Then Find this code:

.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}

if you can't found it try to find this:

h2.date-header {
margin:1.5em 0 .5em;
}

3. OK, you have found it? next step is put the below code under it.

.dateblock {
background: url("http://blogoholic.info/files/kalender/bluecalend.gif")
no-repeat;
width: 50px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;

}

Code http://blogoholic.info/files/kalender/bluecalend.gif is the place
for calender icon, you can change it with your own image or use my
image below. what to do is change the bold text with the pictures code
below, for example, if you want to change it with red icon calender,
just change bluecalend.gif with redcalend.gif.
here is the icon images:

blackcalend.gif blue2calend.gif bluecalend.gif

greencalend.gif orangecalend.gif pinkcalend.gif

redcalend.gif ungucalend.gif yellowcalend.gif

4. Next step is find this code <data:post.dateHeader/>. The easy way
to find it is by copying the code the press Ctrl-f then paste to the
shown box, you will found the code immediately. If you didn't anything
you can find it manually. OK, If you found it change the code with the
below script.

<DIV class='dateblock'> <SCRIPT>
date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>

5. Save your editting, and see the result, is it working?

if the month and date upper, you can add this code padding: 4px 0px
0px 0px; under this code .month { and this .day {

Good Luck ............

Source http://trick-blog.blogspot.com/