Blog တစ္ခုအတြင္း ေဘာင္ခပ္ျခင္းအေထြေထြ ~ Name Blog

Blog တစ္ခုအတြင္း ေဘာင္ခပ္ျခင္းအေထြေထြ

Thursday 23 July 2015

ဘေလာ့ Template တစ္ခုလံုးကိုပဲျဖစ္ျဖစ္ ဘေလာ့ Template ထဲက Widget တစ္ခုခ်င္းစီကိုပဲျဖစ္ျဖစ္
ကိုယ္ႏွစ္သက္သလို ေဘာင္ခပ္တဲ့ နည္းပညာေလးတစ္ခုကို မွ်ေ၀ေပးခ်င္ပါတယ္ ..
အရင္ဆံုး 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 ေပါ့ ...
ကဲ .. အဆင္ေျပပါေစဗ်ာ

နည္းပညာလမ္းေၾကာင္းေပၚကသူငယ္ခ်င္းအားလံုးကို ေလးစားခင္မင္လွ်က္
အိုင္တီမုဆိုး