Peekaboo ပို႔စ္ေခါက္နည္းအေသးစိတ္

Peekaboo ဆိုတာ Read more.. Collapse ... စတဲ့ Javascript ေလးကို ဘေလာ့ဂါမွာ ထည့္သြင္း ၿခင္းၿဖစ္ပါတယ္ ။ ကၽြန္ေတာ္ စစလိုက္ရွာၿခင္းတုန္းက javascript ေတြ ေသေနတာနဲ႔ ေနာက္ၿပီး code ေတြအ လုပ္မလုပ္တာနဲ႔အေတာ္ေလး ဒုကၡမ်ားခဲ့ရပါတယ္ ။ အခုေတာ့ ဒီ ဆက္လက္ဖတ္ရွုရန္ဆိုတဲ့ ဟာေလး လုပ္နည္းကိုအ ေသးစိတ္ေရးတင္ေပးလုိက္ပါတယ္ ။ ကိုယ့္ရဲ႕ စာမ်က္ႏွာမွာ ပို႔စ္ေတြအမ်ား ၾကီးတင္ ထားတဲ့အခါ အရွည္ၾကီးေတြၿဖစ္ေနရင္ အဆင္မေၿပပါဘူး ။ Read more ေလး ထည့္ထားတဲ့အခါ expandable ၿဖစ္တဲ့အ တြက္ ပို႔စ္ေခါက္ရတာ အရမ္းလြယ္ကူၿပီး ၾကည့္ရတာ ရွင္းလင္းသပ္ရပ္ေစပါတယ္ ။ ၀ထၳဳရွည္ေတြေရးတဲ့အခါ ဒါေလးထည့္ထားရင္အ ရမ္းကို အဆင္ေၿပမယ္လို႔ထင္ပါတယ္ ။ ကၽြန္ေတာ့္ဘေလာ့မွာ နမူနာ ထည့္ထား သလိုေပါ့ ။ ကဲ လုပ္နည္းေလးကို အေသးစိတ္ ၾကည့္ၾကရေအာင္ ။

အရင္ဆံုး ဘာမွစမလုပ္ခင္ ကိုယ့္ရဲ႕ Template ေလးကို backup လုပ္ထားပါဦး ။ Backup လုပ္နည္းေတာ့ သိၾကမယ္ ထင္တဲ့အတြက္ မေၿပာေတာ့ပါဘူး ။

၁ ။ Blogger ကို sign in လုပ္ၿပီး Edit Html ထိေရာက္ေအာင္သြားပါ ။ ၿပီးရင္ Expand Widget Templates ဆိုတာေလးကို အမွန္ၿခစ္ေပးဖို႔ မေမ့ပါနဲ႔ဦး ။

၂ ။ </head> ဆိုတာကိုရွာပါ ။ ရွာေတြ႔ရင္ သူ႔ရဲ႕အေပၚမွာ ေအာက္မွာေပးထားတဲ့လင့္ေလးကိုဖြင့္ၿပီး code ေတြအကုန္ကူးလိုက္ၿပီး paste လုပ္လိုက္ပါ ။ ( အသင့္တင္ၿပီးသားၿဖစ္တဲ့ javascript code ေတြ ၿဖစ္ပါတယ္ )

Javascript code မ်ားေကာ္ပီလုပ္ရန္ ဒီေနရာကိုႏွိပ္ပါ ။

ဒီေအာက္ကလည္းအတူတူလဲ အတူတူပဲ သီသန္႔ထည္႔တာပါ
<b:if cond='data:blog.pageType != "item"'> <script type="text/javascript"> var fade = false; function showFull(id) { var post = document.getElementById(id); var spans = post.getElementsByTagName('span'); for (var i = 0; i < spans.length; i++) { if (spans[i].id == "fullpost") { if (fade) { spans[i].style.background = peekaboo_bgcolor; Effect.Appear(spans[i]); } else spans[i].style.display = 'inline'; } if (spans[i].id == "showlink") spans[i].style.display = 'none'; if (spans[i].id == "hidelink") spans[i].style.display = 'inline'; } } function hideFull(id) { var post = document.getElementById(id); var spans = post.getElementsByTagName('span'); for (var i = 0; i < spans.length; i++) { if (spans[i].id == "fullpost") { if (fade) { spans[i].style.background = peekaboo_bgcolor; Effect.Fade(spans[i]); } else spans[i].style.display = 'none'; } if (spans[i].id == "showlink") spans[i].style.display = 'inline'; if (spans[i].id == "hidelink") spans[i].style.display = 'none'; } post.scrollIntoView(true); } function checkFull(id) { var post = document.getElementById(id); var spans = post.getElementsByTagName('span'); var found = 0; for (var i = 0; i < spans.length; i++) { if (spans[i].id == "fullpost") { spans[i].style.display = 'none'; found = 1; } if ((spans[i].id == "showlink") && (found == 0)) spans[i].style.display = 'none'; } } </script> </b:if>

