Blog Post မ်ားအား Auto Read More ျပဳလုပ္ျခင္း (with thumbnails)

အားလုံးမဂၤလာပါခင္ဗ်ာ..။ ကၽြန္ေတာ္ အခုေဖာ္ျပေပးမွာကေတာ့ Blog Post ေတြကုိ Auto Read More ျပဳလုပ္ျခင္းျဖစ္ၿပီး New Blogger မ်ားအတြက္အဓိက ရည္ရြယ္ပါတယ္။ မိမိတုိ႕ရဲ႕ Post မွာပါတဲ့ Image ပုံမ်ားကုိပါ Thumbnails နဲ႕ေဖာ္ျပေပးမွာျဖစ္ပါတယ္။ နမူနာကုိ ဒီေနရာမွာ သြားေရာက္ၾကည့္႐ႈႏုိင္ပါတယ္။ သေဘာက်တယ္ဆုိရင္ေတာ့ ေအာက္က အဆင့္မ်ားအတုိင္း လုပ္ၾကည့္ၾကပါခင္ဗ်ာ..

၁။     မိမိတုိ႕ရဲ႕ဘေလာ့မွာ Sign In လုပ္ပါ။ Design -->>Edit Html ကုိသြားၿပီး ဘေလာ့ကုိ Backup လုပ္ထားလုိက္ပါ (Download Full Template)။ ဒါမွသာ အမွားအယြင္းတစ္စုံတစ္ရာရွိခ့ဲရင္ ျပန္ၿပီး restore လုပ္လုိ႕ရမွာျဖစ္ပါတယ္။

၂။     ၿပီးရင္ Expand Widget Templates ဆုိတာေလးကုိ အမွန္ျခစ္ေလးေပးလုိက္ပါ။ 

၃။     </head> ဆုိတာကုိ ရွာပါ။ ေတြ႕ရင္ ေအာက္မွာေပးထားတဲ့ ကုတ္ေတြကို သူ႕အေပၚကေနကပ္ၿပီး ထည့္ေပးလုိက္ပါ။

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://www.opendrive.com/files/14261688_ym42r/Read_more.js' type='text/javascript'/>

၄။     ၿပီးရင္ အေပၚက ကုတ္ေတြထဲမွာ မိမိတုိ႕စိတ္တုိင္းၾကျပင္ဆင္မႈလုပ္ပါမယ္။

• summary_noimg = 230 ဆုိတာက Image မပါတဲ့ စာသားသက္သက္ ပုိ႕စ္မ်ားအတြက္ျဖစ္ၿပီး အက်ဥ္းေဖာ္ျပမယ့္ စာလုံးအေရအတြက္ျဖစ္ပါတယ္။ ပုိၿပီးေဖာ္ျပခ်င္တယ္ဆုိရင္ေတာ့ 230 ေနရာမွာ 240, 250 စသည္ျဖင့္ ေျပာင္းေပးလုိက္ပါ။

• summary_img = 140 က Image ပါတဲ့ ပုိ႕စ္မ်ားအတြက္ျဖစ္ပါတယ္။ စာလုံးအေရအတြက္ကုိ စိတ္တုိင္းက် ေျပာင္းလုိ႕ရပါတယ္။

• img_thumb_height = 100 ကေတာ့ Image ပါတဲ့ Post မ်ားအတြက္ ေဖာ္ျပလုိတဲ့ Image ရဲ႕အျမင့္ျဖစ္ပါတယ္။

• img_thumb_width = 100 ကေတာ့ Image ရဲ႕ အက်ယ္ျဖစ္ပါတယ္။

• 'http://santhitaye72.googlecode.com/files/read-more_auto.js ကေတာ့ ReadMore အတြက္ js ဖုိင္ရဲ႕ Direct Link ျဖစ္ပါတယ္။ သူ႕အတုိင္းထားၿပီးသုံးရင္လည္းရပါတယ္။ ဒါေပမယ့္ သုံးတဲ့သူမ်ားတဲ့အခါ Bandwidth မႏုိင္ဘဲ Direct Link ေဒါင္းၿပီး Read More အလုပ္မလုပ္တာမ်ိဳး ႀကံဳေတြ႕ရႏုိင္ပါတယ္။ ဒါ့ေၾကာင့္ ေအာက္မွာေပးထားတဲ့ လင့္မွာ ေဒါင္းလုပ္ယူၿပီး WinRar ကုိျဖည္ပါ။ read_more_auto.js ဆုိတဲ့ဖုိင္ေလးကုိ Direct Link ရတဲ့ Hosting တစ္ခုခုမွာ Upload တင္ၿပီး ရလာတဲ့ လင့္ကုိ အစားထုိးသုံးစြဲပါ။ 

• Download Read More Hack.rar 

၅။     ဒီတစ္ခါ <data:post.body/> ဆုိတဲ့ ကုတ္ကုိထပ္ၿပီးရွာပါ့မယ္။ ေတြ႕ရင္ အဲဒီကုတ္ကုိ ဖ်က္ပစ္ၿပီး သူ႕ေနရာမွာ ေအာက္က ကုတ္ေတြနဲ႕ အစားထုိးလုိက္ပါ့မယ္။

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Reade more >></b></a></span>
</b:if>

၆။     အေပၚက Read more ေနရာမွာ မိမိစိတ္ႀကိဳက္စာသားေလးေတြ အစားထုိးလုိ႕ရပါတယ္။ ၿပီးရင္ Preview အရင္ၾကည့္ပါ။ စိတ္ႀကိဳက္ျဖစ္ၿပီဆုိရင္ေတာ့ save လုပ္လုိက္ပါ။ အားလုံး အဆင္ေျပၾကပါေစခင္ဗ်ာ...။