Tuesday, 8 October 2013

Blog Post ေလးေတြကုိ တစ္ခုနဲ႔တစ္ခုပိုင္းျခားထားနည္း

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

၁။    ပထမဦးစြာ..မိမိတုိ႔အသုံးျပဳလုိတဲ့ Divider ပုံေလးေတြကုိ ဖန္းတီး/ရွာေဖြထားဖုိ႔လုိပါမယ္။ Photoshop ကၽြမ္းက်င္သူေတြအေနနဲ႔ကေတာ့ အလြယ္တကူဖန္တီးႏုိင္ၾကမွာပါ။ မလုပ္တတ္ၾကရင္လည္း ကိစၥမရွိ.. ေအာက္ကေပးထားတဲ့ ပုံေလးေတြထဲက ႏွစ္သက္ရာတစ္ခုကုိ ေဒါင္းလုပ္ယူၿပီး File Hosting Site တစ္ခုခု (Picasa, Photobucket) တုိ႔တြင္ Upload တင္ထားလုိက္ပါ။


၂။     အခုအေပၚမွာ ေပးထားတဲ့ ပုံေလးေတြရဲ႕ width က 650px ပဲရွိပါတယ္။ ဒါေၾကာင့္ မိမိရဲ႕ Blog Post width က ဘယ္ေလာက္ရွိလဲဆုိတာကုိ သိဖုိ႔လုိအပ္လာပါတယ္။ Blogger ကုိ Sign In လုပ္ၿပီး Layout က Edit HTML ကုိသြားပါ။ ေအာက္ကပုံအတုိင္း Blog Post Width (Main Wrapper) ကုိ ၾကည့္ရႈႏုိင္ပါတယ္။
 

၃။   အေပၚမွာ ၀ုိင္းျပထားတဲ့ေနရာကေတာ့ မိမိ post ရဲ႕အတုိ္င္းအတာ(pixel) ကုိျပတာပဲျဖစ္ပါတယ္။ အဲဒီအတုိင္းအတာနဲ႔တူေအာင္ မိမိရဲ႕ Divider ပုံေလးေတြကုိလည္း adjust လုပ္ဖုိ႔လုိပါတယ္။ Divider ပုံေလးေတြကုိ Photobucket မွာ Upload တင္မယ္ဆုိရင္ေတာ့ ေအာက္မွာျပထားတဲ့အတုိင္း Edit ကုိ Click လုပ္ၿပီး Resize လုပ္ျခင္းျဖင့္ Image Size ကုိ adjust လုပ္ႏုိင္ပါတယ္။ photoshop အသုံးျပဳတတ္သူေတြအတြက္ကေတာ့ အထူးေျပာစရာမလုိပါ။


၄။    အခုေျပာမယ့္အဆင့္ကေတာ့ သိပ္အခက္ႀကီးမဟုတ္ေပမယ့္.သတိထားဖုိ႔ေတာ့လုိပါမယ္။ Layout -->Edit Html ကုိသြားၿပီး မိမိရဲ႕ Template ကုိ Backup လုပ္ထားလုိက္ပါ။ ဒါမွ တစ္ခုခုမွားယြင္းခဲ့ရင္. မိမိရဲ႕ ဘေလာ့ဂ္ေလး မပ်က္စီးေတာ့ဘူးေပါ့။ ၿပီးရင္ ေအာက္မွာ ၀ုိင္းျပထားတဲ့ Code ေလးကုိ ေတြ႕ေအာင္ရွာပါ။ Ctrl+F နဲ႔လည္းရွာႏုိင္ပါတယ္။

၅။      ေတြ႕ၿပီဆိုရင္ အေပၚက Code ေလးကုိဖ်က္ပစ္ၿပီး ေအာက္က Code ေလးေတြကုိ အစားသြင္းလုိက္ပါ

.post {
background: url(http://DIVIDERADDRESS.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:5.5em;
}

၆။      ဒါဆုိရင္ ေအာက္က ပုံအတုိင္း Code ေလးကုိ အစားသြင္းၿပီးသားျဖစ္သြားပါလိမ့္မယ္။

၇။   အခု ေနာက္ဆုံးအဆင့္ကုိေရာက္ပါၿပီ။ အေပၚကပုံမွာ Highlight လုပ္ထားတဲ့ေနရာကုိ မိမိ Upload တင္ထားတဲ့ Divider Image ရဲ႕ URL ကုိ အစားသြင္းေပးလုိက္ပါ။ မိမိရဲ႕ Template ကုိ Save မလုပ္ခင္ အရင္ Preview ၾကည့္လုိက္ပါအုံး။ OK တယ္ဆုိမွ Save လုပ္ပါ။ 


အဆင္ေျပပါေစဗ်ာ....အားလံုးကိုရိုေသေလးစားလွ်က္.........ဧရာအေနာက္လူငယ္

0 comments:

Post a Comment

    Antiviurs Offline Update Free Download


    website counter
    ဒီေနရာေလးမွာမန္ဘာ၀င္ေပးပါလို႔ဖိတ္ေခၚပါတယ္ခင္ဗ်ာ.....

    Followers