တန္းပလိတ္ေလးလွေအာင္

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

အခုေျပာျပမဲ့နည္းေလးကေတာ့ ဘေလာ့ ေဘးက ေခါင္းစဥ္ေတြ ပ်က္စီးမသြားပဲ ေနာက္ခံအိမ္ေလးေတြပဲေျပာင္းတဲ့နည္းပါ...။ အဲလို ေျပာင္းႏုိင္ဖို ့ကို အတည္တက် တန္းပလိတ္ေလးတခုကို ေရြးခ်ယ္ရပါမယ္।။ျပီးမွ သာ မိမိႏွစ္သက္ရာ ေနာက္ခံေတြကို အခ်ိန္မေရြး အလြယ္တကူ ေျပာင္းလို ့ရပါမယ္...။ပထမဆံုးစမ္းသပ္တဲ့အခ်ိန္မွာ မိမိ အသံုးျပဳေနတဲ့ ဘေလာ့မဟုတ္ပဲ...တျခားဘေလာ့တခုနဲ ့အရင္စမ္းသပ္ေစခ်င္ပါတယ္။ .ကဲ layout ကေန တန္းပလိတ္တခုကို ယူထားရေအာင္ေနာ္

အဆင့္ဆင့္သြားပါ
1...loggin
2...customize
3...layout
4...Pick New template

နံပါတ္ ၄ ကို ေရာက္ရင္ တန္းပလိတ္ေတြေပၚလာပါလိမ့္မယ္...အဲထဲက ေရွ ့ဆံုးက ေရ ရင္ နံပါတ္ ၉ ေျမာက္မွာရွိတဲ့ တန္းပလိတ္ေလးက thisway ဆိုတာေလးကို မွတ္ျပီး save template လုပ္လုိက္ပါ...။

ျပီးရင္ layout ကိုျပန္သြားျပီး

6...Edit HTML ဆိုတဲ့ေနရာေလးကို သြားလုိက္ပါ...။

ပထမဆံုး လုပ္ရမွာက HTML ကုဒ္ေတြ ထဲ မွာ background:url(...) ဆို တဲ့ေနရာေတြအားလံုးမွာ အဖြင့္အပိတ္ထဲက URL ေတြအားလံုးကို ဖ်က္ျပီး အရင္ save လုိက္ပါ...။ ပိုျပီးရွင္းေအာင္လို ့ပါ...။ ျပီးတာနဲ ့ Edit HTML ကို ျပန္သြားမယ္ေနာ္...။

...........................................................................................

ျပီးရင္ကုတ္ေတြအစားထိုးရေအာင္....ကုဒ္ေတြ အစားမထုိးခင္ ေျပာခ်င္တာက...ေနာက္ခံတန္းပလိတ္ေျပာင္းမယ္ဆိုလွ်င္ အဓိကက်တဲ့ အခ်က္ ၄ ခ်က္ပဲရွိပါတယ္...။ အဲဒါေတြကို အရင္ေျပာရေအာင္ေနာ...။

အဓိကအခ်က္ေတြကေတာ့
၁။ #header-wrapper {
၂။ #content-wrapper {
၃။#footer-wrapper {
၄။ body or #outer-wrapper { ေတြပဲျဖစ္ပါတယ္..။

အဲဒါေလးေတြကို အရင္ရွာရေအာင္...

1...အေပၚေခါင္းစဥ္
၁။ #header-wrapper {
padding-bottom: 15px;
background: url() no-repeat $startSide bottom;

ဆိုတာေတြ ့ရပါလိမ့္မယ္...။ အဲဒီမွာ

