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");
}

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

အျပည့္အစံုသုိ႔>>>

ျပန္ေခါက္ခဲ့လုိလွ်င္>>>

Embedding Comment Box Form

Embedding Comment Box Form ကုိ အသံုးျပဳျခင္းျဖင့္ မိမိေရးသားထားေသာ Posts မ်ားကုိ လာေရာက္ ဖတ္ရႈၾကေသာ ခ်စ္မိတ္ေဆြတုိ႔ရဲ႕ေရးသားေပးခဲ့ၾကေသာ comments ေတြ တြဲလ်က္ page တစ္ခုတည္းအတြင္း ေဖာ္ျပေပးႏုိင္ပါတယ္။ comments မ်ားကုိလည္း အလြယ္တကူ ေရးသားႏုိင္ၾကမွာျဖစ္ပါတယ္။ တစ္ခ်ိဳ႕ေတြ ျပဳျပင္ၿပီးသလုိ တစ္ခ်ိဳ႕ေတြလဲ ဒီ Feature ေလးကုိ အသံုးမျပဳၾကရေသးပါဘူး။ အသံုးျပဳခ်င္ရင္ေတာ့-

(၁)Dashboard ကုိသြားပါ။
Setting==>Comments ကုိ ေရြးႏွိပ္ၿပီး၀င္လုိက္ပါ။
Comment Form Placement မွ ေရြးခ်ယ္အသံုးျပဳရန္ ၃မ်ိဳးရွိေနပါတယ္။
Embedded below post ကုိ ေရြးခ်ယ္ၿပီး SAVE SETTINGS ႏွိပ္ၿပီး save လုိက္ပါ။


ဒီအဆင့္(၁)ေလာက္နဲ႔တင္ အဆင္ေျပႏုိင္ပါတယ္။ အဆင္မေျပေသးရင္ေတာ့ ေအာက္ပါ အဆင့္(၂)အတုိင္း ေဆာင္ရြက္ၾကည့္ပါ-

(၂) Layout==>Edit HTML ကုိသြားပါ။
Download Full Template ကုိႏွိပ္ၿပီး Template Backup လုပ္ထားေပးပါ။
Expand Widget Templates ရဲ႕ check box ကုိ mouse နဲ႔ တစ္ခ်က္ ႏွိပ္လုိက္ပါ။ ဒါမွ အျပည့္အစံုရွာႏုိင္ ေဖြႏုိင္မွာျဖစ္ပါတယ္။ ၿပီးရင္ Find box (ctrl+f ႏိွပ္၍)တြင္ <p class='comment-footer'> ထည့္ၿပီး ရွာလုိက္ပါ။ ေတြ႕ေအာင္ေတာ့ရွာရမွာပါ။ ၄င္းႏွင့္အတူ ေအာက္ေဖာ္ျပပါ code တုိ႔ကုိေတြ႕ရမွာပါ-

<p class='comment-footer'>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</b:if>
</p>

ရွာလုိ႔ေတြ႕ၿပီဆုိရင္ေတာ့ ေအာက္ေဖာ္ျပပါ code တုိ႔ကုိ copy ကူးၿပီး အစားထုိးေပးလုိက္ပါ။

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/> <b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</b:if> </b:if>
</p>

ဒီေလာက္ပါပဲ ၿပီးရင္ေတာ့ SAVE TEMPLATE ကုိ ႏွိပ္ၿပီး save လုိက္ပါ။

အဆင္ေျပပါေစ။

အျပည့္အစံုသုိ႔>>>

ျပန္ေခါက္ခဲ့လုိလွ်င္>>>

Text Border Style

မိမိ Post အတြင္း စာသားတစ္ခ်ိဳ႕၊ စာတစ္ေၾကာင္း၊ စာတစ္ပုိဒ္ စသျဖင့္ စာသားမ်ား ေဘာင္ခတ္ေပးျခင္း အားျဖင့္ စာဖတ္သူကုိ သိသာ ထင္ရွားေစခ်င္ရင္ သံုးတတ္ၾကတဲ့ style တစ္ခုပါ-

Style(1)

<div style="border-style:solid">---Text----</div>

၄င္းနမူနာပံုစံ

This will have a solid border.

Style(2)

<div style="width:230px; border-style:solid">---Text----</div>

၄င္းနမူနာပံုစံ

This will have a solid border.

Style(3)

<div style="width:240px; border-style:double">---Text---</div>

၄င္းနမူနာပံုစံ

This will have a double border.

Style(4)

<div style="border-width:thin; border-style:solid">---Text---</div>

၄င္းနမူနာပံုစံ

This will have a thin, solid border.

Style(5)

<div style="border-width:12px; border-style:solid">---Text---</div>

၄င္းနမူနာပံုစံ

This will have a 12 pixel solid border.

Style(6)

<div style="border-color:red; border-style:solid">---Text---</div>

၄င္းနမူနာပံုစံ

This will have a red, solid border.

Style(7)

<div style="margin-left:50px; border-style:double">---Text---</div>

၄င္းနမူနာပံုစံ

This has a left margin of 50 pixels.

Style(8)

<div style="margin-right:100px; border-style:double">---Text---</div>

၄င္းနမူနာပံုစံ

This has a right margin of 100 pixels. Yes, it is pretty neat to have a right margin, isn't it?

Style(9)

<div style="padding-left:50px; border-style:double">---Text---</div>

၄င္းနမူနာပံုစံ

This has a left padding of 50 pixels.

Style(10)

<div style="border-style:double;background-color: rgb(0, 255, 255);"><p><blockquote>---Text-----</blockquote></p></div>

၄င္းနမူနာပံုစံ

This has a left blockquote text style.This has a left blockquote text style. This has a left blockquote text style. This has a left blockquote text style. This has a left blockquote text style. This has a left blockquote text style.

Possible Values မ်ားကုိေတာ့ မိမိစိတ္ႀကိဳက္အဆင္ေျပသလုိ ေျပာင္လဲသံုးစြဲႏုိင္ပါတယ္။
Color Value အတြက္LinK

အဆင္ေျပပါေစ။

အျပည့္အစံုသုိ႔>>>

ျပန္ေခါက္ခဲ့လုိလွ်င္>>>