10:00 AM
Nyi Nay Min
ဘလော့ Template တစ်ခုလုံးကိုပဲဖြစ်ဖြစ် ဘလော့ Template ထဲက Widget တစ်ခုချင်းစီကိုပဲဖြစ်ဖြစ်
ကိုယ်နှစ်သက်သလို ဘောင်ခပ်တဲ့ နည်းပညာလေးတစ်ခုကို မျှဝေပေးချင်ပါတယ် ..
အရင်ဆုံး Template ကြီး တစ်ခုလုံးကို ဘောင်ခပ်တဲ့နည်းကို မျှဝေပေးပါ့မယ်
ဒီနည်းရဲ့ နမူနာ ( Demo ) ကို ကြည့်ချင်တယ်ဆိုရင်တော့ ကျွန်တော်အခုသုံးထားတဲ့ Template ကြီးတစ်ခုလုံးရဲ့ ဘေးပတ်ပတ်လည်မှာခပ်ထားတဲ့ ဘောင်ကိုသာ ကြည့်လိုက်ကြပါလို့ ..
ကဲ .. အရင်ဆုံး Blogger ကို Lon in ဝင်လိုက်ပါ ..
ပြီးရင် Template က နေ Edit HTML ကို ဝင်ပါ
HTML ကုဒ်တွေထဲက ]]></b:skin> ကို လိုက်ရှာပါ ...
တွေ့ပြီဆိုရင် အဲဒီ ]]></b:skin> ရဲ့ အပေါ်မှာ အောက်ကကုဒ်တွေကို ကော်ပီကူးပြီး ထည့်ပေးလိုက်ပါ
အဲဒီကုဒ်တွေထဲက ကျွန်တော် အနီရောင်နဲ့ ပြထားတဲ့နေရာမှာ ကိုယ်နှစ်သက်တဲ့ အရောင်ကုဒ်ကို ပြောင်းလဲပေးနိုင်သလို Border ရဲ့ အထူအပါးကိုလည်း 15px, 15px, 10px စတဲ့နေရာတွေမှာ လိုက်ပြီး ချိန်ညှိပေးနိုင်ပါသေးတယ်
ပြီးရင် <body> ကို ထပ်ရှာပါ ..
တွေ့ပြီဆိုရင် အဲဒီ <body> ရဲ့ အောက်မှာ
အဲဒီကုဒ်ကို ကူးထည့်လိုက်ပါ
ပြီးရင် </body> ကို ထပ်ရှာပါ ..
တွေ့ပြီဆိုရင် အဲဒီ </body> ရဲ့ အပေါ်မှာ</div> ဆိုတဲ့ကုဒ်ကို ထည့်ပေးလိုက်ပါ
အပေါ်မှာထည့်တာ အောက်မှာထည့်တာတွေကို သေချာ ဂရုစိုက်ပေးစေချင်ပါတယ်
Preview Template ကနေ ဘလော့ကို ကြည့်လို့ အဆင်ပြေသွားပြီဆိုရင်တော့
Save Template ကို နှိပ်လိုက်ရုံပါပဲ ...
ဒါဆိုရင်တော့ Template ကြီးတစ်ခုလုံးကို ဘောင်ခပ်လို့ ပြီးသွားပါပြီ ..
နောက်တစ်နည်းကတော့ Template ထဲမှာ ရှိတဲ့ Widget တစ်ခုချင်းစီကို ဘောင်ခပ်မယ်ပေါ့
အရင်ဆုံး ကိုယ်ဘောင်ခပ်ချင်တဲ့ Widget ID ကို သိအောင်လုပ်ထားပါ ..
ဥပမာ .. Post ရဲ့ Widget ID ကို သိချင်တယ်ပေါ့ .. Layout ကနေ အဲဒီ Post ရဲ့ ညာဖက်အောက်ဒေါင့်က Edit ကိုနှိပ်လိုက်ရင် ပွင့်လာတဲ့ ဝင်းဒိုးအသေးလေးရဲက Address bar ထဲမှာ Widget ID ကို ရှာလို့ရပါတယ် .. Template ထဲမှာ ရှာတတ်ရင်လည်း ရပါတယ် ..
များသောအားဖြင့်တော့ Post ရဲ့ Widget ID က Blog1 ဖြစ်နေလေ့ရှိပါတယ် ..
ကဲ .. အဲဒီ Post တွေကို ဘောင်ခပ်တော့မယ်ပေါ့ဗျာ ..
Template က နေ Edit HTML ကို သွားလိုက်မယ်ပေါ့
HTML ကုဒ်တွေထဲက ]]></b:skin> ကို လိုက်ရှာပါ ..
တွေ့ပြီဆိုရင် သူ့ရဲ့ အပေါ်မှာ အောက်ကကုဒ်တွေကို ကော်ပီကူးပြီး ထည့်ပေးလိုက်ပါ
ကုဒ်တွေထဲက #ff0000 ကတော့ ကိုယ် ဘောင်အဖြစ်ခပ်မယ့် အရောင်ပေါ့ ..
ကုဒ်တွေထဲမှာ အနီရောင်နဲ့ပြထားတဲ့ YourWidgetID ဆိုတဲ့နေရာမှာ ကိုယ် ဘောင်ခပ်ချင်တဲ့ Widget ရဲ့ ID ကို ထည့်ပေးရမှာပါ
ဥပမာ .. ကျွန်တော်က Post တွေကို ဘောင်ခပ်ချင်တယ်ဆိုပါတော့ Post ရဲ့ ID က Blog1 ဆိုပါတော့
ကုဒ်က ဒီလိုဖြစ်သွားမယ်
#Blog1 {
padding: 5px;
border: 1px solid #ff0000;
}
ပြီးရင်တော့ Save Template ပေါ့ ...
ကဲ .. အဆင်ပြေပါစေဗျာ
နည်းပညာလမ်းကြောင်းပေါ်ကသူငယ်ချင်းအားလုံးကို လေးစားခင်မင်လျှက်
အိုင်တီမုဆိုး
ကိုယ်နှစ်သက်သလို ဘောင်ခပ်တဲ့ နည်းပညာလေးတစ်ခုကို မျှဝေပေးချင်ပါတယ် ..
အရင်ဆုံး Template ကြီး တစ်ခုလုံးကို ဘောင်ခပ်တဲ့နည်းကို မျှဝေပေးပါ့မယ်
ဒီနည်းရဲ့ နမူနာ ( Demo ) ကို ကြည့်ချင်တယ်ဆိုရင်တော့ ကျွန်တော်အခုသုံးထားတဲ့ Template ကြီးတစ်ခုလုံးရဲ့ ဘေးပတ်ပတ်လည်မှာခပ်ထားတဲ့ ဘောင်ကိုသာ ကြည့်လိုက်ကြပါလို့ ..
ကဲ .. အရင်ဆုံး Blogger ကို Lon in ဝင်လိုက်ပါ ..
ပြီးရင် Template က နေ Edit HTML ကို ဝင်ပါ
HTML ကုဒ်တွေထဲက ]]></b:skin> ကို လိုက်ရှာပါ ...
တွေ့ပြီဆိုရင် အဲဒီ ]]></b:skin> ရဲ့ အပေါ်မှာ အောက်ကကုဒ်တွေကို ကော်ပီကူးပြီး ထည့်ပေးလိုက်ပါ
#mblwrap { background: #Ffffff; width: 960px; margin: 10px auto 5px auto; padding: 0; position: relative; border-right: 15px solid #333; border-left: 15px solid #333; border-top: 10px solid #333; border-bottom: 15px solid #333; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; box-shadow: #333 0px 1px 3px; } |
အဲဒီကုဒ်တွေထဲက ကျွန်တော် အနီရောင်နဲ့ ပြထားတဲ့နေရာမှာ ကိုယ်နှစ်သက်တဲ့ အရောင်ကုဒ်ကို ပြောင်းလဲပေးနိုင်သလို Border ရဲ့ အထူအပါးကိုလည်း 15px, 15px, 10px စတဲ့နေရာတွေမှာ လိုက်ပြီး ချိန်ညှိပေးနိုင်ပါသေးတယ်
ပြီးရင် <body> ကို ထပ်ရှာပါ ..
တွေ့ပြီဆိုရင် အဲဒီ <body> ရဲ့ အောက်မှာ
အဲဒီကုဒ်ကို ကူးထည့်လိုက်ပါ
ပြီးရင် </body> ကို ထပ်ရှာပါ ..
တွေ့ပြီဆိုရင် အဲဒီ </body> ရဲ့ အပေါ်မှာ</div> ဆိုတဲ့ကုဒ်ကို ထည့်ပေးလိုက်ပါ
အပေါ်မှာထည့်တာ အောက်မှာထည့်တာတွေကို သေချာ ဂရုစိုက်ပေးစေချင်ပါတယ်
Preview Template ကနေ ဘလော့ကို ကြည့်လို့ အဆင်ပြေသွားပြီဆိုရင်တော့
Save Template ကို နှိပ်လိုက်ရုံပါပဲ ...
ဒါဆိုရင်တော့ Template ကြီးတစ်ခုလုံးကို ဘောင်ခပ်လို့ ပြီးသွားပါပြီ ..
နောက်တစ်နည်းကတော့ Template ထဲမှာ ရှိတဲ့ Widget တစ်ခုချင်းစီကို ဘောင်ခပ်မယ်ပေါ့
အရင်ဆုံး ကိုယ်ဘောင်ခပ်ချင်တဲ့ Widget ID ကို သိအောင်လုပ်ထားပါ ..
ဥပမာ .. Post ရဲ့ Widget ID ကို သိချင်တယ်ပေါ့ .. Layout ကနေ အဲဒီ Post ရဲ့ ညာဖက်အောက်ဒေါင့်က Edit ကိုနှိပ်လိုက်ရင် ပွင့်လာတဲ့ ဝင်းဒိုးအသေးလေးရဲက Address bar ထဲမှာ Widget ID ကို ရှာလို့ရပါတယ် .. Template ထဲမှာ ရှာတတ်ရင်လည်း ရပါတယ် ..
များသောအားဖြင့်တော့ Post ရဲ့ Widget ID က Blog1 ဖြစ်နေလေ့ရှိပါတယ် ..
ကဲ .. အဲဒီ Post တွေကို ဘောင်ခပ်တော့မယ်ပေါ့ဗျာ ..
Template က နေ Edit HTML ကို သွားလိုက်မယ်ပေါ့
HTML ကုဒ်တွေထဲက ]]></b:skin> ကို လိုက်ရှာပါ ..
တွေ့ပြီဆိုရင် သူ့ရဲ့ အပေါ်မှာ အောက်ကကုဒ်တွေကို ကော်ပီကူးပြီး ထည့်ပေးလိုက်ပါ
#YourWidgetID { padding: 5px; border: 1px solid #ff0000; } |
ကုဒ်တွေထဲက #ff0000 ကတော့ ကိုယ် ဘောင်အဖြစ်ခပ်မယ့် အရောင်ပေါ့ ..
ကုဒ်တွေထဲမှာ အနီရောင်နဲ့ပြထားတဲ့ YourWidgetID ဆိုတဲ့နေရာမှာ ကိုယ် ဘောင်ခပ်ချင်တဲ့ Widget ရဲ့ ID ကို ထည့်ပေးရမှာပါ
ဥပမာ .. ကျွန်တော်က Post တွေကို ဘောင်ခပ်ချင်တယ်ဆိုပါတော့ Post ရဲ့ ID က Blog1 ဆိုပါတော့
ကုဒ်က ဒီလိုဖြစ်သွားမယ်
#Blog1 {
padding: 5px;
border: 1px solid #ff0000;
}
ပြီးရင်တော့ Save Template ပေါ့ ...
ကဲ .. အဆင်ပြေပါစေဗျာ
နည်းပညာလမ်းကြောင်းပေါ်ကသူငယ်ချင်းအားလုံးကို လေးစားခင်မင်လျှက်
အိုင်တီမုဆိုး
{[['
']]}
']]}
Posted in: Blogger နည်းပညာများ
0 comments:
Post a Comment