Blogger သူငယ္ခ်င္းမ်ားအတြက္ Post မွာ Auto Read More ျပဳလုပ္နည္း

 

အခု Post ေလးကေတာ့ Blogger ညီကိုမ်ားအတြက္သီးသန္႕ Post ေလးျဖစ္ပါတယ္။ ဆရာၾကီးေတြအတြက္ မဟုတ္ပါဘူး။ အခုမွစျပီး Blog ကိုေလ့လာေနတဲ့ ေဘာ္ဒါေတြအတြက္ပါ။ Post ေတြမွာ Jump Break လုပ္စရာ မလိုဘဲနဲ႕ Auto Read More ျဖစ္ေနေစမယ့္ HTML Code ျဖစ္ပါတယ္။ ထည့္ရတာလည္းအေတာ္ေလးလြယ္ ကူပါတယ္။ အေအာက္မွာပံုနဲ႕တကြအေသးစိတ္ေဖာ္ျပေပးလိုက္ပါတယ္ဗ်ာ။ ေအာက္မွာၾကည့္လိုက္ၾက ရေအာင္ဗ်ာ။ လူတိုင္းလြယ္ကူစြာလိုက္လုပ္ႏိုင္ေအာင္လို႕ အေသးစိတ္ တဆင့္ျခင္းေရးျပေပးထားပါတယ္။

Step-1

အေပၚကပံုအတိုင္း  Dashboard > Template > Edit HTML ထဲကို၀င္သြားလိုက္ပါ။
Control + F ႏွိပ္ျပီး Search Box မွာ</head> ကိုရွာလိုက္ပါ
ေတြ႕ျပီဆိုရင္ </head> ရဲ႕ အေပၚမွာ ေအာက္က Code ကို Copy to Paste လုပ္ေပးပါ။

<script type='text/javascript'>
var noImgSum = 200;
imgSum = 450;
iHt = 250;
iWd = 250;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function autoReadMore(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = noImgSum;
if(img.length>=1) {
imgtag = '<img id="autoReadMoreImg" src="'+img[0].src+'" width="'+iWd+'px" height="'+iHt+'px"/>';
summ = imgSum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>


Step-2

ေနာက္ထပ္ Search Box မွာအေပၚကပံုအတိုင္း <data:post.body/> ဆိုျပီး ထပ္ရွာၾကည့္ပါ
ေတြ႕ျပီဆိုရင္<data:post.body/> ကို Select ေပးျပီး ေအာက္က Code ကို Copy to Paste နဲ႕အစားထိုးေပး လိုက္ပါ။

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> autoReadMore("summary<data:post.id/>");
</script>
<a id='readmore' expr:href='data:post.url'>Read More ...</a>
</b:if>
</b:if>
ဒါဆိုရင္ေတာ့ Auto Read More အတြက္ လုပ္ေဆာင္ရမွာကျပီးဆံုးသြားပါျပီ။ဒီေနရမွာ မိမိစိတ္ၾကိဳက္ျပင္ ဆင္ႏိုင္တာေလးတစ္ခုရွိပါတယ္။ ပထမဦးဆံုးအဆင့္မွာ ေပးထားတဲ့ Code ေလးကိုျပင္ဆင္ႏိုင္ပါတယ္။

var noImgSum = 200;
ဒီေနရမွာ 200 ဆိုတာ ပံုနားမွာေပၚမယ့္စာလံုးရဲ႕အေရအတြက္ျဖစ္ပါတယ္။ imgSum = 450;  
ဒီေနရာမွာ 450 ဆိုတာက Post မွာ Read More မတိုင္ခင္မွာေပၚေစခ်င္တဲ့စာလံုးအေရအတြက္ျဖစ္ပါတယ္။ iHt = 250;
iWd = 250;
ဒီႏွစ္ခုကေတာ့ Post မွာေပၚမယ့္ ပံုရဲ႕အေရအတြက္ျဖစ္ပါတယ္။
ျပင္စရာရွိတာေတြလည္းျပင္ျပီးသြားျပီဆိုရင္ေတာ့ Save Template မႏွိပ္ခင္မွာ Preview Template ကိုအရင္ နွိပ္ျပီး Preview ၾကည့္ေစခ်င္ပါတယ္။ Error မရွိဘဲ စိတ္ၾကိဳက္ျဖစ္ျပီဆိုေတာ့မွ Save Template ကိုႏွိပ္ေစခ်င္ ပါတယ္ဗ်ာ။

ဒီေလာက္ဆိုရင္ေတာ့ အဆင္ေျပေျပနဲ႕လိုက္လုပ္ႏိုင္မယ္လို႕ယူဆရပါတယ္ဗ်ာ။အားလံုးဘဲအဆင္ေျပၾက ပါေစေနာ္။

ေဘးမွာရွိတဲ႕ ေၾကာ္ျငာတစ္ခုကို တစ္ရက္ကို တစ္ခ်က္ေလးႏွိပ္ေပးရံုနဲ႕ ကၽြန္ေတာ့္အတြက္ အမ်ားၾကီးအေထာက္အကူျဖစ္ေစပါတယ္ဗ်ာ။
ေက်းဇူးအထူးတင္ရွိပါတယ္ဗ်ာ။

www.pyaephyo.com