Blog ရဲ႕ Label ေတြကို Scrollbar နဲ႔ လုပ္ရေအာင္

ဒီရက္ပိုင္း ကၽြန္ေတာ္ ဘေလာ့ရဲ႕ themes ကို ျပင္ရင္းျပင္ရင္း ပို႔စ္ေကာင္းေကာင္းကို မတင္ျဖစ္ဘူးဗ်ာ..
ကဲ. ဘေလာ့ဂါလက္သစ္ေတြအတြက္ ဘေလာ့ရဲ႕ Label ကို Scrollbar နဲ႔လုပ္နည္း ေျပာျပပါမယ္.. ကၽြန္ေတာ့္ဆိုဒ္မွာ လုပ္ထားတဲ့ ညာဘက္ေအာက္နားက ေခါင္းစဥ္အလိုက္ရွာရန္ ဆိုတာလိုေပါ့ဗ်ာ..

1. Blogger ထဲကို Sign in ၀င္ပါ..
2. Layout ထဲကိုသြားၿပီး Add a Gadget ဆိုတာကိုႏွိပ္လုိက္ပါ..
3.က်လာတဲ့ေဘာက္ထဲမွာ Labels ဆိုတာကိုႏွိပ္ပါ.. က်လာတဲ့ေဘာက္မွာ All Labels,Alphabetically, List ေတြရဲ႕ေဘးက အ၀ိုင္းေလးကို တစ္ခ်က္စီႏွိပ္ေပးထားခဲ့ပါ.. ၿပီးရင္ေတာ့ Save ေပါ့..

Label လုပ္ၿပီးသူမ်ားအေနနဲ႔အထက္ပါအဆင့္ 3 ဆင့္ လုပ္ရန္ မလိုပါ...  ကဲ ဆက္ရေအာင္..

ဒီတစ္ခါ ကုဒ္ထည့္ရမွာျဖစ္ပါတယ္..
1.Template ေအာက္က Edit Template ကိုႏွိပ္ပါ.. Porceed ကိုႏွိပ္ပါ.. Expand Widget Templates ကို အမွန္ျခစ္ခဲ့ဖို႔ မေမ့ပါႏွင့္..
2. Html ထဲကိုေရာက္တဲ့အခါ ကလစ္တစ္ခ်က္ခ်ၿပီး Control+F ကိုႏွိပ္ၿပီး ေပၚလာတဲ့ Search Box ထဲမွာ ေအာက္ပါကုဒ္ကိုထည့္ၿပီး ရွာပါ..

 ]]></b:skin>


3. အဲဒီကုဒ္ကိုေတြ႕ၿပီဆိုရင္ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေတြကို ]]></b:skin> ဆိုတဲ့ကုဒ္ရဲ႕ အေပၚနားေလးမွာ ထည့္ေပးလိုက္ပါ...
ထည့္ရမယ့္ကုဒ္.

#Label1 ul{
max-height:200px;
overflow:auto;
}
#Label1 ul::-webkit-scrollbar {
height:12px;
width: 12px;
background: #333;}
::-webkit-scrollbar-thumb {
background-color: #ccc;
-moz-border-radius: 10px;
border-radius: 10px;
}

ကဲဒါဆိုရင္ ရၿပီ.. အင္း.. အေရာင္ေတြျပင္ခ်င္တယ္ဆိုရင္ေတာ့ အနီေရာင္နဲ႔ ျပထားတဲ့ #333, #ccc ဆိုတာေတြကို ျပင္ႏိုင္ပါတယ္.. အေရာင္ေတြရဲ႕ ကုဒ္အေၾကာင္းမသိရင္ေတာင္. အဆင္သင့္ေပးထားတဲ့အေရာင္နဲ႔ ကုဒ္နဲ႔ တြဲထားတာေတြရွိပါတယ္.. အေပၚေအာက္ အနံကို ေျပာင္းခ်င္တယ္ဆိုရင္ေတာ့ max-height: 200px ဆိုတဲ့ေနရာမွာ 200 အစား ကိုယ္လိုခ်င္သေလာက္ေျပာင္းႏိုင္ပါတယ္..  စမ္းၾကည့္ေပါ့.. လိုခ်င္တာ မရမခ်င္း Template ကို Save မလုပ္ခင္ Preview နဲ႔အရင္ ၾကည့္ေပးပါ.. အိုေကမွ Save လုပ္ပါ.. ကုဒ္အမွားတစ္ခုခုေၾကာင့္ တန္းပလိတ္က အလုပ္မလုပ္ေတာ့ရင္ Clear Edit လုပ္လိုက္ပါ.. 
ကဲ.. အဆင္ေျပၾကပါေစ..

