Comment ေတြကို နံပါတ္စဥ္ ထိုးရေအာင္

နံပါတ္ တပ္တယ္ ဆိုတဲ့ အလုပ္ဟာ သိပ္ အေရးမပါဘူးလို႔ ထင္ရေပမယ့္ တကယ္တမ္း က်ေတာ့ စတုိင္က်ဖို႔နဲ႔ အျမင္ရွင္းဖုိ႔ အတြက္ေတာ့ သိပ္အေရးပါ ပါတယ္။ ကြန္းမန္႔တိုင္းရဲ႕ အေပၚနားမွာ နံပါတ္စဥ္ တပ္ထားမယ္ ဆိုရင္ ၫႊန္းရတာလည္း လြယ္ကူသြားမယ္။ အဲဒီ နံပါတ္ ဘယ္လို တပ္မလဲ ဆိုတာကို အခု က်ေနာ္ ဒီပို႔စ္မွာ ေဆြးေႏြးပါ႔မယ္။ တကယ္လို႔ စာဖတ္သူဟာ Blogger ရဲ႕ နဂို ရွိရင္းစြဲ Commenting Service မဟုတ္ဘဲ တျခား Service တစ္ခုခု (ဥပမာ Haloscan, Instense Debate, etc ...) ကို သံုးထားမယ္ ဆိုရင္ေတာ့ ဒီပို႔စ္ဟာ အလုပ္မျဖစ္ႏိုင္ပါဘူး။ ဒါေၾကာင့္မို႔ ဒီပို႔စ္ပါ ေလ့က်င့္ခန္းဟာ Blogger Commenting Service သံုးထားတဲ့ သူေတြ အတြက္သာပဲ အသံုးတည့္ပါလိမ့္မယ္။ ကဲ ... က်ေနာ္တို႔ ေလ့က်င့္ခန္း စဖို႔ Layout >> Edit HTML ကို ဖြင့္ၿပီး Expand Widget Templates ကို အမွန္ျခစ္ ျခစ္ေပးပါဗ်ာ။

အဆင့္ (၁) စတိုင္ သက္မွတ္ျခင္း
<br />.numberingcomments{<br />float: right;<br />display: block;<br />width: 50px;<br />margin-right: 5px;<br />margin-top: -25px; /*comments-counter position*/<br />text-align: right;<br />font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;<br />font-size: 30px;<br />font-weight: normal;<br />}<br /><br />/*since the numbers are actually links, we need to force the color properties*/<br /><br />.numberingcomments a:link, .numberingcomments a:visited {<br />color: #445566 !important; text-decoration: none !important;<br />}<br />.numberingcomments a:hover, .numberingcomments a:active {<br />color: #FF9933 !important; text-decoration: none !important;<br />}

အထက္ CSS ေတြကို Style Sheet မွာ သြားထည့္ေပးပါ။ <b:skin><![CDATA[ နဲ႔ ]]></b:skin> ၾကားကို Style Sheet လုိ႔ ေခၚပါတယ္။ သူတို႔ရဲ႕ ၾကား တစ္ေနရာရာမွာ အထက္က CSS ကို ထည့္ေပးပါ။

အဆင့္ (၂) Widget တြင္ ျပင္ဆင္ ျဖည့္စြပ္ျခင္း

<b:includable id='comments' var='post'> ကို ရွာေပးပါ။ သူနဲ႔ မနီးမေ၀းမွာ <dl id='comments-block'> နဲ႔ စတဲ့ စာပိုဒ္ ရွိပါတယ္။ အဲဒီ စာပိုဒ္ထဲမွာ ေအာက္မွာ ျပထားတဲ့ ေနရာေတြမွာ အနီေရာင္နဲ႔ Code ေတြကို ထည့္ေပးပါ။

<dl id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

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

<div class='' expr:id='data:comment.id'>

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

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

<dd class='comment-body'>
.......
</dd>

</div>

</b:loop>
</dl>

ဟုတ္ကဲ့။ ၿပီးၿပီ ဆိုရင္ေတာ့ Template ကို Save လုပ္လိုက္ပါ။ က်ေနာ္တို႔ လိုခ်င္တာ လုပ္လို႔ ၿပီးပါၿပီ။ တစ္ခ်က္ေလာက္ ဘေလာ့ဂ္ကို ေခၚၾကည့္ပါဦး။ အဆင္ေျပပါေစဗ်ာ။