Post title ေနာက္မွာ ပုံေလးေတြ ထည့္ၾကမယ္...

က်ေတာ္ အခု အနည္းငယ္ ျပင္ထားတဲ့ template design မွာ Post title ရဲ႕ ေနာက္မွာ ေနာက္ခံပုံ ကႏုတ္ေလးထည့္ထားပါတယ္... အဲဒါမ်ဳိး ပုံေတြကို ထည့္ခ်င္တယ္ ဆုိရင္...
ပထမဆုံး လုပ္ရမွာက post title ေနာက္မွာ ထည့္မယ့္ ပုံကို အရင္ ဖန္တီးထားပါ... ဖန္တီးထားတဲ့ ပုံကို internet ေပၚက ပုံတင္တဲ့ site တစ္ခုခုေပၚတင္ပါ... ရလာတဲ့ URL ADDRESS ကို မွတ္ထားပါ... ၿပီးရင္ blogspot ရဲ႕ template ျပင္တဲ့ထဲ Edit HTML နဲ႔ဝင္ၿပီး post h3 ကိုရွာပါ... post h3 ရဲ႕ css code ထဲမွာ ေအာက္က ေဖာ္ျပတဲ့ စာေၾကာင္းေလး ကုိ ထပ္ထည့္ေပးပါ...

background-image: url( URL ADDRESS );

ဥပမာ မူရင္းရွိေနတဲ့ post h3 ရဲ႕ css code က ေအာက္က အတုိင္း ဆုိပါေတာ့....

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:#ffcc66;
}

အဲဒီ code ေတြထဲကို post title ရဲ႕ ေနာက္မွာ ပုံေပၚမယ့္ css code ထည့္ျဖည့္ထားပါတယ္... ေအာက္မွာ နမူနာ ၾကည့္ပါ...

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:#ffcc66;
background-image: url( URL ADDRESS );
}

သုံးထားတဲ့ template ေပၚမူတည္ၿပီး post title ဟာ .post h3 မဟုတ္ဘဲ အျခားဟာမ်ားလဲ ျဖစ္ႏုိင္ပါတယ္...

ရက္စြဲကို လည္း က်ေတာ္ တပ္ထားတဲ့ အတုိင္း လုပ္ခ်င္တယ္ဆုိရင္...
ရက္စြဲေနာက္မွာ ခံခ်င္တဲ့ ပုံကို အရင္ ဖန္တီးပါ... ဖန္တီးထားတဲ့ ပုံကို internet ေပၚက ပုံတင္တဲ့ site တစ္ခုခုေပၚတင္ပါ... ရလာတဲ့ URL ADDRESS ကို မွတ္ထားပါ... ၿပီးရင္ blogspot ရဲ႕ template ျပင္တဲ့ထဲ Edit HTML နဲ႔ဝင္ၿပီး h2.date-header ကိုရွာပါ... h2.date-header မူရင္း css code ေတြကို copy ကူးၿပီး သိမ္းထားပါဦး... မူလ css code ေတြ ေနရာမွာ ေအာက္မွာ ေဖာ္ျပထားတဲ့ css code ေတြနဲ႔ အစားထုိးလုိက္ပါ...

h2.date-header {
font-family: "ZawGyi-One", ZawgyiOne, Zawgyi1;
font-size: 10px;
float: right;
width: 56px;
height:48px;
background-image: url( URL ADDRESS );
color: #E6E6E6;
text-align: center;
margin-top: 1em;
margin-right: 1em;
margin-bottom: 1em;
margin-left: 1em;
font-weight: normal;
}

URL ADDRESS ကို ေတာ့ ပုံတင္ထားတဲ့ လိပ္စာေျပာင္းေပးပါ... ဥပမာ မိမိ ပုံတင္ထားတဲ့ URL ADDRESS က http://img210.imagevenue.com/img.php?image=55095_IMG044_122_414lo.JPG ဆုိပါေတာ့...
background-image: url(http://img210.imagevenue.com/img.php?image=55095_IMG044_122_414lo.JPG); လုိ႔ ေျပာင္းေပးပါ...

My Labels: CSS, template, how to