Jan 9, 2010

Automatic Thumbnail and Readmore Function

အခုလက္ရွိလုပ္ထားတာေလးပါ။ Blog မွာ ပုိစ့္ အႏွစ္ခ်ဳပ္ေလး နဲ႔ Photo thumbnail ေလးကုိ main page မွာ ျပေအာင္လုပ္တာေလးပါ။ဘာေကာင္းသလဲဆုိေတာ့ visitor အေနနဲ႔ ပုိစ့္ေတြရဲ့ အႏွစ္ခ်ဳပ္ကုိ scroll bar နဲနဲေရႊ႔ ရံုနဲ႔ ခ်ံဳၾကည့္လုိ႔ရပါတယ္။ စိတ္၀င္စားလုိ႔ ထပ္ဖတ္ခ်င္ေတာ့မွ Read more ကုိႏိွပ္ရံုပါပဲ။ javascript နဲဲ႔ လုပ္ထားတာေလးပါ။ ရုိးရွင္းျပီး လုပ္ရလြယ္ပါတယ္။ အခုမွ ဘေလာ့လုပ္သူေတြ အတြက္ကေတာ့ Read More ဆုိတာရွင္းျပပါမယ္။ Blog မွာ ရွည္လြန္းတဲ့ post ေတြတင္တဲ့ အခါ အဲဒီ post တစ္ခုတည္းနဲ႔တင္ ဘေလာ့ၾကီး ကအရွည္ၾကီး ျဖစ္ေနမွာ စုိးလုိ႔ အေပၚပုိင္းေလးကုိပဲ ေဖာ္ျပျပီး က်န္အပုိင္းေတြကုိ visitor က Read more ဆုိတာေလး ကုိ ႏွိပ္မွ ေပၚေအာင္လုပ္ထားတာပါ။
လုပ္နည္းကေတာ့..
၁။Layout ==> Edit HTML ==> မွာ Expand Widget Templates ကုိ အမွန္ျခစ္ပါ။
၂။ေအာက္ကကုတ္ေလးကုိ ကူးျပီး < /head > ရဲ႕ ေအာက္မွာ ထည့္ပါ။

< script type='text/javascript' >
var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
< /script >
< script src='http://cebong.ipit.googlepages.com/read-moreotomatis.js' type='text/javascript'/ >

Note :

You can cutomize this size
summary_noimg = 430; is post cut height without image
summary_img = 340; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 120; is thumbnail image width

ျပီးရင္ < data:post.body/ > ကုိရွာပါ။ အဲဒီကုတ္ေနရာမွာ ေအာက္ပါနဲ႔ အစားထုိးလုိက္ပါ။ အေပၚက လင့္ေနရာမွာ ဒီ ဖုိင္ေလးကုိ ေဒါင္ျပီး upload တင္ထားတဲ့ လင့္ေနရာကုိ ထည့္ပါ။

< b:if cond='data:blog.pageType != "item"' >

< div expr:id='"summary" + data:post.id' > < data:post.body/ > < /div >
< script type='text/javascript' > createSummaryAndThumb("summary < data:post.id/ > "); < /script >
< span class='rmlink' style='float:right;padding-top:20px;' > < a expr:href='data:post.url' > read more “ < data:post.title/ > ” < /a > < /span >

< /b:if >
< b:if cond='data:blog.pageType == "item"' > < data:post.body/ > < /b:if >

သတိ။ ကုတ္ေတြကူးရာမွာ < ေတြနဲ႔ ကုတ္ေတြနဲ႔ မွာ space မျခားပါဘူး။ အားလံုးကပ္ျပီးေရးရပါမယ္။
MORE INFO ===> http://www.ipietoon.com/2009/03/automatic-thumbnail-and-readmore.html

No comments:

Post a Comment