Home » BLOGဆိုင္ရာမ်ား » WEBဆိုင္ရာမ်ား » နည္းလမ္မ်ား » Blog တစ္ခုအတြင္း ေဘာင္ခပ္ျခင္းအေထြေထြ

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

, , December 17, 2017 No comments


ဘေလာ့ 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> ရဲ႕ ေအာက္မွာ

<div id='mblwrap'>  
အဲဒီကုဒ္ကို ကူးထည့္လိုက္ပါ

ၿပီးရင္ </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 ေပါ့ ...
ကဲ .. အဆင္ေျပပါေစဗ်ာ

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

Credit = မူရင္းဆရာ

( ::::: ပိုစ့္တင္သူ-ေခ်ာကိုကို ::::: )

ကၽြန္ေတာ္တင္သမွ် Post ေတြကို Facebook မွ တုိက္ရုိက္ဖတ္ရႈလို႔ပါက >> 
နည္းပညာႏွင့္ေဆာ့ဝဲလ္မ်ား Page ကိုႏွိပ္ျပီး Like လုပ္ထားေပးပါ၊၊ 


႐ိုး႐ွင္​း​ေသာနည္​းပညာမ်ားကို ဆန္​းသစ္​စြာတင္​ဆက္​မည္​။

အားလံုးကိုခင္​မင္​လ်ွက္​။
Admin & CKK - နည္​းပညာ
Blog တစ္ခုအတြင္း ေဘာင္ခပ္ျခင္းအေထြေထြ Title : Blog တစ္ခုအတြင္း ေဘာင္ခပ္ျခင္းအေထြေထြ
Description : ဘေလာ့ Template တစ္ခုလံုးကိုပဲျဖစ္ျဖစ္ ဘေလာ့ Template ထဲက Widget တစ္ခုခ်င္းစီကိုပဲျဖစ္ျဖစ္ ကိုယ္ႏွစ္သက္သလို ေဘာင္ခပ္တဲ့ နည္းပညာေလးတစ္ခ...
Rating : 5
အမ်ိဳးအစား , ,

Post a Comment



လာေရာက္လည္ပတ္သူအားလံုးကို CKK-နည္းပညာ မွ အထူးေက်းဇူးတင္ရိွပါတယ္ခင္ဗ်ာ....


မန္ဘာဝင္ေရာက္အားေပးပါေနာ္

မဂၤလာပါေနာ္ Link ေသေနတာေတြ႕ရင္စာခ်န္ခဲ့ေပးပါေနာ္ ။ အခုလိုလာေရာက္ဖတ္႐ွဳ႕ေပးတဲ့အတြက္​ အထူးေက်းဇူးတင္ရွိပါသည္။ CKK - နည္းပညာ ၊ ရိုးရွင္းေသာနည္းပညာမ်ားကို ဆန္းသစ္စြာတင္ဆက္မည္ ။
/ / / / Blog တစ္ခုအတြင္း ေဘာင္ခပ္ျခင္းအေထြေထြ

Posted by Unknown December 17, 2017 0



ဘေလာ့ 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> ရဲ႕ ေအာက္မွာ

<div id='mblwrap'>  
အဲဒီကုဒ္ကို ကူးထည့္လိုက္ပါ

ၿပီးရင္ </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 ေပါ့ ...
ကဲ .. အဆင္ေျပပါေစဗ်ာ

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

Credit = မူရင္းဆရာ

( ::::: ပိုစ့္တင္သူ-ေခ်ာကိုကို ::::: )

ကၽြန္ေတာ္တင္သမွ် Post ေတြကို Facebook မွ တုိက္ရုိက္ဖတ္ရႈလို႔ပါက >> 
နည္းပညာႏွင့္ေဆာ့ဝဲလ္မ်ား Page ကိုႏွိပ္ျပီး Like လုပ္ထားေပးပါ၊၊ 


႐ိုး႐ွင္​း​ေသာနည္​းပညာမ်ားကို ဆန္​းသစ္​စြာတင္​ဆက္​မည္​။

အားလံုးကိုခင္​မင္​လ်ွက္​။
Admin & CKK - နည္​းပညာ

Tagged with:

«
Next

Newer Post

»
Previous

Older Post

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.

No comments :

Leave a Reply

Subscribe to: Post Comments ( Atom )
back to top