Peekaboo Comments ေလးမ်ား လုပ္ၾကမယ္...

အားလုံးပဲ မဂၤလာပါခင္ဗ်ာ.

ဒီတစ္ခါလက္ဆင္႔ကမ္းေျပာျပခ်င္တာကေတာ႔ Peekaboo Comments ေလးေတြ အေၾကာင္းပါ. ဒီအေၾကာင္းကို ေရးမယ္လုိ႔ အားခဲထားခဲ႔တာ ၾကာပါျပီ. အခုမွပဲ ေရးျဖစ္ေတာ႔တယ္ဗ်ာ.

Peekaboo Comments ဆုိတာ ဘာလဲလုိ႔ သိခ်င္ေနသူမ်ား ကၽြန္ေတာ္႔ဘေလာ႔ဂ္ပုိ႔စ္ေတြထဲက ေကာ္မန္႔ရွိတဲ႔ပုိ႔စ္တစ္ခုခုကို သြားၾကည္႔ျပီး ေကာ္မန္႔ကို Click ေခါက္ၾကည္႔လုိက္ပါ. (Friendly Neighbors လုိ႔ ကၽြန္ေတာ္က နာမည္တစ္မ်ဳိးေပးထားတယ္ဗ်).

ကဲ. ဘာသတိထားမိလဲ.

ေတြ႔ျပီေနာ္.

ပုံမွန္အရဆုိရင္ Comments ဆုိတာကုိ Click ေခါက္လုိက္ရင္ ေနာက္ထပ္ စာမ်က္ႏွာ အသစ္တစ္ခု ပြင္႔လာပါတယ္. အဲဒီ႔မွာပဲ ကၽြန္ေတာ္တုိ႔က Comments ေရးတာတုိ႔၊ ဖတ္တာတုိ႔ကုိ လုပ္ရပါတယ္.

Peekaboo Comments က်ေတာ႔ သူ႔ကို click ေခါက္လုိက္တာနဲ႔ ေရးထားတဲ႔ comments ေလးေတြကုိ same page မွာပဲ ဖတ္လုိ႔ရႏုိင္သလုိ ေရးလုိ႔လည္း ရပါတယ္. အခ်ိန္ကုန္သက္သာသလုိ ေကာ္နက္ရွင္လည္း ျမန္ဆန္သြက္လက္လာေစပါတယ္.

ကဲ. ဒါကုိ ဘယ္လုိလုပ္ရမလဲဆုိေတာ႔ ဒီလုိလုပ္ပါခင္ဗ်ာ.

အဆင္႔ (၈) ဆင္႔နဲ႔ ခြဲျပီး ေျပာျပသြားပါမယ္. တစ္ဆင္႔ခ်င္းကုိ ေသခ်ာဖတ္ျပီး လုပ္ရင္ ၁၅ မိနစ္နဲ႔ ဒီကိစၥ ေအာင္ျမင္ျပီးစီးပါလိမ္႔မယ္. စိတ္ေလာျပီး ဟုိေက်ာ္ဒီေက်ာ္ဖတ္ရင္ေတာ႔ Error ၾကီးနဲ႔ တုိးသြားမွာ ျဖစ္ပါေၾကာင္း….

(၁) မိမိဘေလာ႔ဂ္ထဲကေန Settings> Edit HTML ကိုသြားပါမယ္. Template ကုိ Backup လုပ္ရပါမယ္. ဒါမွ မေတာ္လုိ႔ မွားသြားရင္ အရင္ Template ကုိ restore ျပန္လုပ္လုိ႔ရမွာ ျဖစ္ပါတယ္. ဒီတုိင္း Backup လုပ္ခ်င္ရင္လုပ္. မဟုတ္ရင္ေတာ႔ Template တစ္ခုလုံးကုိ ကူးျပီး Ms Word ထဲမွာ Save လုပ္ထားလုိက္ပါ. အဓိကက Template ကုိ မျပင္ခင္ ကုိယ္႔မွာ Hard Copy ရွိေနဖုိ႔ပါပဲ.

(၂) Expand Widgets Box ေသးေသးေလးကုိ Tick လုပ္ေပးခဲ႔ရပါမယ္. ဒါဟာလည္း သိပ္အေရးၾကီးပါတယ္. Template ျပင္တဲ႔အခါမွာ တစ္ခ်ိဳ႔ Code ေလးေတြ ရွာမေတြ႔ဘူးလုိ႔ ခဏခဏ ေျပာတတ္ၾကပါတယ္. အဲဒါဟာ Expand Widgets ဆုိတဲ႔ Box ေလးကို Tick မလုပ္ခဲ႔တဲ႔ ျပႆနာေၾကာင္႔ပါပဲ.

(၃) </head> ဆုိတဲ႔ Tag ေလးမဆုံးခင္မွာ ဒီ Coding ေလးေတြကုိ ထည္႔ေပးလုိက္ပါ

