[Tutorial] Adjust Design Comment

Tutorial ini dijumpai untuk mengubah ruang comment saya yang teramat buruk. Bagi yang ingin menukar design ruangan comment mereka, bolehlah mencuba tutorial ini.

Tutorial ini berasal dari Catalog-Blog, tapi disebabkan ramai rakan blogger yang fobia dengan masyarakat Indonesia, ini dia saya copy-paste untuk tatapan anda dengan ayat Bahasa Malaysia beserta beberapa tambahan info.

PROPERTIES

Mula-mula jom tengok ape yang benda alah nih buat:



1- Nih tajuk biasa yang kita buat untuk komen kita. Boleh check kat belog anda.
2- Komen pelawat.
3- Komen anda. Lihat beza background komen anda dan pelawat.
4- Macam biasa: Avatar
5- Nama pengomen.
6- Nombor komen.
7- Timestamp atau tarikh komen dibuat.
8- Takde lam gambar tapi ade Embedded Comment Form Below Post. Nak activate fungsi nih, boleh rujuk di belog Jackster.

Menarik gak ciri-ciri dia kan?
Jom ke langkah seterusnya;

TUTORIAL

1- Backup template. Kang tak jadi, naya je. Kemudian, buka Layout-->Edit HTML
2- Tick Expand Widget Template
3- Cari CSS ini:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;

}

Paste-kan code ini di ATAS nya.

* {
margin: 0px;
padding: 0px;
}

4- Cari CSS Comments. Biasanya berbentuk seperti berikut:

/* Comment */

atau

/* Comment
-------------------------------------------------- */

5- Ganti seluruh code Comment tuh dengan code berikut:

/* Comments
----------------------------------------------- */

#comments { background:#fff; border: solid #cccccc 1px;/* border atau bingkai */ margin-bottom:10px; }

#comments h4 {margin:1em 10px; padding:10px; font-weight: normal;
line-height: 1.4em; text-transform:lowercase; letter-spacing:.2em;
color: #ccc;
}

#comments-block {margin:.5em 0 1em; line-height:1.6em;
padding:10px;
}
#comments-block .comment-author {display:block; width:90px;
height:110px;border:1px dotted #ccc;
margin:0; text-align:center; padding:5px 0 0; line-height:1.4em;
font-size:12px; text-transform:capitalize;
}

#comments-block .mount-author {
display:block; overflow:hidden; max-height: 16px;
text-align:center;
}

#comments-block .comment-body {
background:#fff ; border-top:3px double #ccc; margin:0;
border-right:1px dotted #ccc;border-left:1px dotted #ccc;
padding:10px 5px 0 10px;
}
#comments-block .comment-footer {
background:#fff ; border-right:1px dotted #ccc;
border-left:1px dotted #ccc;border-bottom:3px double #ccc;
margin-bottom:5px; padding:70px 5px 5px 10px; line-height: 1.4em;
text-transform:normal; font-size:10px; letter-spacing:.1em;
}

#comments-block .comment-body-author p {
background:#EFEBE0 ; border-top:3px double #ccc;
margin:0; padding:10px 5px 0 10px;
}
#comments-block .comment-footer-author {
background:#EFEBE0 ;border-bottom:1px solid #ccc;
margin-bottom:5px;padding:70px 5px 5px 10px;
line-height: 1.4em; text-transform:normal;
font-size:10px; letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0;
}
.comment-form { background:#EFEFEF; border:5px solid #cccccc;
margin:0 10px 20px 10px; padding:10px 0 0 15px; }

.deleted-comment {
font-style:italic; color:gray;
}

.numberingcomments{
margin-top:5px;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 20px; font-weight: normal;
}

Maksudnya anda perlu menggantikan seluruh code yang berwarna merah berikut:
/* Comment */
#comments-block .comment-body-author p {
background:#EFEBE0 ; border-top:3px double #ccc;
margin:0; padding:10px 5px 0 10px;
}
#comments-block .comment-footer-author {
background:#EFEBE0 ;border-bottom:1px solid #ccc;
margin-bottom:5px;padding:70px 5px 5px 10px;
line-height: 1.4em; text-transform:normal;
font-size:10px; letter-spacing:.1em;

/*Tajuk-Yang-Seterusnya*/.
Boleh difahami kan ayat nih?

6- Cari code di bawah:

<b:loop values='data:post.comments' var='comment'>

Anda akan menemui <dl id='comments-block'> di atasnya dan </dl> di bawahnya.

7- Gantikan SELURUH code yang berada di antara 2 code tadi kepada code berikut:

<dl id='comments-block'>
<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'> <div style='width: 10%; float: left;'><div class='' expr:id='data:comment.id'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<div class='mount-author'> <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></div>
<div class='commentphoto' style='margin-top:.5em;'/><span class='numberingcomments'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt></div></div>
<div style='width: 80%; float: right;'>
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<dd class='comment-footer-author'>

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

<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:if></div>

<div style='clear: both;'/>
</b:loop>
</dl>

8- Seterusnya kita akan buat script untuk photo plak. Cari code dibawah:

</head>

9- Paste code ini di ATAS code tersebut:

<script src='http://yggomelprup.googlepages.com/blogger_comment_photos.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
BloggerProfiles.noimage = 'http://lh3.ggpht.com/jaloee/SJr2PbdrTsI/AAAAAAAACYI/EnzbBOOGxBg/nopic_48.gif';
BloggerProfiles.imageWidth = 50;
BloggerProfiles.imageHeight = 60;
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>
</script>

10- Siap! Save Template dan cuba lihat sama ada berjaya atau tidak. Kalau berlaku kecacatan, boleh berhubung dengan pemilik asal tutorial ini atau hubungi Jackster merangkap Webmaster PERUBATANonline untuk bantuan 24jam.

INFO TAMBAHAN

1- Kalau anda tidak suka avatar untuk visitor yang tidak mempunyai gambar, boleh diubah dengan menukar link 'http://lh3.ggpht.com/jaloee/SJr2PbdrTsI/AAAAAAAACYI/EnzbBOOGxBg/nopic_48.gif' di atas dengan link gambar anda sendiri.

KELEMAHAN

1- Sesetengah template takleh gune tutorial ini dengan betul. Ade je kecacatan berlaku pada rupa belog anda. Sori la ye. Belog anda jeles bile anda cuba adjust HTML beliau atau belog anda merupakan belog anti-Indonesia.

2- Script untuk photo tuh kekadang amat berat untuk loading maka boleh diabaikan kalau rase tanak gune.

UPDATE

30 Oktober 2008: Mengubah ayat bagi penerangan nombor 5