Post Title အတြင္း Image (Logo)ထည့္သြင္းျခင္း

မိမိရဲ႕Post ေတြကုိ အလွဆင္ျခင္း တစ္မ်ိဳးေပါ့။ ဒီလုိ အလွဆင္တဲ့ေနရာမွာ မိမိ ကၽြမ္းက်င္ သလုိ ေဆာင္ရြက္ ႏုိင္ပါတယ္။ အခုက်ေနာ္သိတာေလး တစ္ခ်ိဳ႕ကုိပဲ ေျပာျပမွာ ျဖစ္ပါတယ္။ Post Title အတြင္း Image Type အမ်ိဳးမ်ိဳးနဲ႔ Animation gif file တုိ႔ကုိလည္း ထည့္သြင္း အသံုးျပဳႏုိင္ ပါတယ္။ က်ေနာ္အသံုးျပဳတာကေတာ့ .jpg, .gif file type နဲ႔ animation gif file type တုိ႔ကုိ အသံုးျပဳတာ ပုိႏွစ္သက္ပါတယ္။ သံုးလုိ႔ အေကာင္းဆံုးလုိ႔ ထင္မိပါတယ္။ ေအာက္ပါအတုိင္း ေဆာင္ရြက္ၾကည့္ၾကရေအာင္-

-ထည့္သြင္း အသံုးျပဳပံု ကေတာ့(၂)မ်ိဳးရွိပါတယ္။

**Post Title ရဲ႕စာေၾကာင္း အစေနရာမွာ Image ထည့္သြင္း ေပးျခင္းႏွင့္ **Post Title ရဲ႕ေနာက္ခံ background တစ္ခုလံုးကုိ Image ထည့္သြင္းေပးျခင္း တုိ႔ပဲျဖစ္ပါတယ္။

ယခုေတာ့ အရင္ဆံုးတစ္ခုကုိသာ ေဖာ္ျပလုိက္ပါတယ္။ ပညာရွင္မ်ားအတြက္ေတာ့ မျဖစ္စေလာက္မုိ႔ ပညာရွင္မ်ား ဖတ္မိခဲ့ရင္လည္း ဒီထက္ေကာင္းတာ ေလးမ်ားရွိရင္ ျပင္ေပးခဲ့ပါလုိ႔ ပန္ၾကားပါတယ္။

------------------------------------------------------------------------------------------------------------------
Post Title (ေဘး)စာေၾကာင္းအစေနရာမွာ Image ထည့္သြင္းေပးျခင္း။

(၁)ပထမဦးဆံုးျပဳလုပ္ရမွာကေတာ့ မိမိအသံုးျပဳ ထည့္သြင္းလုိသည့္ Image ကုိ Width 20px , Height 20px (သုိ႔မဟုတ္) 25px , 25px ျပဳလုပ္ထားရပါမယ္။ Image type ကေတာ့ .jpg ေပါ့။ ျပဳျပင္လုိ႔ရႏုိင္တဲ့ Software ေတြ အမ်ားႀကီး ရွိပါတယ္။ အေကာင္းဆံုးကေတာ့ Photoshop software ပါ၊ ဒါမွမဟုတ္ အလြယ္ဆံုးကေတာ့ Google's Picasa ပါ။ pixel (px)ေတြကုိ အခုလုိ ေလွ်ာ့ခ်ပစ္ဖုိ႔လုိပါတယ္။ ဒါမွ Post Title စာေၾကာင္းနဲ႔ အေနအထား သင့္ေတာ္မွာျဖစ္ပါတယ္။ တစ္ခ်ိဳ႕ Website ေတြမွာ Post Title fonts ေတြကို ႀကီးႀကီး ေရးတတ္ ၾကပါတယ္။ ဒါဆုိရင္ေတာ့ မိမိ စာလံုးအရြယ္အစား font အေပၚမူတည္ၿပီး px ကို လုိက္ျမွင့္ေပးဖုိ႔ လုိအပ္ပါ လိမ့္မယ္။