၃ ။ ၿပီးရင္ <b:includable id='post' var='post'> ဆိုတာေလးကိုေတြ႔ေအာင္ရွာပါ ။ အဲဒီစာေၾကာင္းေလးေအာက္ကို ဆက္ၾကည့္သြားၿပီး <div style='clear: both;'/> <!-- clear for photos floats --> ဆိုတာ ကိုေတြ႔တဲ့အထိ ရွာပါ ။ ၿပီးရင္ ခုနက <b:includable id='post' var='post'> နဲ႔ <div style='clear: both;'/> <!-- clear for photos floats --> ရဲ႕ၾကားမွာ ရွိသ မွ် code ေတြအကုန္လံုးဖ်က္လိုက္ၿပီး ေအာက္မွာ အသစ္ေပးထားတဲ့ code ေတြ ကို ေကာ္ပီ ကူးၿပီး ထည့္ လိုက္ပါ ။


<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'> <br> <a expr:name='data:post.id'/><br> <b:if cond='data:post.title'><br> <h3 class='post-title'> <br> <b:if cond='data:post.url'><br> <a expr:href='data:post.url'><data:post.title/></a><br> <b:else/><br> <data:post.title/><br> </b:if><br> </h3> <br> </b:if><br><br> <div class='post-header-line-1'/> <br><br> <div class='post-body'> <br><br> <b:if cond='data:blog.pageType == "item"'><br><br> <p> <data:post.body/></p> <br><br> <b:else/><br> <style>#fullpost {display:none;}</style><br> <p> <data:post.body/></p> <br> <span id='showlink'><br> <p> <a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read More...</a></p> <br> </span><br> <span id='hidelink' style='display:none'><br> <p> <a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Summary only...</a></p> <br> </span><br> <script type='text/javascript'><br> checkFull("post-" + "<data:post.id/>");<br> </script><br> </b:if>

ဒီအဆင့္မွာ အခု ေကာ္ပီကူးလိုက္တဲ့ code ေတြမွာ Read More .... ဆိုတဲ့ေနရာေလးမွာ ဆက္လက္ဖတ္ရွူရန္ စသၿဖင့္ေရးႏုိင္ၿပီး Summary only... ဆိုတဲ့ေနရာမွာ ၿပန္ေခါက္ေပးရန္ ၊ ၿပီးပါၿပီ စသၿဖင့္ေရးႏိုင္ပါတယ္ ။ ၿပီးရင္ save လုပ္ပါ ။

၄ ။ ေနာက္တစ္ဆင့္အေနနဲ႔ Setting ထဲက Formatting ကိုသြားပါ ။ Post template ဆိုတဲ့ text box ေနရာေလးမွာ ေအာက္က code ေလးေတြကို ထည့္လိုက္ပါ ။

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

ၿပီးရင္ေဆ့လုပ္လိုက္ပါ ။

ပို႔စ္တင္တဲ့အခါ Type your summary here ဆိုတဲ့ေနရာမွာ ကိုယ္Home page မွာ ပို႔စ္တစ္ပုဒ္ လံုးမွာ ေပၚေစခ်င္တဲ့စာသားေလးကိုေရးပါ ။ အေပၚဆံုးတစ္ပုဒ္ပဲၿဖစ္ၿဖစ္ေပါ့ ။ ၿပီးရင္ကိုယ္ေခါက္ ခ်င္တဲ့ေန ရာေလးကို <span id="fullpost"> နဲ႔ </span> ရဲ႕ၾကားထဲမွာေရးပါ ။ ဒါဆိုအိုေက သြားပါလိမ့္မယ္ ။

မရွင္းတာရွိရင္ ေမးသြားႏိုင္ပါတယ္ ။

သက္တန္႔ခ်ိဳ

စာဖတ္ပရိတ္သတ္သူငယ္ခ်င္းမ်ားကို အစဥ္ေလးစားေသာအားၿဖင့္.......................

Source...သက္တန္႔ခ်ိဳ
မ်ားမ်ားထားတာ ျပႆနာ မရွိ...တနည္းမရရင္ ေနာက္တနည္းေပါ႔ ဟိဟိ