ဘေလာ့ကို Hand-Phone မွာဖတ္ရတာအဆင္ေျပေအာင္လုပ္နည္း

ဘေလာ့ကိုHandဖုန္းကေနဖတ္တဲ့သူေတြအတြက္ပိုျပီးအဆင္ေျပေအာင္လုပ္နည္းေလးပါ။
ဒီလိုမလုပ္ရင္ေတာ့ဖတ္လို႕ရေပမယ့္မိမိရဲ႕ဘေလာ့ကဖုန္းVersionမထည့္ထားေတာ့
ဖြင့္ရတာအရမ္းၾကာမွာျဖစ္ပါတယ္
ဒါေၾကာင့္ေအာက္ကကုဒ္ေလးကမိမိရဲ႕ဘေလာ့Versionကိုဖုန္းကေနၾကည့္ရတာျမန္ေအာင္လုပ္နည္းေလးပါ
၁။Design

၂။Edit html

၃။(Ctrl+f)ႏိုပ္ျပီးေအာက္ကကုဒ္ကိုရွာပါ။

1. <b:include data='blog' name='all-head-content'/>  

 ၄။ေတြ႕ျပီဆိုရင္ေအာက္မွာေအာက္ကကုဒ္ကိုထည့္ေပးလိုက္ပါ။

1. <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>  
2.   
3. <b:if cond='data:blog.isMobile'>  
4.   
5. <meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>  
6.   
7. <b:else/>  
8.   
9. <meta content='width=1100' name='viewport'/>  
10.   
11. </b:if>  

 ၅။ Save Template  



အဆင္ေျပပါေစ        kp3

Read More

ဘေလာ့မွာTwitterငွက္ပံုေလးပ်ံသန္းေနတာေလးထည့္ခ်င္ရင္

၁ ။Design

၂။Add a Gadgetကိုသြားျပီး HTML/JavaScript မွာေအာက္ကကုဒ္ကိုထည့္္ေပးလိုက္ပါ။

1. <script src="http://yourjavascript.com/21504816113/kp3family.js?attredirects=0&amp;d=1" type="text/javascript">  
2. </script>  
3. <script type="text/javascript">  
4. var twitterAccount = "ဒီမွာTwitterAccountနာမည္ထည့္ေပးပါ";  
5. var tweetThisText = " <data:blog.pageTitle/> ~ <data:blog.Url/> ";  
6. tripleflapInit();  
7. </script> 

 အဆင္ေျပပါေစ


credit-kp3

Read More

အီးေမးလ္ Subscription Form ကိုဘေလာ့မွာဘယ္လိုထည့္မွာလဲ

မိမိမွာ FeedBurner Account ရွိျပီးသားဆိုရင္၊တျခားသူေတြက subscribe လုပ္လိုုက္ရင္,
မိမိက Post အသစ္တင္လိုက္တိုင္းမွာသူတိုရဲ႕အီးေမးလ္ထဲကို Auto ေရာက္ေအာင္ပို႕ေပး
ပါတယ္။မိမိရဲ႕ဘေလာ့ကိုအျမဲလာဖတ္ၾကတဲ႕သူငယ္ခ်င္းေတြအတြက္ပါအဆင္ေျပတာေပါ့
ေနာ္၊၊၊


အဆင့္ ၁။FeedBurner accountထဲကို Sign in ဝင္လိုက္မယ္ေနာ္၊ သင့္မွာ FeedBurner Account မရိွေသးဘူးဆိုရင္အရင္ဆံုးregisterလုပ္ဖို႕ရန္ ဒီမွာ အရင္သြားပါ။

အဆင့္ ၂။My Feeds ကို Click ႏိုပ္လိုက္ပါေအာက္ပံု။ေအာက္မွာေပၚလာလိမ့္မည္မိမိရဲ႕ဘေလာ့နာမည္ ေလးကိုႏိုပ္လိုက္ပါ။
 

 အဆင့္ ၃။မိမိရဲ႕ဘေလာ့နာမည္ေလးကိုႏိုပ္ျပီးရင္ Menu Tab က Publicize tab ကိုႏိုပ္လိုက္ပါ၊

 အဆင့္ ၄။ဆိုက္ဘားမွာျမင္ရပါလိမ့္မည္ Email Subscriptions ကိုႏိုပ္လိုက္ပါ

