Post Title အား Background Image ထည့္သြင္း ေပးျခင္း

မိမိရဲ႕ Post Title ကုိထင္သာျမင္သာေအာင္၊ ေပၚလြင္ေအာင္ ဆြဲေဆာင္မႈတစ္ခုျပဳလုပ္ရန္ အသြင္ေျပာင္းလဲမႈ တစ္ခုလုိ႔ ထင္မိပါတယ္။

---အဲဒီေတာ့ေအာက္ပါအတုိင္းျပဳလုပ္ၾကည့္ပါ-

(၁)အရင္ဆံုး မိမိအသံုးျပဳမယ့္ Post Title Background Image ကုိအရင္ ဖန္တီးရမွာပါ။ ဒီလုိဖန္တီးတဲ့ ေနရာမွာ Photoshop Software စသည္ျဖင့္ တစ္ခုခုႏွင့္ width 72px, height 29px အေနအထား ရေအာင္ ဖန္တီးလုိက္ပါ။ file type ကေတာ့ .jpg ေပါ့။ (မိမိသံုးျပဳတတ္မႈအေပၚမူတည္ၿပီး file type ကုိေရြးခ်ယ္ အသံုးျပဳႏုိင္ပါတယ္) ျခြင္းခ်က္တစ္ခုအေနနဲ႕ ေျပာခ်င္တာကေတာ့ မိမိအသံုးျပဳထားတဲ့ Post Title Fonts အႀကီး/ အေသး အေနအထား အလုိက္ height pixel (px)ကုိ လုိက္ေျပာင္းေပးရန္ လုိအပ္ပါတယ္။font-size:135%; ရာခုိင္းႏႈန္းအေနထားဆုိရင္ေတာ့ height 29px နဲ႕အေနေတာ္ေလာက္ က်ပါတယ္။ ဒါေပမဲ့ ေနာက္တစ္ခ်က္ စဥ္းစားေပးရဦးမွာကေတာ့ Padding အေနထားပဲျဖစ္ပါတယ္။ Padding အေၾကာင္းကုိေတာ့ ေရွ႕ကေရးခဲ့တဲ့ Post မွာ ေဖာ္ျပထားခဲ့ၿပီး ျဖစ္ပါတယ္။ ဒီအတြက္ကုိေတာ့ေအာက္မွာထပ္ရွင္းျပသြားပါမယ္။

(၂) မိမိအသံုးျပဳလုိခ်င္တဲ့ Image size ရၿပီဆုိရင္ Image Hosting site တစ္ခုခုတြင္ Upload ျပဳလုပ္ေပးရပါမယ္။ Upload ေဆာင္ရြက္ပံုကုိလည္း ေရွ႕ကေရးခဲ့တဲ့ Post မွာေဖာ္ျပထားၿပီးပါၿပီ။ Upload လုပ္ၿပီး ရရွိသည့္ Image URL Link code ကုိ Notepade ထဲခဏသိမ္းလုိက္ပါ။ Image Hosting site အနည္းငယ္ ေဖာ္ျပလုိက္ပါတယ္-

1. http://www.4freeimagehost.com/
2. http://www.imgfreehost.com/
3. http://photobucket.com/
4. http://imajr.com/
5. http://www.imagehostfree.net/

(၃)မိမိ Blog ၏ Dashboard ထဲကုိ၀င္ပါ။
-Layout==>Edit HTML ကုိ၀င္ပါ။

-Browser ၏ Menu bar မွ Edit ေအာက္မွ Find ကုိႏွိပ္ပါ။ သုိ႔မဟုတ္ Keyboard မွ ctrl+F ကုိႏွိပ္လုိက္ပါ။ Find box ေလး ေအာက္ေျခမွာေပၚလာပါလိမ့္မယ္။ ၄င္း find box တြင္ .post h3 ကုိ ရုိက္ထည့္လုိက္ပါ။ အျမန္ ဆံုး ရွာေပးပါလိမ့္မယ္။ (မိမိအသံုးျပဳထားတဲ့ Template အေပၚမူတည္ၿပီး Post Title ဟာ .Post h3 အေနနဲ႕ ရွိမေနဘဲ ေျပာင္းလဲေနတတ္ပါတယ္၊ မ်ားေသာအားျဖင့္ကေတာ့ .Post h3 ေအာက္မွာပဲ ရွိတာမ်ားပါ တယ္)
- ဒီဥပမာ code ဟာ Minima Template မွျဖစ္ပါတယ္-

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-family:trebuchet ms;
font-size:135%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

