14 September 2008

[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

11 penghinaan diterima:

lochoe on September 14, 2008 at 2:02 AM said...

"Sila menghina dengan tatabahasa yang betul dan gayabahasa yang lembut dan menyenangkan hati semua pihak."

haah... bagusnya, puitis betul ayat untuk komen.. tuh.. ni rasa mcm nak clone.. tapi2.. mesti ada copyright kan..xpe.. aku pk ayat lain.. good idea.. huhuh

Jackster® on September 14, 2008 at 6:01 AM said...

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

haha aku x ejas pape pn da xle gune, tande2 awal kot haha

btw lochoe.. x sngke lak jmpe snior shams aku kat sini hoho

syazana said...

salam~
xtaw la blh gune ke tak.
tapi tak jumpe sesetengah code..
pelik jgk~hmm..
ke mmg ade yg x same ek?

HafizAdam on September 15, 2008 at 12:13 AM said...

code yg manekah itu..
sume code insyaAllah dijumpai, x tick Expand Widget Template kot..
huhu

shairah on September 17, 2008 at 3:24 AM said...

aha..mmg nmpk lagi kemas la cmnih

imtiaz sofea on September 17, 2008 at 7:15 AM said...

nak test ni...tak jadi akanku bom blog ni..:p

gurau2x ^-^

shairah on September 17, 2008 at 1:07 PM said...

saudara hafizadam,nk tnye..comment ku yg dipublished kt blogku spatotnye dihighlight (mcm comment saudara hafizadam kt sini) dan akn kuar avatarku scara otomatik..tpi ku tengok komenku yg dh dipublished tak sedemikian rupa la..same jeh ngan komen2 oang len...nape jadi begitu eh?

p/s: jackster,anda kenal kak yana x?

Jackster® on September 17, 2008 at 1:59 PM said...

Disebabkan HafizAdam yg kesibukan menguruskan hal pertunangan beliau di Malaysia, aku tlg jawab la utk die...

sekiranya digunakan skrip yg di atas..
cari mende kat bwah ni, pastikan ade..

ni kat css

#comments-block .comment-body-author p {
background:#EFEBE0 ; border-top:3px double #ccc;
margin:0; padding:10px 5px 0 10px;
}


ni kat html

<div class='commentphoto' style='margin-top:.5em;'/>


sekiranya menggunakan skrip laen, sepatutnye lebih kurang je css n html code die.. so pndai2 la cari.. kalo xde bolehlah tambah mengikut kesesuaian..

sekian

*p/s: x sure, maybe knal.. awat?

akma said...

css tu ape?
html tu ape?
"5- Ganti seluruh mende dalam tuh dengan code berikut:"
ape mksud "mende tuh"?
xpaham..

HafizAdam on October 30, 2008 at 4:39 PM said...

Akma:
Post updated. Saya baru sedar bahawa ayat tersebut bengap sikit.
Thanx atas hinaan itu.

Faiz~ on December 7, 2008 at 6:46 PM said...

payah betol nak buat semua ni...
pening pale aku ni...

 

License

This blog by Muhammad Hafiz Adam is official website of Creative Designer and licensed under a Creative Commons Attribution-Noncommercial 2.5 Malaysia License.

You're free to Share (copying, distributing and transmitting) and to Remix (adapting the work) under the following conditions:
a) Attribution;
You must attribute the work by linking back to this blog pr anything similar (but not in any way that suggests that I endorse you or your use of the work).
b) Noncommercial;
You may not use this work for commercial purposes.

Categories

~AkuDarahAnakMalaysia~ Copyright © 2009 Community is Designed by Bie Blogger Template