<script type='text/javascript'>
//<![CDATA[
var comment_form_template = '<div class="commentelem" style="clear:both">\n'
+ '<div style="float:left;margin-right:5px;clear:both;" id="commentphoto[[CID]]"></div>'
+ '<div class="comment-poster">[[AUTHOR]]</div>\n'
+ '<div class="comment-body"><div class="innerCmntBody">[[BODY]]</div></div>\n'
+ '<div class="comment-timestamp"><a href="[[PERMALINK]]" title="comment permalink">[[DATE]]</a></div></div>\n';
//]]>
</script>
<script src='http://jscripts.ning.com/get.php?xn_auth=no&amp;id=2941927' type='text/javascript'/>

(၄) ဒီ စာေၾကာင္းေလးေတြကုိ လုိက္ရွာပါ

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>

ေတြ႔ရင္ ဒုတိယလုိင္းကုိ ဒီလုိေလး အစားသြင္းေပးလုိက္ပါ.

<div class='comments' expr:id='"comments" + data:post.id'>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
document.getElementById('comments<data:post.id/>').style.display = 'none';
</script>
</b:if>

(၅) ခုနက စာေၾကာင္းေလးေတြရဲ႔ ေအာက္ဖက္နားေလးမွာပဲ <dl id='comments-block'> ဆိုတာေလး ရွိပါတယ္. အဲဒါေလးကုိ ေတြ႔ေအာင္ရွာျပီးရင္ အဲဒီ႔စာေၾကာင္းေလး မတုိင္ခင္မွာ ဒါေလးကို ထည္႔ေပးလုိက္ပါ.

<div expr:id='"commentsul" + data:post.id'> </div>

(၆) ဒီထိရပါေသးတယ္ေနာ္. ျပီးခါနီးပါျပီ. ဒီတစ္ခါေတာ႔ ဒီစာေၾကာင္းေလးေတြကုိ ရွာပါခင္ဗ်ာ.

<b:includable id='main' var='top'>
<!-- posts -->

ေတြ႔ရင္ ဆက္ဖတ္ၾကည္႔ပါ. ဒီလုိမ်ိဳး Coding ေလးေတြ ေရးထားတာ ေတြ႔ရပါလိမ္႔မယ္.

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>

အဲဒါကုိ ေတြ႔ေအာင္ရွာျပီးရင္ ဒီလုိျပန္အစားသြင္းေပးလုိက္ပါ.


<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>

(၇) ေနာက္ဆုံးအဆင္႔ပါ.

ဒီ စာေၾကာင္းေလးကို ရွာပါခင္ဗ်ာ.

<b:includable id='post' var='post'>

ျပီးရင္ သူ႔ေအာက္နားေလးကို ဆက္ဖတ္ပါ. ဒါေလးေတြကိုေတြ႔တဲ႔ အထိေပါ႔

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>

ေတြ႔ျပီေနာ္.

အုိေက.

အဲဒီ႔တစ္ပုိဒ္လုံးကုိ ဒီလုိ ျပန္အစားသြင္းေပးရပါမယ္.

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<b:loop values='data:post.feedLinks' var='f'>
<a class="comments" rel="comments" expr:href='data:post.url + "#comments"' expr:onclick='"peekaboo_comments_display(&quot;" + data:f.url + "&quot;,&quot;commentsul" + data:post.id + "&quot;,&quot;&quot;,&quot;" + data:post.url + "#comments&quot;,&quot;max comments&quot;);toggleitem(&quot;comments" + data:post.id + "&quot;);return false;"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:loop>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.url + "#comments"' expr:onclick='"toggleitem(&quot;comments" + data:post.id + "&quot;);return false;"'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>

Max comments ဆုိျပီး အနီေရာင္ေလးနဲ႔ ေရးထားတဲ႔ ေနရာမွာ ကုိယ္ၾကိဳက္သလုိ Edit လုပ္လုိ႔ရပါတယ္. ဥပမာ. ေကာ္မန္႔ေတြကုိ အမ်ားဆုံး (၅) ခုပဲ ေပၚေစခ်င္ရင္ 5 လု႔ိရုိက္ထည္႔ေပးရမွာပါ. အဲလုိမဟုတ္ဘဲ ရွိသမွ်၊ ေရးေပးထားသမွ် ေကာ္မန္႔ေတြ ေပၚေစခ်င္ရင္ေတာ႔ max comments ေနရာမွာ false လုိ႔ ရုိက္ေပးပါခင္ဗ်ာ.

(၈) Template ကုိ Save လုပ္လုိ႔ရပါျပီ.

Enjoy!!!!


Acknowledgement:

ဒီေနရာက ပုိ႔စ္ေလးကုိ သင္႔ေတာ္သလုိ ဘာသာျပန္ဆုိ ေရးသားပါတယ္…

Peekaboo ႏွင္႔ပတ္သက္ျပီး ေရးခဲ႔သမွ်ပုိ႔စ္မ်ား

(၁) Peekaboo ပုိ႔႔စ္ေခါက္ျခင္း
(၂) Peekaboo Sidebar လုပ္ျခင္း
(၃) Peekaboo Navigation Bar လုပ္ျခင္း

အားလုံးကုိ ခ်စ္ခင္ေလးစားလ်က္

ရန္ေအာင္