Tuesday 12 November 2013

Blog မွာ ပို႕စ္ေတြကို ေခါက္တင္နည္း (သို႕) Read More ထည့္နည္း



မိမိ Blog ပင္မစာမ်က္ႏွာ Loading ျမန္ေစဖို႕နဲ႕ ေသသပ္လွပဖို႕အတြက္ ပို႕စ္ေတြ တင္တဲ့အခါ အရမ္းရွည္ေနရင္

အေပၚ ၃ ပံု ၁ ပံုေလာက္ကေန ေခါက္တင္သင့္ပါတယ္။ နည္းပညာပို႕စ္ေတြဆိုရင္ ပံုေတြ အမ်ားႀကီးနဲ႕ ရွင္းျပရတာ။

တစ္ခါတစ္ေလ Video ဖိုင္ေတြ ၊ SWF ဖိုင္ေတြေတာင္ ပါေသးတယ္။ ပို႕စ္တစ္ပုဒ္လံုးကို ဒီအတိုင္းတင္လိုက္တဲ့အခါ


ပင္မစာမ်က္ႏွာမွာ ပို႕စ္ ၅ ပုဒ္ေလာက္ပဲ တင္ထားရင္ေတာင္ ပံုေတြ ၊ Flash ဖိုင္ေတြ အားလံုးေပၚဖို႕ အၾကာႀကီးကို

Loading ဖတ္ေနမွာပါ။ လိုင္းမေကာင္းတဲ့လူေတြသာ ကိုယ့္ဆိုဒ္ကို ေရာက္လာခဲ့ရင္ စိတ္ပ်က္ၿပီး ျပန္လွည့္သြားမယ္။

တစ္ခ်ဳိ႕ အဲဒါေတြသိေပမယ့္ ပို႕စ္မေခါက္တတ္လုိ႕ ဒီအတိုင္း တင္ေနၾကတာလည္း ရွိပါတယ္။ ခုေတာ့ အေနာ္သံုးတဲ့

အလြယ္ကူဆံုး ပို႕စ္ေခါက္နည္း ၊ Read More ထည့္နည္းေလး ေျပာျပေပးပါမယ္။ တကယ္ အရမ္းကို လြယ္ပါတယ္။

ပထမဦးဆံုး ပို႕စ္ကို ၿပီးေအာင္ အရင္ေရးလိုက္။ ျပီးရင္ ကိုယ္ေခါက္ခ်င္တဲ့ေနရာေလးကို ေမာက္တစ္ခ်က္ေထာက္ၿပီး

ေအာက္က ပံုထဲမွာ အေနာ္ဝိုင္းျပထားတာေလးကို ႏွိပ္ပါ။ အဲဒါဆို မ်ဥ္းေၾကာင္း တစ္ေၾကာင္း ေပၚလာပါလိမ့္မယ္။




ပို႕စ္ကို Publish လုပ္ၿပီးရင္ ပင္မစာမ်က္ႏွာမွာ သြားၾကည့္လုိက္ပါ။ ခုနမ်ဥ္းအထိပဲ ေပၚၿပီးေတာ့ သူ႕ ေအာက္မွာ

Read More ဆိုၿပီး ရွိေနမွာပါ။ ပို႕စ္ကို အျပည့္အစံုဖတ္ခ်င္တယ္ဆိုရင္ အဲဒီ Read More ကို ႏွိပ္လိုက္ရံုပါပဲ။



အဲဒီ Read More ကို တစ္ျခားစာေျပာင္းေရးခ်င္တယ္ဆိုရင္ Design >> Layout ကို သြားၿပီးေတာ့ Blog Posts ရဲ႕

ညာဘက္ေအာက္က Edit ကို ႏွိပ္ၿပီး ျပင္ေရးႏုိင္ပါတယ္။ ဥပမာ အျပည့္အစံု ဖတ္ရန္ ၊ ဆက္ဖတ္ရန္ စသည္ျဖင့္ေပါ့။




အဲဒီ Read More စာသားကို CSS ကုတ္ေတြနဲ႕ မိမိစိတ္ႀကိဳက္ လွပေအာင္ လုပ္လို႕ရပါတယ္။ ေအာက္မွာ ေပးထားတဲ့

ကုတ္ေလးေတြကို Design >> Layout >> HTML/JavaScript မွာ ထည့္ၿပီး Save လုပ္ပါ။ အဆင္ေျပမယ္လို႕ေတာ့

ထင္ပါတယ္။ ဒီကုတ္က ကြ်န္ေတာ္ကိုယ္တုိင္ေရးထားတာပါ။ ခုလည္း ဆိုဒ္မွာသံုးေနတာေလးကို ျပန္ရွယ္ေပးတာပါ။

<style>
.jump-link a {
font-size: 16px !important;
font-weight: bold;
text-decoration: blink;
text-transform: uppercase;
text-shadow: 2px 2px 2px #18c718;
}
</style>

CSS ကုတ္အေၾကာင္း နည္းနည္းသိမယ္ဆိုရင္ ကိုယ္ႀကိဳက္တဲ့ ပံုစံ ျပင္ေရးႏိုင္ပါတယ္။ Read More ကို ဘယ္ဘက္

အလယ္ ၊ ညာဘက္ ကိုယ္ထားခ်င္တဲ့ေနရာမွာ ေပၚေအာင္က ေအာက္က ကုတ္ေလးထပ္ထည့္ေပးရင္ ရပါၿပီ။

text-align: left; ဘယ္ဘက္ ၊ text-align: center; အလယ္ ၊ text-align: right; ညာပါ။ အဆင္ေျပပါေစ..


No comments:

Post a Comment

Comment မ်ားအား စစ္ေဆးျပီးမွသာ အတည္ျပဳေပးမည္။