(က) width: 1000px; ဆိုတာေလးကို ထပ္ထည့္လုိက္ပါ...။
(ခ) padding-bottom: 275px;
(ဂ) background: url(http://i667.photobucket.com/albums/vv40/nyeinlayblogtemplate/cool.jpg) no-repeat ;

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

#header-wrapper {
width: 1000px;
padding-bottom: 275px;
background: url(http://i667.photobucket.com/albums/vv40/nyeinlayblogtemplate/cool.jpg) no-repeat ;
}

မျပီးေသးဘူးေနာ္...ေအာက္ဘက္မွာ

# header
background: color url() repeat-x $startSide bottom; ဆိုတဲ့ေနရာက အေရာက္ code ကို ျဖတ္လုိက္ပါ...။
..................................................................................................................................

2...အလယ္ေနာက္ခံ
၂။ #content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url() repeat-y $startSide top;

အခုလိုေလးေျပာင္းရေအာင္
(က) width: 1000px;
(ခ)background:url(http://i667.photobucket.com/albums/vv40/nyeinlayblogtemplate/cool1copy-1.jpg) repeat-y ;

အစသျဖင့္ ေျပာင္းလိုက္ရင္ ဒီလိုေတြ ့ရပါမယ္...

#content-wrapper {
position: relative;
width: 1000px;
background:#f7f0e9url(http://i667.photobucket.com/albums/vv40/nyeinlayblogtemplate/cool1copy-1.jpg) repeat-y ;
}
...............................................................................................................

3...ေအာက္ေျခ အပိတ္
၂။ #footer-wrapper {
width: 760px;
padding-top: 15px;
background: url() no-repeat $startSide ;

ကို ဒီလိုေျပာင္းရေအာင္

(က) width: 1000px;
(ခ) padding-top: 50px;
(ဂ)background:url(http://i667.photobucket.com/albums/vv40/nyeinlayblogtemplate/cool1copy-2.jpg) no-repeat ;

လို ့ေျပာင္းလိုက္ရင္ အခုလို ေတြ ့ရပါမယ္...
#footer-wrapper {
width: 1000px;
padding-top: 50px;
background: url(http://i667.photobucket.com/albums/vv40/nyeinlayblogtemplate/cool1copy-2.jpg) no-repeat ;
}

.....................................................................................................................

၄။ အျပင္ေနာက္ခံ...

4...body နဲ ့ #outer-wrapper ကိုရွာျပီး width: 760px; ေနရာမွာ width: 1000px; ဆိုျပီးေျပာင္းလိုက္ပါ..။

body {
margin: 0;
text-align: center;
min-width: 1000px;
background: #ce8b43 url() repeat-y $startSide top;
color: $textColor;
font-size: small;
အနီေရာင္ျပထားတဲ့ ေနရာမွာ အခုလို ေလးအစားသြင္းလိုက္ပါ

background:url(http://www.greathollowpta.com/files/QuickSiteImages/blue_background_op_1000x884.jpg) repeat-y ;

ျပီးရင္ SAVE TEMPLATE ကို ႏွိပ္ျပီးရင္ ဒီလကိုပံု စံ http://littlebird-template.blogspot.com/ ဘေလာ့ေလးတခုရမွာ ျဖစ္ပါတယ္ရွင္....။

PS: တခုေတာ့ေျပာခ်င္ပါတယ္ရွင္...ကြန္ျပဴတာ အၾကီးအေသးေပၚမွာ မူတည္ျပီး တန္းပလိတ္ က အျမင္မတူပါဘူး...ညေလးကြန္ျပဴတာ က laptop ဆိုေတာ့ width က်ယ္ပါတယ္... width 1000 ထားတာေတာင္ အျပည့္မေပၚပါဘူး...မနက္က ရံုးခန္းက ကြန္ျပဴတာနဲ ့ၾကည့္ေတာ့ၾက တန္းပလိတ္က တအားၾကီးျပီး မလွေတာ့တာ ကို ေတြ ့ရပါတယ္... မိမိကြန္ျပဴတာ အက်ယ္ေပၚမူတည္ျပီး.. width ကို ေျပာင္းလို ့ရပါတယ္ရွင္...။ ဒီ post ေလးက လည္း ဒီတန္းပလိတ္ေလးလွတယ္လုိ ့ေျပာထားတာ မဟုတ္ပဲ...ကိုယ္ပိုင္ ဒီဇိုင္းေလးေတြ ထည့္ခ်င္သူေတြ အတြက္ အဆင္ေျပေအာင္ ေရးထားျခင္းျဖစ္ပါတယ္ရွင္...။။ျပီးေတာ့ အေပၚမွာ ေျပာသလို ညေလးက Professional တေယာက္မဟုတ္ပဲ...၀ါသနာအရ ေလ့ ့လာေနသူျဖစ္တာေၾကာင့္ အမွားပါခဲ့ရင္လည္းနားလည္ေပးၾကပါလုိ ့ေျပာခ်င္ပါတယ္..။