"Read More" in Blogger (Expandable Posts)

Blogger/ Blogspot၏ Main Pageသည္ သာမန္အားျဖင့္ အသစ္တင္လိုက္ေသာ Postအား စာမ်က္ႏွာ အျပည့္ေဖာ္ျပေလ့ရွိရာ Main Pageတြင္ Postမ်ား မ်ားျပားစြာ ထားပါက ထို Main Pageသည္ အလြန္ရွည္လ်ားႏိုင္ၿပီး အခ်ိန္ၾကာရွည္စြာ ေစာင့္ရပါသျဖင့္ မိမိ Blogထဲသို႔ ၀င္ေရာက္လာေသာ စာဖတ္ပရိတ္သတ္မ်ား မိမိစာေစာင္အား ဖတ္ရွဳရန္ နည္းပါးႏုိင္သည္သာမက မိမိေပးလိုေသာ အခ်က္မ်ားအား ထိေရာက္စြာ မရႏိုင္ၾကပါ။ ထို႔ေၾကာင့္ Page Loading အခ်ိန္နည္းႏိုင္သမွ် နည္းေအာင္၊ Main Page ရွည္လွ်ားမွဳ မရွိေအာင္ သင္၏ Post အသစ္မ်ားအား အက်ဥ္းခ်ဳံးျဖင့္ အစပ်ိဳးထား၍ “Read More” (ျမန္မာလို) ဆက္ဖတ္ရန္.. ဆိုသည့္ Linkျဖင့္ တင္ပါက ပိုမိုအဆင္ေျပႏိုင္ပါသည္။ ၄င္းကို Expandable Posts (ျမန္မာလို) ခ်ဲ့ထြင္ႏိုင္ေသာ Postမ်ားဟုလည္း တနည္းအားျဖင့္ ေခၚဆိုႏိုင္ပါသည္။
ဒါကိုဘယ္လို ျပဳလုပ္မွာလဲ? ပညာရွင္မ်ားစြာ ဤအေၾကာင္းအရာႏွင့္ ပတ္သတ္၍ မ်ားျပားစြာ ေရးသားေဖာ္ျပထားၾကပါသည္။ သို႔ေသာ္ ေလ့လာသူမ်ားသည္ တခ်ိဳ႔ေသာ ရွင္းလင္းခ်က္မ်ားကို ရွင္းလင္းစြာ နားလည္ရန္ ခက္ခဲၾကပါသည္။ ဤအခက္အခဲမ်ား တစ္မ်ိဳးတစ္ဖံု နားလည္ႏိုင္မည္ ဆိုသည့္ ရည္ရြယ္ခ်က္ျဖင့္ တင္ျပလိုက္ရပါသည္။

အဆင့္ (၁)

Blogger ထဲသို႔ Sign လုပ္၍ Dashboard မွ Layout tabကိုႏွိပ္၍ Edit HTMLကို ႏွိပ္လိုက္ပါ။ ထို႔ေနာက္ Expand Widget Templates အား အမွန္ျခစ္ျပပါ။ ယင္းေနာက္ အာက္ပါ Codeကိုရွာပါ။ ရွာရန္ Ctrl + F ႏွိပ္၍ ထို Codeကို Find box တြင္ Pasteကာ Find Next buttonကို ႏွိပ္လိုက္လွ်င္ HTML ထဲတြင္ Highlight လုပ္ထားသည္ကို ျမင္ေတြ႔ႏိုင္ပါသည္။


]]></b:skin>

</head>


အဆင့္ (၂)
အထက္ပါ code စာေၾကာင္းႏွစ္ေၾကာင္းၾကားတြင္ ေအာက္ပါ Codeကို ကူးယူ၍ paste လုပ္လိုက္ပါ။ မွတ္ခ်က္။ ။ တခ်ိဳ႔ေသာ Templateသည္ အထက္ပါ codeႏွစ္ေၾကာင္းအတိုင္း မရွိၾကပါ။ ဒုတိယ အေၾကာင္း</head> သာ ျမင္ေတြ႔ရမည္ျဖစ္သည္။ ထိုကဲ့သို႔ ျဖစ္ေနပါက ထို </head> ၏ အေပၚတြင္ ေအာက္ပါ codeအား ကူးယူ၍ Paste လုပ္လိုက္ပါ။


<script src="http://yanaung.prospect.googlepages.com/myhacko.js"

type="text/javascript" />


အဆင့္ (၃)

ထို႔ေနာက္ ေအာပါ codeကိုရွာပါ။

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


ေတြ႔ပါက အေပၚ Codeမွ ေအာက္ေဖာ္ျပပါ Codeအထိ Selectလုပ္၍ ဖ်က္လိုက္ပါ။ မဖ်က္ခင္ ယင္း codeကို Notepadတြင္ Backupလုပ္ရန္ မေမ့ပါႏွင့္။


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

</div>


အဆင့္ (၄)

၄င္းေနာက္ ေအာက္ပါ codeကို ကူးယူ၍ အဆင့္ (၃)တြင္ ဖ်က္လိုက္သည့္ Codeေနရာအစား Pasteလုပ္လိုက္ပါ။

<b:includable id='post' var='post'> <div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'> <a expr:name='data:post.id'/> <b:if cond='data:post.title'> <h3 class='post-title'> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h3> </b:if> <div class='post-header-line-1'/> <div class='post-body'> <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>

အဆင့္ (၅)

ေနာက္ဆံုးအေနနဲ႔ Save Templateကို ႏွိပ္လိုက္ပါ။

အဆင့္ (၆)
ထို႔ျပင္ Setting > Formatting > ကိုႏွိပ္၍ ေအာက္ဆံုး၌ရွိေသာ Post Template boxတြင္ ေအာက္ပါ codeအား ကူးထည့္ပါ။ ထို႔ေနာက္ Save Setting button ကိုႏွိပ္ပါ။

Type your summary here. <span id="fullpost"> Read More.. </span>

အဆင့္ (၇)

New Postကို ေခၚပါ။ Post box၏ ညာဘက္ေထာင့္တြင္ Edit HTML ႏွိပ္ျခင္းျဖင့္ အထက္ပါ codeမ်ားကို ေတြ႔ရမည္ျဖစ္သည္။
Type your summary here ေနရာတြင္ မိမိအက်ဥ္းခ်ံဳးေဖာ္ျပခ်က္ကို ရိုက္ထည့္၍ က်န္ရွိေနေသးေသာ အခ်က္အလက္မ်ားကို Read More ေနရာတြင္္ ရိုက္ထည့္ပါ။

ၿပီးပါၿပီ။ ဒီ Post ေလးထက္ ပိုရွင္းလင္းေအာင္ နည္းဟန္အသစ္ျဖင့္ တင္ျပလိုက္ပါသည္။

Related Posts by Categories

Widget by Scrapur