အဆင့္ ၆။ေအာက္မွာ Code ေပၚလာလိမ့္မည္

အဆင့္ ၇။ေအာက္က Code ကို Copy လုပ္ျပီး၊မိမိရဲ႕ဘေလာ့ထဲကိုျပန္ဝင္မယ္

 dashboard>>>>>layout>>>>>add a page element>>>>>html/javascript

 မိမိၾကိဳက္တဲ့ေနရာမွာထားလိုက္ေပါ့ေနာ္ ျပီးပါျပီ၊၊၊၊

 https://www.facebook.com/mudonwaingaung

 credit-kp3

  အသိပညာအတက္ပညာမ်ားတိုးပြါးႏိုင္ၾကပါေစ။

Read More

သင့္Blogက ပိုစ့္ေတြကို Facebook တြင္ Automatic ေရာက္ေအာင္လုပ္နည္း

ပထမဦးဆံုးဒီမွာႏွိပ္ျပီးသြားလိုက္ပါၿပီးတာနဲ႕ ကြ်န္ေတာ္၀ိုင္းထားတဲ့အတိုင္း Get Started Now ကို၀င္ပါ

Facebook အေကာင့္ဖြင့္ထားရင္ေတာ့ ေနာက္တစ္ဆင့္သြားပါ။ မဖြင့္ရေသးရင္ ၀င္လုိက္ပါ

Log in with Facebook ကိုကလစ္လိုက္ပါ

Register a Blog ကိုကလစ္ပါ။