-ေအာက္ေဖာ္ျပပါ အနီေရာင္ျဖင့္ ျပထားသည္တုိ႔ကုိ ထည့္သြင္း၊ အစားထုိးေဆာင္ရြက္ပါ။ (Image URL) ေနရာ တြင္ မိမိ Upload လုပ္ခဲ့ေသာ Image URL Link code ထည့္သြင္းေပးၿပီး padding ကုိ ေျပာင္းေပး လုိက္ပါ-

.post h3 {
background:url(http://_ _ _ _ .jpg);
margin:.25em 0 0;
padding:0 0 0px;
font-family:'Zawgyi-One',Arial;
font-size:135%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

-ၿပီးရင္ Template save လုပ္ပါ။ မိမိရဲ႕ Post Title ေတြအားလံုးကုိ လုိက္ၾကည့္ပါ။

-တစ္ခ်ိဳ႕ေသာBlog**** ဥပမာ-Rounder Template Style ေတြလုိဆုိရင္ Post Title ရဲ႕ေဘးမွာ ကပ္လ်က္ မွ်ားပံုစံေလးေတြ ထည့္သြင္းေပးထားတာ ေတြ႔ရတတ္ပါတယ္။ Background:url ကုိ no-repeat ဆုိၿပီး code သြင္းထား ပါတယ္။ အျပာေရာင္ျဖင့္ ျပထားသည္မ်ားကုိ ျဖဳတ္လုိက္ပါ။ ဥပမာအေနနဲ႕ေဖာ္ျပလုိက္ပါတယ္-

.post h3 {
margin:0;
line-height:1.5em;
background:url( "http://www2.blogblog.com/rounders3/icon_arrow.gif") no-repeat
10px .5em;
display:block;
border:1px dotted $borderColor;
border-width:0 1px 1px;
padding-top:2px;
padding-$endSide:14px;
padding-bottom:2px;
padding-$startSide:29px;
color: $postTitleColor;
font-family:'Zawgyi-One',Arial;
font-size:135%;
}

-အနီေရာင္ျဖင့္ေဖာ္ျပထားသည္တုိ႔ကုိ ေအာက္ပါအတုိ္င္းျပဳျပင္ေျပာင္းလဲေပးလုိက္ပါ-

.post h3 {
margin:0;
line-height:1.5em;
background:url( "http://_ _ _ _ _ _ .jpg" );
display:block;
border:1px dotted $borderColor;
border-width:0 1px 1px;
padding:0 0 0px;
color: $postTitleColor;
font-family:'Zawgyi-One',Arial;
font-size:135%;
}

(၄)Background Image နဲ႕ Post Title Fonts တုိ႔ အဆင္မေျပဘူးဆုိရင္၊ ဥပမာ-
(က)တကယ္လုိ႔မ်ား မိမိ Post Title Fonts ကႀကီးၿပီး Background Image ကေသးေနမယ္ fit အန္၀င္ဂြင္က် မျဖစ္ဘူး ဆုိရင္ Three Value Padding တြင္ ေနာက္ဆံုး Value ကုိ တုိးေလွ်ာ့ ခ်န္ညွိေပး ရပါမယ္။
( padding: 0 0 15px;)

(ခ)Background Image ကလည္း မိမိဖန္တီးထားတဲ့ Design ထက္ ေက်ာ္လြန္ေနမယ္ ဆုိရင္ (ေသသပ္မႈ မရွိရင္) Padding ၏ ေနာက္ဆံုး Value ကုိေလွ်ာ့ခ် ေပးရပါမယ္။ Padding Value ၏ညႊန္းဆုိမႈတုိ႔ကို ေရးခဲ့ၿပီးေသာ Post တြင္ ဖတ္ၾကည့္ပါ။
အဆင္ေျပပါေစ။

Go To Top