Author Comments Different Styles

Emhedding Comment Box Style သံုးသူမ်ားအတြက္ ျဖစ္ပါတယ္။ မိမိပုိ႔စ္ေတြကုိ လာေရာက္ ဖတ္ရႈၾကတဲ့ စာဖတ္သူမိတ္ေဆြမ်ားက ေရးခဲ့ၾကတဲ့ comments ေတြကုိ မိမိမွျပန္လည္တံု႔ျပန္ ေရးသားသည့္အခါမွာ ေသသပ္လွပၿပီး အျမင္တစ္မ်ိဳး ဆန္းေစ ခ်င္ရင္ေတာ့ ေအာက္ပါအတုိင္း ျပဳျပင္ၾကည့္ပါ-
(၁)အရင္ဆံုး Dashbosrd ကုိသြားပါ။ Setting==>Comments ခလုတ္တုိ႔ကုိ ႏွိပ္ၿပီး ၀င္လုိက္ပါ။ comment မွာ Show ေရြးထားပါ။ (နမူနာၾကည့္ရန္)
(၂)ၿပီးရင္ေတာ့ထံုစံအတုိင္း Template==>Edit HTML ကုိသြားပါ။ backup လုပ္ထားရန္အတြက္ Download Full Template ကုိႏွိပ္ၿပီး backup လုပ္ထားလုိက္ပါ။ ၿပီးရင္ Expand Widget Templates ရဲ႕ Check-box ေလးကုိ ႏွိပ္လုိက္ပါ။ Expand Widger Templates ကုိေရြးခ်ယ္းထားခ့ဲမွ မိမိရဲ႕ Templates ကုိ ျပည့္ျပည့္စံုစုံျမင္ေတြ႕ႏုိင္၊ ရွာေဖြႏုိင္မွာျဖစ္ပါတယ္။
(၃) Ctrl+F ကုိ ႏွိပ္ၿပီး Find box ကုိရယူလုိက္ပါ။ ၄င္း Find box ထဲတြင္ <dl id='comments-block'> သုိ႔မဟုတ္ comments-block ဆုိတဲ့ စာသားရုိက္ထည့္ ၿပီးEnter ႏွိပ္၍ ရွာလုိက္ပါ။ Edit HTML box တြင္ ၄င္း comments-block ကုိ hight light ျဖင့္ ျပေပးေနပါလိမ့္မယ္။ ၄င္းႏွင့္ တစ္စပ္တည္း ေအာက္ေဖာ္ျပပါ code တုိ႔ကုိ ေတြ႕ရမွာျဖစ္ပါတယ္။ ေတြ႔ေအာင္ေတာ့ရွာဖုိ႔ လုိပါလိမ့္မယ္။ အနီေရာင္ျဖင့္ က်ေနာ္ျပထားတဲ့ code တုိ႔ေတာ့ ေတြ႕ရမွာမဟုတ္ပါဘူး။ ဒါေၾကာင့္ အနီေရာင္ျဖင့္ျပထားတဲ့ code တုိ႔ကုိ copy လုပ္ၿပီး မိမိဆီမွာ အစားထုိးထည့္ ေပးလုိက္ပါ-

<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>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<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>

(၄)အခုခါေတာ့ စာေရးသူရဲ႕ တံု႕ျပန္ ေရးသားမဲ့ Comment Styles ကုိျပဳျပင္ ေပးရမွာ ျဖစ္ပါတယ္။ Find box ထဲတြင္ comment-body ဆုိတဲ့ စာသား ရုိက္ထည့္ၿပီး Enter ႏွိပ္၍ ရွာလုိက္ပါ။ hight light ျဖင့္ ေဖာ္ျပေပး ေနပါလိမ့္မယ္။ မိမိအသံုးျပဳထားတဲ့ Template အမ်ိဳးအစားအေပၚ မူတည္ၿပီး ကြဲျပားမႈ ရွိေနတတ္ပါတယ္။ Minima Template နဲ႕ Rounders Template (၂)မ်ိဳး ေဖာ္ျပေပးလုိက္ပါတယ္။

Minima Template တြင္ေတြ႕ရမဲ့ code ပါ-

#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}

Rounders Template တြင္ေတြ႕ရမဲ့ code ပါ-

.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}

ေအာက္ေဖာ္ျပပါအတုိင္း အနီေရာင္ျဖင့္ ထည့္သြင္းေဖာ္ျပထားေသာ code ကုိ Copy ကူးယူၿပီး မိမိ Template တြင္ ထည့္သြင္းေပးရပါမယ္။

Minima Template အတြက္

#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.blog-author-comment {
margin:.25em 0 0;
}
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border:1px dotted #254117;
font-size:100%; color:#F6358A;
font-family: 'Zawgyi-One', courier;
background:#C3FDB8;
}

(နမူနာပံု)

Rounders Template အတြက္

.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}
.blog-author-comment {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.blog-author-comment p {
margin:0 0 .5em;
padding:0 0 0 20px;
color:#F6358A;
font-style: italic;
}

(နမူနာပံု)

margin, padding, color, font-style တုိ႔ ၏ value မ်ားကုိ မိမိစိတ္ႀကိဳက္ျပင္ဆင္ အသံုးျပဳႏုိင္ပါတယ္။
ဥပမာ-

.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
font-size:100%;
color: #F6358A;
font-family: Zawgyi-One, courier;
background: url("URL OF IMAGE");
}

အဆင္ေျပစြာျဖင့္ အသံုးတည့္ႏုိင္ၾကပါေစ