ကြ်န္ေတာ္အနီေရာင္နဲ႕၀ိုင္းထားတဲ့ေနရာမွာ သင့္ရဲ႕ Blogger link ကိုထည့္ပါ။( ဥပမာ - http://mudonwaingaung2.blogspot.com ) ၿပီးရင္ Next ကိုကလစ္ပါ။

အကုန္ျဖည့္ပါ။ Terms of service* ရဲ႕ညာဘက္က box ကိုအမွန္ျခစ္ေပးခဲ့ပါ။ Language* မွာ English လို႕ေပးပါ။ ၿပီးတာနဲ႕ Next ကိုကလစ္ပါ။

Yes ကိုကလစ္လိုက္ပါ။

Blogger Dashboard ကိုကလစ္လုိက္ပါ။

Syndication ကိုကလစ္လိုက္ပါ။

Grant Permissons ကိုကလစ္ပါ။ 

(1) Choose a blog to syndicate ရဲ႕ေအာက္မွာ သင့္ရဲ႕ Blog နာမည္ကိုရွာၿပီးထည့္လုိက္ပါ။

Add Facebook Target ကိုကလစ္ပါဗ်ာ။

page မွာပဲ Add လိုက္ပါတယ္ဗ်ာ။ ၿပီးရင္ Already added ျပၿပီးရင္ ေအာင္ျမင္ၿပီးဆံုးသြားပါၿပီ

"credit-ဘေလာ့ခရီးသည္"

Read More

ဘေလာ့မွ fb like box ေလးထည့္နည္းပါ

ဘေလာ္ဂါေတြရဲ႕ ဘေလာ့ေလးေတြမွာ facebook like ေလးေတြ လုပ္ခ်င္မွာပါ

ဆိုဒ္ရဲ႕ Side bar မွာ facebook like ေလးလုပ္ထားျခင္းျဖင့္ ကိုယ့္ဆိုဒ္ကို

လူေတြ ဘယ္ေလာက္ ေလ့လာလဲ သိရတဲ႕အျပင္ အဲဒီ facebook page မွာ

တင္သမွ်ကို Like လုပ္ထားတဲ႕ မိတ္ေဆြေတြ ကို facebook က notification ျပပါလိမ့္မယ္ဗ်ာ

Facebook Like box လုပ္ဖို႕က အရင္ဆံုး facebook fan page တစ္ခု လိုပါမယ္

မိမိ facebook fan page လင့္ေလးကို မသိရင္ မိတ္ေဆြတို႕ရဲ႕ facebook မွာ Home ကို ႏွိပ္လိုက္ပါ ၿပီးရင္ေတာ့ ဘယ္ဘက္မွာ လုပ္ထားတဲ႕ facebook page ေလးကို Right Click ႏွိပ္ၿပီးေတာ့ Copy Link Location ကိုႏွိပ္လိုက္ပါ မသိရင္ေအာက္ကပံုေလးကိုၾကည့္လိုက္ပါ....

facebook like box ေလးလုပ္ဖို႕ ႕ ဒီေနရာေလး ကိုသြားလိုက္ပါ

ၿပီးရင္ Facebook page URL ဆိုတဲ႕ေနရာေလးမွာ ခုနက ေကာ္ပီကူးထားတဲ႕ လင့္ေလးကို

ကီးဘုတ္က Ctrl+V သို႕မဟုတ္ mouse က Right Click ႏွိပ္ၿပီး Paste လုပ္ေပးလိုက္ပါ

ေအာက္က Width နဲ႕ Height ကေတာ့ မိမိ ဘေလာ့ရဲ႕ side bar နဲ႕

အဆင္ေျပမွာေလး ရိုက္ထည့္ရမွာပါ .. Color Scheme ဆိုတာကေတာ့

မိမိဆိုဒ္ေလးက အလင္းဆိုဒ္လား အေမွာင္ဆိုဒ္လားေပါ့ တစ္နည္းဆိုရလွ်င္

အျဖဴမ်ားေနရင္ေတာ့အလင္းဆိုဒ္ေလးေပါ့ ဒါဆို Light ကိုေရြးေပးလိုက္ပါ

အမည္းဆိုဒ္ေလးဆိုရင္ေတာ့ Dark ကိုေရြးေပးရမွာပါ ၿပီးရင္ေတာ့ Get Code ကိုႏွိပ္လိုက္ပါဗ်ာ

အေပၚမွာျပထားတဲ႕ပံုေလးအတိုင္း Box ေလးတစ္ခုတက္လာမွာပါ အဲဒါဆို

IFRAME ကိုေရြးၿပီးေတာ့ ကၽြန္ေတာ္ အနီနဲ႕ ၀ိုင္းျပထားတဲ႕ ကုဒ္ေတြ အားလံုးကို 

ေကာ္ပီကူးၿပီးေတာ့ မိမိဘေလာ့ေလးရဲ႕ HTML/javascript ကုဒ္ထည့္တဲ႕ ေနရာေလးမွာ

ထည့္ေပးလိုက္ရံုနဲ႕ပဲ facebook Like box ေလးျဖစ္သြားမွာပါ ဒီအဆင့္ေလးကိုေတာ့

ေသခ်ာမေျပာေတာ့ပါဘူး Blogger အားလံုး ဒီအဆင့္ေလးကိုေတာ့သိၾကမွာပါ

ဒါဆိုရင္ေတာ့ ကၽြန္ေတာ္တို႕ blog ေလးမွာ facebook Like ေလးကိုေတြ႕ျမင္ရမွာပါခင္ဗ်ာ

Read More

ဘေလာ့မွာ Zawgyi နဲ႕ Unicode ခ်ိန္းတဲ့ ေဘာက္ေလးထည့္နည္း

မဂၤလာပါ ကြ်န္ေတာ္ သည္ေန႕တင္ျဖစ္တာေလးကေတာ့  ဘေလာ့ကာေတြအတြက္ မိမိတို႕ ဘေလာ့မွာ ေဖာင့္ေတြသုံးဖို႕အတြက္  ယခုဆိုရင္  Zawgyi  နဲ႕  Unicode  တို႕ကိုလြယ္ကူစြာေျပာင္းလို ့ရေအာင္ထည့္တဲ့နည္းေလးမွ်ေဝလိုက္ပါတယ္




ထည့္နည္းနဲ႕ ထည့္ရန္ကုဒ္ ►1. Login လုပ္လုိက္ပါ ဘေလာ့ကာကို ►2. Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕ Dashboard ကေနေပါ့ ►3. Add a Gadget ကိုကလစ္ေပးလုိက္ပါ ►4. HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ ►5. ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ ဒါဆိုမိမိတို႕ဘေလာ့ အေပၚမွာ ေဖါင့္ခ်ိန္း ဖို႕ေဘာ္ကေလး က်လာမွာျဖစ္ပါတယ္...အဆင္ေျပမွာပါေနာ္.<script type="text/javascript" src="http://yourjavascript.com/10019142125/kp3family.txt.js"></script>

Read More

မိမိတို႕ႏွစ္သက္ေသာ ဘေလာ့ဆိုဒ္မ်ားအား Android ဖုန္းမ်ားတြင္ Online/Off line ၾကည့္နိဳင္ရန္ APK လုပ္ယူနည္း

  ဘေလာ့ေပါင္းမ်ားစြာကို

မိမိတို႕ ဖုန္းကေန   online/ off line  ကေနအဆင္ေျပစြာ ဖတ္ရွဳနိဳင္ဖို႕   apk  လုပ္နည္းေလးကို မွ်ေ၀မွာ ျဖစ္ပါတယ္.... နည္းလမ္းေလးကေတာ့ ေတာ္ေတာ္မ်ားမ်ား  သိေနၾကျပီးျဖစ္ျခင္ျဖစ္ေနမွာပါ

ဒါေပမယ့္  မသိေသးေသာ မိတ္ေဆြမ်ားအတြက္  ရည္ရြယ္ျပီးးး  ျပန္လည ္မွ်ေ၀ျခင္းျဖစ္ပါတယ္....

ကဲစၾကမယ္ေနာ္  အဆင့္ေလးေတြအလိုက္ ပုံေလးေတြနဲ႕ ေသေသျခာျခာ ရွင္းျပပါ့မယ္.....

 ပထမဆုံး   မိမိတို႕ လုပ္လိုေသာ ဆိုဒ္ကို ဖြင့္လိုက္ပါ..... ဥပမာ က်ေနာ္ ဆိုဒ္တစ္ခုနဲ႕ နမူနာထား ျပသြားပါ့မယ္....ေနာ္

mudonwaingaung2.blogspot.comကိုဖြင့္လိုက္ပါျပီ

ခုလိုေလးေပၚလာျပီဆိုတာနဲ႕ အေပၚတူးဘားက  မိမိတို႕ ဘေလာ့လိပ္စာေရွ႕က logo  ေလးကိုကလစ္ပါ..
ကလစ္လို႕ က်လာတဲ့ ေဘာက္ေလးရဲ႕   More Information  ဆိုတာကိုကလစ္လိုက္ပါ

သည္လိုေလးက်လာမယ္.... အဲခါမွာ  အေပၚက  Feed ဆိုတာကိုကလစ္ပါ... အဲခါမွာဘဲ.. Atom နဲ႕ RSS
လင့္ေတြ ်ကလာမွာျဖစ္ပါတယ္... လင့္တခုကို ေစျခာ မွတ္သားျပီး  ေကာ္ပီယူသိမ္းထားေပးလုိက္ပါ...
ေကာ္ပီယူရတာ ခက္ခဲပါက  လင့္ေနာက္မွာ ေမာက္ေထာက္ စခရစ္ေပၚလာမယ္ ကလစ္ေပးလိုက္ပါ
စာမ်က္ႏွာသစ္နဲ႕က်လာတာနဲ႕  အေပၚတူးဘားက လင့္ကို ေကာ္ပီယူ အတူတူပါဘဲဗ်ာ.......
ကဲ...လုပ္ေဆာင္ခ်က္  စေတာ့မယ္..ေနာ္ သည္ မွာ    ကလစ္ျပီးသြားလုိက္ပါေနာ္.
အမွတ္စဥ္  (၁)  ။             ။  ေအာက္ကပုံအတိုင္း   sing up  လုပ္ေပးလိုက္ပါ.

အမွတ္စဥ္  (၂)    ။      ။  ကေတာ့ ေအာက္ကအတိုင္းလိုအပ္သလိုျဖည့္စြပ္ျပီး  sing up လုပ္ရမွာေနာ္

အမွတ္စဥ္  (၃)  ။           ။ အေနနဲ႕ကေတာ့ လိုအပ္တာေတြျဖည့္ျပီးsave change ကိုႏွိပ္ပါ

အမွတ္စဥ္  (၄)  ။                ။  ကေတာ့...အေပၚဘားးက   Setting  ကိုကလစ္ပါ...ေအာက္မွာ....
                                         ေမးအေကာင့္.....ဆိုဒ္လိပ္စာ...ျပီးေတာ့  save  change  ေပါ့...။

အမွတ္စဥ္  (၅)    ။                 ။  ကေတာ့ေနာက္ဆုံးးအဆင့္ေပါ့... အေပၚဘားက  Build ကိုကလစ္ပါ။
                                            အဲမွာေတာ့   save change  ကလစ္လိုက္ ျပီးပါျပီ.....ေနာ္...




ကဲ..မိမိတို႕  လုပ္ထားတဲ့   app..apk  ေလးကို မိမိတို႕ ေမးထဲမွာ သြားးေဒါင္းရမွာ ျဖစ္ပါတယ္....ေနာ္
မိမိတို႕  အေပၚကလုပ္ထားတဲ့အီးေမးိကု ၀င္လုိက္ပါ.

Read More

မိမိတို႕ဘေလာ့မွာ Power by Blogger ဆိုတာကိုျဖဳတ္နည္း

ဒါေလးကေတာ့ ဘေလာ့ကာေတြအတြက္  တခါတရံမွာ စိတ္အေႏွာက္အယွက္ျဖစ္ေစတဲ့  Power by Blogger  ဆိုျပီး ေပၚေနတဲ့ အရာေလးပါ...သည္ေကာင္ေလးက မူေသမရွိပါဘူး ဆိုဒ္ဘားမွာ ေပၚေနတယ္ဆို ေအာက္ဆုံးမွာ ထားလိုက္ျပသနာမရွိလွေပမယ့္ တခါတေလမွာ ဘေလာ့ရဲ႕ ထိပ္မွာ ေပၚေနတတ္ပါတယ္..အဲေကာင္က တျခား Widget  ေတြလိုလည္း ေမာက္နဲ႕ဆြဲ  Move  ေပးလို႕မရတဲ့  Template ေတရဲ႕ မူရင္းပါလာတဲ့အရာေလးပါ...ဒါေလးကို

ကြ်န္ေတာ္တို႕ ဘယ္လို ရေအာင္ ဖ်က္ရမယ္ဆိုတာ ကိုအလြယ္ဆုံးေလးနဲ႕ ရွင္းျပပါ့မယ္ေနာ္...

ေအာက္မွာ ပုံေလးေတြနဲ႕ အတူ ရွင္းျပထားပါတယ္...ေနာ္  ေလ့လာလိုက္ပါ..

►1-  Blogger Singin ၀င္လိုက္ပါ။
►2-  Dashboard  ကိုသြားလိုက္ပါ။
►3-  Template    ကိုကလစ္ပါ..။
►4-  Edit  Html   ကို၀င္ပါ..
►5- Ctrl+F  (သို႕မဟုတ္) F3  အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

အိုေက အေပၚကပုံတိုင္း HTML  ထဲေရာက္တာနဲ႕  မိမိတို႕ ကြန္ပ်ဴတာ ကီးဘုတ္က   Ctrl + F   တြဲကလစ္လုိက္ပါ... ကလစ္တဲ့ခါ တခ်ိဳ႕က ရြာလည္တတ္တယ္ ကလစ္တဲံအခါ  HTML  ေတြထဲမွာ ေမာက္တခ်က္ကလစ္ေပးျပီးမွ  Ctrl +  F  ကိုကလစ္ရမွာပါေနာ္...

အိုေက  ဒါဆို ေအာက္ကအေျခေနတိုင္း ျဖစ္လာမယ္

ခုလိုေတြ႕တဲ့ခါ  ေအာက္က ကုဒ္ကို ေကာ္ပီယူျပီး  search  box  ထဲထည့္ Enter  ေခါက္ေပးလိုက္ပါ..

 ရွာရန္ကုဒ္ကေတာ့...

        <b:widget id='Attribution1' locked='true' title='' type='Attribution'>      

အိုေက ေတြ႕တဲ့အခါ...အဲကုဒ္ေနရာကို ေအာက္ကုဒ္နဲ႕ အစားထိုးေပးလိုက္ပါေနာ္

         <b:widget id='Attribution1' locked='false' title='' type='Attribution'>

အိုေက ဒါဆို  မိမိတို႕ Template  ကို save template  လုပ္ေပးလိုက္ပါေနာ္...အဆင္ေျပပါျပီ...ေနာ္

ဒါဆို  မိမိတို႕ ဘေလာ့ကာ  Layout  ကိုကလစ္လိုက္ပါေနာ္...

မိမိတို႕ဘေလာ့ကာ Layout   ရဲ႕  Attribution   ဆိုတာေလးကိုေတြ႕မယ္  အဲတာေနာက္က Edit  ဆိုတာကို ကလ္စလုိက္ပါေနာ္... အိုေက ေအာက္ကလိုေဘာက္ေလးက်လာမွာ ျဖစ္ပါတယ္....

ဒါဆို အေပၚက ေဘာ္ကေလးမွာ ေတြ႕ရတဲ့  Remove  ဆိုတာေလးကို ကလစ္ျပီး     ok      ေပးလိုက္တာနဲ႕

မိမိတို႕ ဘေလာ့ကေန ထြက္ခြါသြားျပီျဖစ္ပါတယ္ေနာ္....အားလုံး အဆင္ေျပၾကပါေစ...

Read More

Blog Template မ်ား၏ width အား ခ်ဲ႕ျခင္း/ခ်ံဳ႕ျခင္း

အားလုံးမဂၤလာပါခင္ဗ်ာ..။  ဘေလာ့မွာ width ကုိ မိမိတုိ႔လုိသလုိ ခ်ဲ႕ႏုိင္/ခ်ံဳ႕ႏုိင္ေအာင္ ဒီပုိ႔စ္ေလးကုိ ေရးသားလုိက္ရပါတယ္။ မိမိနားလည္သလုိ တင္ျပထားျခင္းျဖစ္တဲ့အတြက္ အားနည္းခ်ိဳ႕ယြင္းခ်က္မ်ားရွိပါက နားလည္ခြင့္လႊတ္ေပးၾကပါလုိ႔ ဦးစြာေတာင္းပန္အပ္ပါတယ္။ လုိအပ္ခ်က္မ်ားရွိခဲ့ရင္လည္း ျဖည့္စြက္ေပးၾကေစလုိပါတယ္။ ဘေလာ့ရဲ႕ width ကုိခ်ဲ႕ျခင္း/ခ်ံဳ႕ျခင္းျပဳလုပ္ဖုိ႔အတြက္ သူ႔ရဲ႕ အေျခခံသေဘာတရားေလးကုိေတာ့ သိဖုိ႔လုိအပ္ပါတယ္။ ဒါမွသာ မိမိတကယ္ ျပင္ဆင္တဲ့အခါ နားလည္လြယ္မွာျဖစ္ပါတယ္။ ဒါေၾကာင့္ Template ကုိ အၾကမ္းဖ်ဥ္းအားျဖင့္ header-wrapper ၊ outer-wrapper နဲ႔ footer ဆုိၿပီး (၃)ပုိင္း ပုိင္းျခားထားေၾကာင္းကုိ သိထားရပါ့မယ္။ အဲဒီ (၃)ပုိင္းစလုံးရဲ႕ width ေတြကလည္း တူညီေနရပါ့မယ္။ ဥပမာ.. header-wrapper ရဲ႕ width က 980px ဆုိရင္ outer-wrapper နဲ႔ footer တုိ႔ရဲ႕ width ေတြကလည္း 980px စီပဲ ရွိၾကရပါမယ့္။ ဒါမွသာ အခ်ိဳးညီလွပတဲ့ Template တစ္ခု ျဖစ္ပါလိမ့္မယ္။ header-wrapper = outer-warpper = footer အဲဒီ အပုိင္းႀကီး(၃)ပုိင္းအနက္ outer-wrapper အေၾကာင္းကုိ ထပ္ေျပာပါ့မယ္။ outer-warpper ဆုိတာကေတာ့ main-wrapper နဲ႔ sidebar-wrapper ႏွစ္ခုကုိ ေပါင္းထားတာပဲျဖစ္ပါတယ္။ သေဘာကေတာ့ outer-wrapper ရဲ႕ width ဟာ main-wrapper နဲ႔ sidebar-wrapper ႏွစ္ခုေပါင္းတာနဲ႔ ညီပါတယ္။ ဥပမာ... outer-wrapper = 980px ဆုိပါက.. main-wrapper + sidebar-wrapper = 980px ျဖစ္ရပါမယ္။ outer-wrapper = main-wrapper + sidebar-wrapper (sidebar တစ္ခုသာပါသည့္ template မ်ားအတြက္) outer-wrapper = main-wrapper + right-sidebar-wrapper + left-sidebar-wrapper (sidebar ႏွစ္ခုပါသည့္ template မ်ားအတြက္) ဒါေပမယ့္ main-wrapper နဲ႔ sidebar-wrapper ႏွစ္ခုအၾကားမွာေတာ့ margin ေတာ့ထားေပးရပါတယ္။ တစ္ခုနဲ႔တစ္ခု ထိစပ္ေနရင္ ၾကည့္ရတာလည္း အဆင္ေျပမွာမဟုတ္ပါဘူး.။ ဒါေၾကာင့္ margin အတြက္ 30px, 40px.. စသည္ျဖင့္ ထားေပးရပါတယ္။ ေအာက္မွာ ေပးထားတဲ့ နမူနာပုံေလးေတြကုိၾကည့္ၾကပါခင္ဗ်ာ..။ အေပၚကပုံေတြကုိၾကည့္မယ္ဆုိရင္... Sidebar တစ္ခုသာပါတဲ့ Template အတြက္.. Main + margin + sidebar = outer 640px + 30px + 310px = 980px Sidebar ႏွစ္ခုပါတဲ့ Template အတြက္ left-sidebar + margin + main + margin + right-sidebar = outer 200px + 30px +520px + 30px + 200px = 980px ဒါဆုိရင္ေတာ့ Template ရဲ႕အေျခခံသေဘာတရားကုိ နားလည္ေလာက္ၿပီလုိ႔ထင္ပါတယ္။ အခု မိမိတုိ႔ရဲ႕ Template width ေတြကုိ လုိအပ္သလုိျပင္ၾကည့္ၾကရေအာင္..။ မူလက 980px ရွိတဲ့ Sidebar (၂)ခုပါ Template ကုိ 1200px အျဖစ္ ျပင္ၾကည့္ပါမယ္..။ မိမိတုိ႔ရဲ႕ဘေလာ့မွာ sign in လုပ္ၿပီး Design ေအာက္က Edit HTML ကုိသြားပါ။ ထုံးစံအတုိင္း Download Full Template လုပ္ၿပီး မိမိတုိ႔ရဲ႕ ဘေလာ့ကုိ backup လုပ္ထားလုိက္ပါ။ Ctrl + F နဲ႔ “#header-wrapper”, “#outer-wrapper”, “#main-wrapper”, and “#footer” ဆုိတဲ့ code ေတြကုိရွာပါ.. #header-wrapper { width:980px; margin:0 auto 10px; border:1px solid $bordercolor; } #outer-wrapper { width: 980px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; } #main-wrapper { width: 520px; float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #right-sidebar-wrapper { width: 200px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #left-sidebar-wrapper { width: 200px; float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #footer { width:980px; clear:both; margin:0 auto; padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center; } 980px ရွိတဲ့ Template ကုိ 1200px အထိခ်ဲ႕မွာ ျဖစ္တဲ့အတြက္ အေပၚက code ေတြထဲက header-wrapper, outer-wrapper, footer တုိ႔ရဲ႕ width ေတြကုိ 1200px လုိ႔ျပင္လုိက္ပါ့မယ္။ outer-wrapper ရဲ႕ width ဟာ 1200px ျဖစ္သြားၿပီးျဖစ္တဲ့အတြက္ main-wrapper နဲ႔ sidebar (2)တုိ႔ရဲ႕ width စုစုေပါင္းကုိလည္း 1200px ျဖစ္ေအာင္ ျပင္ေပးရပါ့မယ္။ sidebar ေတြရဲ႕ width ဟာ မိမိဘေလာ့ရဲ႕ လုိအပ္ခ်က္နဲ႔ ကုိက္ညီၿပီးသားဆုိရင္ေတာ့ ျပင္စရာမလုိပါဘူး။ အကယ္၍ မကုိက္ဘူးဆုိရင္ေတာ့ ေျပာင္းေပးႏုိင္ပါတယ္။ မူလ sidebar ရဲ႕ 200px ကုိ 220px အထိ္ခ်ဲ႕ခ်င္တယ္ ဆုိပါစုိ႔ ။ ဒါဆုိရင္ 1200 ထဲက ေန margin (၂)ခုအတြက္ 60 (30px + 30px) ကုိဖယ္ၿပီး ေအာက္ပါအတုိင္းေျပာင္းေပးရပါမယ္။ ဒါမွသာ စုစုေပါင္း 1200 px ျဖစ္ပါလိမ့္မယ္။ main-wrapper=700px left-sidebar=220px right-sidebar =220px အားလုံး ေျပာင္းၿပီးသြားရင္ေတာ့ save မလုပ္ေသးဘဲ preview အရင္ၾကည့္ပါ။ အဆင္ေျပတယ္ဆုိမွသာ Save လုပ္ပါ။ Template ခ်ဲ႕ျခင္း/ခ်ံဳ႕ျခင္းအတြက္ကေတာ့ ဒီေလာက္ဆုိရင္ အနည္းငယ္ အေထာက္အကူျဖစ္ၿပီလုိ႔ ယူဆပါတယ္။ မရွင္းလင္းတဲ့အခ်က္အလက္မ်ားရွိရင္လည္း ေဆြးေႏြးေမးျမန္းႏုိင္ၾကပါတယ္။ တစ္လက္စတည္း ဒီပုိ႔စ္ေလးနဲ႔ ဆက္စပ္ေနတဲ့ မိမိတုိ႔ဘေလာ့ header banner ပုံေလးကုိ မိမိတုိ႔စိတ္ႀကိဳက္ ပုံေလးေတြနဲ႔ အစားထုိးတဲ့အေၾကာင္းကုိ ေျပာခ်င္ပါတယ္။ အခ်ိဳ႕ေသာ ဘေလာ့ေတြမွာ Header Banner ပုံေတြ အခ်ိဳးမက်တာကုိ ေတြ႕ေနရပါတယ္။ ဘာေၾကာင့္လဲဆုိေတာ့ မိမိဘေလာ့ Header ရဲ႕ width နဲ႔ မိမိအစားသြင္းမယ့္ banner ပုံရဲ႕ width တုိ႔ မကုိက္ညီတာေၾကာင့္ပဲျဖစ္ပါတယ္။ ဒါေၾကာင့္ မိမိဘေလာ့ရဲ႕ Header width က 1200px ဆုိရင္ မိမိအစားသြင္းမယ့္/အသုံးျပဳလုိတဲ့ Header image ရဲ႕ width ကုိလည္း 1200px ျဖစ္ေအာင္ photoshop လုိ image editor တစ္ခုခုကုိအသုံးျပဳႏုိင္ၾကပါတယ္။ အားလုံးအဆင္ေျပ ေပ်ာ္ရႊင္ခ်မ္းေျမ့ၾကပါေစခင္ဗ်ာ.......။

Read More