blogger မွာ css ကုဒ္ေလးေတြကစားၾကမယ္

ပံု(၁) မူလပံုစံ အတိုင္း

ပံု(၂)

ပံု(၃)

ဒီတစ္ခါေတာ blogger မွာ css ကုဒ္ေလးေတြ ကစားၾကည့္ၾကမယ္ေလ။ သိတဲ့သူငယ္ခ်င္းေတြ ေက်ာ္ဖတ္ေပးပါ။ က်ေနာ္ အခုေျပာခ်င္တာေလးက blogger မွာ css code ေလးေတြႏွင့္ ပံုေလးေတြကို ဒီဇိုင္းေလးေတြ ေျပာင္းျပီး ကစားၾကည့္တာ ကိုေျပာျပခ်င္ပါတယ္။ အရင္ကလဲ css ႏွင့္ ပံုေလးေတြ တင္တဲ့ နည္းေလးေတြကို ေျပာခဲ့ပါတယ္...။ အခုေျပာမယ္ နည္းလမ္းေလးကေတာ့ ပံုေလးေတြကို rounded ေလးေတြ လုပ္တဲ့ နည္းေလးေတြပါ။

က်ေနာ္တို႔ blogger မွာ css ကုဒ္ေတြကို ထည့္တဲ့ အခါ ေနရာကို သတ္မွတ္ထားလို႔ ရပါတယ္။

Css လို႔ ျမင္လိုက္တာနဲ႔ [></:b:skin> အေပၚက ထည့္ရမယ္ဆိုတာ နားလည္ျပီးသားျဖစ္မယ္လို႔ ေမွ်ာ္လင့္ပါတယ္။ ဒါမွ မဟုတ္ရင္လဲ Template>>Customize>>Add Css>>Add Custom Css မွာ ထည့္ရပါမယ္။ ျပီးရင္ေတာ့ Css code ကို Posting ပိုင္းမွာ ခ်ိတ္ဆက္မိေအာင္ <div class="CSS name"> ဆိုျပီး ခ်ိတ္ဆက္ရပါမယ္။ ကိုယ္ဖာသာ css code ေလးေတြ ကို ဆက္ျပီး ကလိႏိုင္ေအာင္ က်ေနာ္ သိသေလာက္လဲ ပဲ ေျပာျပတာပါ။ ျပည့္စံုမႈ ရွိမ်ာ မဟုတ္ပါ။ ဆရာမ်ားအေနႏွင့္လဲ အျပဳသေဘာျဖင့္ ဝင္ေရာက္ေဆြးေႏြးေပးေစလိုပါတယ္။

ေအာက္မွာ css code ေလးေတြ ေပးလိုက္ပါတယ္။ ဒါကေတာ့ ပံု(img) ေလးရဲ႕ အနားစြန္းေလး(corners) ေတြကို Rounded လုပ္မွာ ျဖစ္လို႔  .roundedcorners img လို႔ေပးထားလိုက္ပါတယ္။

ပံု(၂) ကို သံုးထားေသာကုဒ္

.roundedcorners2 img {
border: 2px solid #BADA55;
margin: 0;
padding: 0;
border-radius: 45px;
-moz-border-radius: 45px;
}

ပံု(၃)ကို ကစာထားေသာ ကုဒ္

.roundedcorners img {
border: 2px solid #BADA55;
margin: 0;
padding: 0;
border-radius: 900px;
-moz-border-radius: 900px;
}

ဒီေနရာမွာ က်ေနာ္တို႔ ကစားႏိုင္တာေတြကေတာ့
border: 2px solid #BADA55;
margin: 0;
padding: 0;
border-radius: 900px;
-moz-border-radius: 900px;
ေတြမွာ px (Pixel) ေတြကို ကိုလိုခ်င္သလို ေျပာင္းျပီးကစားႏိုင္ပါတယ္။ D အပိုင္းကေတာ့ css ပိုင္းမွာ ကိုယ္သလို ေျပာင္းျပီး Template ကို Save လိုက္ပါ။
ေနာက္အပိုင္းကေတာ့ က်ေနာ္တို႔ Post တင္ရာမွာ ျပင္ဆင္ရမွာပါ။
မိမိ Post တင္ရာမွာ ဒီလိုမ်ိဳး ပံုေလးေတြကို ဒီဇိုင္ႏွင့္ တင္မယ္ဆိုရင္ေတာ့ Setting>>Post and Comment>> Comment Form Message ဆိုတာမွာ အျမဲ သံုးလို႔ ရေအာင္ထည့္ထားလို႔ ရပါတယ္။
ေအာက္က code ေလးေတြကိုေပါ့။ ေအာက္မွာ က်ေနာ္ စမ္းေရးျပပါမယ္။
Post တင္ရာမွာ HTML ကို ေရြးပါမယ္။


<div class="roundedcorners"><img src="ပံု၏URL ကို ထည့္ပါ"/></div>

<div class="roundedcorners2"><img src="ပံု၏URL ကို ထည့္ပါ"/></div>
လို႔ ေရးရင္ က်ေနာ္ ဒီပို႔စ္မွာ တင္ထားတဲ့ ပံုေလးေတြ လို မိမိ၏ Post မွာ ျမင္ေတြ႕ႏိုင္မွာ ျဖစ္ပါတယ္ ခင္ဗ်ာ။
အားလံုးပဲ အဆင္ေျပမယ့္ေမွ်ာ္လင့္ပါတယ္ အဆင္ မေျပတာေလးေတြ ရွိပါက ေကာ့မက္ေရးထားခဲ့ေပးပါ။ က်ေနာ္ သိသေလာက္ေလးကို အစြမ္းကုန္ေျပာျပပါမယ္ခင္ဗ်ာ။ ေပ်ာ္ရႊင္ခ်မ္းေျမ့ၾကပါေစ။