ေမာင္ေပါက္
ဒီရက္ပိုင္း ကၽြန္ေတာ္ ဘေလာ့ရဲ႕ themes ကို ျပင္ရင္းျပင္ရင္း ပို႔စ္ေကာင္းေကာင္းကို မတင္ျဖစ္ဘူးဗ်ာ..
ကဲ. ဘေလာ့ဂါလက္သစ္ေတြအတြက္ ဘေလာ့ရဲ႕ Label ကို Scrollbar နဲ႔လုပ္နည္း ေျပာျပပါမယ္.. ကၽြန္ေတာ့္ဆိုဒ္မွာ လုပ္ထားတဲ့ ညာဘက္ေအာက္နားက ေခါင္းစဥ္အလိုက္ရွာရန္ ဆိုတာလိုေပါ့ဗ်ာ..

1. Blogger ထဲကို Sign in ၀င္ပါ..
2. Layout ထဲကိုသြားၿပီး Add a Gadget ဆိုတာကိုႏွိပ္လုိက္ပါ..
3.က်လာတဲ့ေဘာက္ထဲမွာ Labels ဆိုတာကိုႏွိပ္ပါ.. က်လာတဲ့ေဘာက္မွာ All Labels,Alphabetically, List ေတြရဲ႕ေဘးက အ၀ိုင္းေလးကို တစ္ခ်က္စီႏွိပ္ေပးထားခဲ့ပါ.. ၿပီးရင္ေတာ့ Save ေပါ့..

Label လုပ္ၿပီးသူမ်ားအေနနဲ႔အထက္ပါအဆင့္ 3 ဆင့္ လုပ္ရန္ မလိုပါ...  ကဲ ဆက္ရေအာင္..

ဒီတစ္ခါ ကုဒ္ထည့္ရမွာျဖစ္ပါတယ္..
1.Template ေအာက္က Edit Template ကိုႏွိပ္ပါ.. Porceed ကိုႏွိပ္ပါ.. Expand Widget Templates ကို အမွန္ျခစ္ခဲ့ဖို႔ မေမ့ပါႏွင့္..
2. Html ထဲကိုေရာက္တဲ့အခါ ကလစ္တစ္ခ်က္ခ်ၿပီး Control+F ကိုႏွိပ္ၿပီး ေပၚလာတဲ့ Search Box ထဲမွာ ေအာက္ပါကုဒ္ကိုထည့္ၿပီး ရွာပါ..

 ]]></b:skin>


3. အဲဒီကုဒ္ကိုေတြ႕ၿပီဆိုရင္ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေတြကို ]]></b:skin> ဆိုတဲ့ကုဒ္ရဲ႕ အေပၚနားေလးမွာ ထည့္ေပးလိုက္ပါ...
ထည့္ရမယ့္ကုဒ္.

#Label1 ul{
max-height:200px;
overflow:auto;
}
#Label1 ul::-webkit-scrollbar {
height:12px;
width: 12px;
background: #333;}
::-webkit-scrollbar-thumb {
background-color: #ccc;
-moz-border-radius: 10px;
border-radius: 10px;
}

ကဲဒါဆိုရင္ ရၿပီ.. အင္း.. အေရာင္ေတြျပင္ခ်င္တယ္ဆိုရင္ေတာ့ အနီေရာင္နဲ႔ ျပထားတဲ့ #333, #ccc ဆိုတာေတြကို ျပင္ႏိုင္ပါတယ္.. အေရာင္ေတြရဲ႕ ကုဒ္အေၾကာင္းမသိရင္ေတာင္. အဆင္သင့္ေပးထားတဲ့အေရာင္နဲ႔ ကုဒ္နဲ႔ တြဲထားတာေတြရွိပါတယ္.. အေပၚေအာက္ အနံကို ေျပာင္းခ်င္တယ္ဆိုရင္ေတာ့ max-height: 200px ဆိုတဲ့ေနရာမွာ 200 အစား ကိုယ္လိုခ်င္သေလာက္ေျပာင္းႏိုင္ပါတယ္..  စမ္းၾကည့္ေပါ့.. လိုခ်င္တာ မရမခ်င္း Template ကို Save မလုပ္ခင္ Preview နဲ႔အရင္ ၾကည့္ေပးပါ.. အိုေကမွ Save လုပ္ပါ.. ကုဒ္အမွားတစ္ခုခုေၾကာင့္ တန္းပလိတ္က အလုပ္မလုပ္ေတာ့ရင္ Clear Edit လုပ္လိုက္ပါ.. 
ကဲ.. အဆင္ေျပၾကပါေစ..

ေမာင္ေပါက္

Read More