30 July, 2008

Peekaboo ပို႔စ္ ေခါက္ျခင္း

မိမိ ဘေလာ့ဂ္တြင္ တင္ထားေသာ ပို႔စ္မ်ား အလြန္တရာ ရွည္ေနေသာအခါ ေနာက္ပို႔စ္တစ္ခုကို ေက်ာ္ၾကည့္သူမ်ား အဖုိ႔ အခက္အခဲ ၾကံဳေတြ႕ၾကရသည္။ ထုိ႔ေၾကာင့္ ပို႔စ္ကို မိမိလိုအပ္ေသာ ပမာဏသာ ေဖာ္ျပၿပီး ဆက္လက္ ဖတ္႐ႈလုိသူမ်ား ကလစ္ႏွိပ္၍ ဆက္လက္ဖတ္႐ႈေစရန္ ျပဳလုပ္ထားႏိုင္သည္။
ပို႔စ္ေခါက္နည္းမွာ ႏွစ္မ်ဳိးႏွစ္စားရွိ၍ မိမိသက္မွတ္ထားေသာ စာလံုးကို ကလစ္ႏွိပ္လိုက္လွ်င္
(၁) သီးျခား တစ္ပို႔စ္တည္းသာ ေဖာ္ျပျခင္း ႏွင့္
(၂) လက္ရွိ စာမ်က္ႏွာတြင္ ခ်ဲ႕၍ ေဖာ္ျပျခင္း တို႔ျဖစ္သည္။

ပထမ အမ်ဳိးအစားမွာ ဘေလာ့ဂ္ကို (Refresh) ျပန္တင္သည္။ ထုိအမ်ဳိးအစား၏ အားနည္းခ်က္မွာ ေကာ္နက္ရွင္ ေႏွးေသာ ကၽြန္ေတာ္တို႔လို ႏိုင္ငံအတြက္ စာတစ္မ်က္ႏွာ ျပန္တင္မည္ဆိုလွ်င္ အေတာ္ေလး ေစာင့္ဆိုင္းရေသာေၾကာင့္ ျပန္ျပန္တင္ေနလွ်င္ ေစာင့္ေနရသည္ႏွင့္ပင္ အခ်ိန္ကုန္သြားမည္။ ေနာက္တစ္မ်ဳိးမွာ ဘေလာ့ဂ္စတက္ကတည္းက စာအျပည့္အစံုကို တင္ထားၿပီး ေခါက္၍ မျပျခင္းသာ ျဖစ္သည္။ ဒုတိယ အမ်ဳိးအစားကို လူႀကိဳက္ပိုမ်ားသည္။ ႏွစ္မ်ဳိးစလံုးမွာ တတိယ အဆင့္၌သာ ထည့္သြင္းေသာ Code အနည္းအက်ဥ္းကြာျခားသည္။

အဆင့္ (၁) မူရင္း Javascript အား Upload လုပ္ျခင္း

ထုိ http://h1.ripway.com/phyoekyaw/myhacko.js ဖုိင္ကို ကလစ္ႏွိပ္ ဆြဲခ်၍ မိမိႀကိဳက္ႏွစ္သက္ရာ File Hosting Site တြင္ Upload ျပဳလုပ္ပါ။

အဆင့္ (၂) ထို JS အား ေၾကျငာျခင္း

ေအာက္ပါ Code အား </head> မတိုင္ခင္တြင္ ထည့္သြင္းေပးပါ။

< script src='http://h1.ripway.com/phyoekyaw/myhacko.js' type='text/javascript'></script>

http://h1.ripway.com/phyoekyaw/myhacko.js ေနရာတြင္ မိမိ တင္ထားေသာ ဖိုင္လိပ္စာ ထည့္ေပးပါ။

အဆင့္ (၃) Blog1 Widget တြင္ Code ထည့္ျခင္း

Template Html တြင္ <data:post.body/> ကို ရွာေပးပါ။ ပံုမွန္အားျဖင့္ ဤသုိ႔ ရွိေနႏိုင္ပါသည္။

<div class='post-body>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

သို႔ေသာ္ div class='post-body' ေနရာတြင္ တခါတရံ၌
div class='post'
div class='entry'
div class='post-body entry-content' ဟူ၍လည္း ျဖစ္ႏိုင္ပါသည္။ ထိုေၾကာင့္ <data:post.body/> ႏွင့္ ရွာၾကည့္ၿပီး ေတြ႕လွ်င္ ေအာက္ပါအတိုင္း အနီေရာင္ Code မ်ားကို ျဖည့္စြပ္ေပးပါ။

နံပါတ္ (၁) သီးျခား တစ္ပို႔စ္တည္းသာ ေဖာ္ျပျခင္း အတြက္မွာ

<div class='post-body' expr:id='"post-" + data:post.id' >

<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>

<p><data:post.body/></p>

<span id='showlink'>
<a expr:href='data:post.url'>Read More......</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

နံပါတ္ (၂) လက္ရွိ စာမ်က္ႏွာတြင္ ခ်ဲ႕၍ ေဖာ္ျပျခင္း အတြက္မွာ

<div class='post-body' expr:id='"post-" + data:post.id' >
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Collapse...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

အထက္ပါ Code ႏွစ္ခုတြင္ Bold လုပ္ထားေသာ Read More... ႏွင့္ Collapse... ေနရာမ်ားတြင္ မိမိႏွစ္သက္ရာ စာလံုးမ်ား ထည့္သြင္းေပးပါ။ ဥပမာ Read More... ေနရာတြင္ ဆက္ဖတ္ခ်င္ရင္ ... ဟု အစားထုိးႏိုင္သည္။

အဆင့္ (၄) ပို႔စ္အား ေခါက္လိုေသာ နယ္နိမိတ္ ပိုင္းျဖတ္ျခင္း

ဥပမာ မိမိ၏ပို႔စ္တြင္ စာပိုဒ္ ငါးပိုဒ္ရွိရာ ဒုတိယအပိုဒ္အထိသာ ဘေလာ့ဂ္တက္တက္ခ်င္းတြင္ ေပၚလို၍ က်န္သံုးပုဒ္ကို Read More ... ႏွိပ္ေသာအခါမွသာ ျမင္ေစလိုသည္ ဆိုပါစို႔။

ဒုတိယစာပိုဒ္၏ ေအာက္တြင္ <span id="fullpost"> ကို ထည့္သြင္းေပး၍ ပို႔စ္အားလံုး၏ အဆံုးတြင္ </span> ထည့္သြင္းေပးျခင္းျဖင့္ ပို႔စ္ေခါက္ျခင္းကို ျပဳလုပ္ႏိုင္သည္။

ပို႔စ္အသစ္ေရးတုိင္း ေရးတုိင္း ထို Code ကို ထည့္ရန္ ေမ့ေနမည္ စိုးပါက
Settings ၏ Formatting Tab ရွိ Post Template ေနရာတြင္ ေအာက္ပါ Code ကို ထည့္သြင္း၍ Save ေပးပါ။

Type your summary here.
<span id="fullpost">
Type the rest of your post here.
</span>

ထိုအခါ ပို႔စ္အသစ္ေရးမည္ဆိုတိုင္း ထို Code ေပၚေနမည္ျဖစ္၍ ေမ့မွာ ပူစရာ မလိုေတာ့ပါ။

No comments:

Post a Comment