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 တစ်ခုခုကိုအသုံးပြုနိုင်ကြပါတယ်။ အားလုံးအဆင်ပြေ ပျော်ရွှင်ချမ်းမြေ့ကြပါစေခင်ဗျာ.......။

Guest post by - IT-Traveller

အောင်အောင်(မကစ) ရဲ့ ဘလော့ခရီးသည်လေးအား အားပေးနေကြတဲ့အတွက် ကျေးဇူးအထူးတင်ပါတယ်.. တုန့်ပြန်မှုအနေနဲ့ fb like လေးတော့ လုပ်ပေးခဲ့ကြပါနော်.. တတ်စွမ်းသမျှ တွေ့ ရှိသမျှလေးတွေကို ပြန်လည် မျှဝေနေပါ့မယ်...။ အဆင်မပြေတာများရှိခဲ့ပါက...cbox မှာ ပြောခဲ့ကြပါနော်..

<<<မန်ဘာဝင်ပြီး...Fb Like ခြင်းဖြင့် အားပေးကြပါနော်>>>

ဘလော့ခရီးသည်   ပိုင်ဆိုင်သော နေရာလေးများကိုလာလည်ကြပါ။

www.aungsanmks.com 

www.ledimye.blogspot.com 

www.ninilayy.blogspot.com

Blogger နည်းပညာများ,

Rate this posting:

{[['']]}

Posted in: Blogger နည်းပညာများ