(၂)မိမိအသံုးျပဳထည့္သြင္းရန္ျပဳျပင္ထားေသာ Image ကုိ Image Hotsting Site တစ္ခုေပၚမွာ Upload ျပဳလုပ္ရမွာပါ။ Upload လုပ္ၿပီး ၄င္း Hotsting WebSite မွ ထုတ္ေပးေသာ Image Link code ကုိယူၿပီး မိမိ Blogsite မွာသံုးရမွာပါ။ ေအာက္ပါ Free Image Hosting site တစ္ခုအတြင္း Upload ျပဳလုပ္မႈပံုၾကည့္ပါ။ http://www.4freeimagehost.com/ ကုိသြားပါ အလြယ္တကူ အသံုးျပဳခြင့္ ေပးထား ပါတယ္၊ ဒီ့ျပင္ Hosting site မ်ားတြင္လည္း အသံုးျပဳႏုိင္ပါတယ္။

ပံု(၁)

ပံု(၂)

ပံု(၃)

(၃) Image Link code ကုိ Copy လုပ္ၿပီး Notepade ေပၚတြင္ ခဏ Paste လုပ္ထားလုိက္ပါ။
-မိမိ Blog ၏ Dashboard ထဲကုိ၀င္ပါ။
-Layout==>Edit HTML ကုိ၀င္ပါ။
-Browser ၏ Menu bar မွ Edit ေအာက္မွ Find ကုိႏွိပ္ပါ။ သုိ႔မဟုတ္ Keyboard မွ ctrl+F ကုိႏွိပ္လုိက္ပါ။ Find box ေလး ေအာက္ေျခမွာေပၚလာပါလိမ့္မယ္။ ၄င္း find box တြင္ .post h3 ကုိ ရုိက္ထည့္လုိက္ပါ။ အျမန္ဆံုး ရွာေပးပါလိမ့္မယ္။
ေအာက္ေဖာ္ျပပါအတုိင္းေတြ႕ရပါလိမ့္မယ္-

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

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

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

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

-တစ္ခ်ိဳ႕ Blog Template ေတြမွာ ရွိၿပီးသားေတြေတြ႕ရတတ္ပါတယ္။ ဥပမာ-Rounder Template Style ေတြမွာ မွ်ားပံုစံေလးေတြ ထည့္သြင္းေပးထားၿပီးသားျဖစ္ပါတယ္၊ မိမိစိတ္ႀကိဳက္ပံု ထည့္ခ်င္တယ္ဆုိရင္ေတာ့ Image link code ကုိ အစားထုိး ထည့္ေပးလုိက္ၿပီး {margin:.25em 0 0;ႏွင့္ padding ေတြခြဲၿပီး ေဖာ္ျပပါရွိခဲ့ရင္ တစ္ခုတည္းအျဖစ္ padding:0 0 4px 30px; } လုိ႔ ျပင္ေပးလုိက္ရင္ ရပါတယ္။ 30px က left value ျဖစ္ပါတယ္။ ပံုႀကီးရင္ ႀကီးသလုိ လုိက္ျမွင့္ေပးရမွာပါ။

-ဒီေနရာမွ padding အေၾကာင္းကုိ နည္းနည္းေျပာျပခ်င္ပါတယ္၊ အသံုးျပဳလုိ႔ Image အေနအထား အရ ေျပာင္းလဲဖုိ႔ လုိအပ္တဲ့အခါ သံုးရန္သာ ျဖစ္ပါတယ္၊ ဥပမာအေနနဲ႔ ေဖာ္ျပလုိက္ပါတယ္-

.post h3 အတြင္းမွာ
{padding: 10px;} One value အျဖစ္ 10px တစ္ခုတည္းသံုးမယ္ဆုိရင္-
၄င္းဟာ Post Title တစ္ခုလံုးရဲ႕ Padding အတြက္ရည္ညႊန္းပါတယ္။

{padding: 10px 20px;} Two values မွာေတာ့ 10px က top and bottom padding ကုိညႊန္းဆုိၿပီး 20px ကေတာ့ left and right padding အတြက္ ညႊန္းဆုိျခင္းျဖစ္ပါတယ္။

{padding: 10px 20px 30px;} Three values မွာေတာ့ 10px က the top padding အတြက္၊ 20px က the left and right padding အတြက္၊ 30px ကေတာ့ bottom padding အတြက္ ညႊန္းဆုိ ထားျခင္း ျဖစ္ပါတယ္။

{padding: 10px 20px 30px 40px;} Four values မွာေတာ့ 10px က top padding အတြက္၊ 20px က right padding အတြက္၊ 30px က bottom padding အတြက္၊ 40px ကေတာ့ left padding အတြက္ အသီးသီး ညႊန္းဆုိျခင္း ျဖစ္ပါသည္။
အဆင္ေျပပါေစ။