နဲပေဠ၀္ Template

ခန္လၝတ္-၅ ဏအ္ဂွ္ ဆက္စပ္မံင္ကုဪ (ခန္လၝတ္-၂)ေတံ မဒွ္ရ။ Template ပုိယ္ေကတ္လ၀္ဂွ္ ဗႝတ္ဗ႟တ္ကုီ၊ ဗုီျပင္ကုီ အတုိင္ပၞိက္စုိတ္ ကေလင္ပေဠ၀္မာန္ရ။

၁။ ပေဠ၀္ဗႝတ္ဗ႟တ္ Template

ယ၀္ရပုိယ္ မိက္ဂံြပေဠ၀္ ဗႝတ္ဗ႟တ္ Template မၢး ဗြဲကုိပ္ကႜာ လုပ္အာဒႝာဲ Edit HTML ေတံတုဲ ဒးဂႜာဲေကတ္ Code မထ႟း လ၀္သၞ၀္ဏအ္ကႜာေရာင္။

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 100% Georgia, Serif;
}

#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#main-wrapper ဂွ္ ဒွ္ဒႝာဲသြက္ Post မဒွ္ရ။ ယ၀္ရမိက္ဂံြသႜဲ ဗႝတ္ဗ႟တ္ Post မၢး ဗႝတ္ဗ႟တ္ဒးစုိတ္ဂွ္ တက္စုတ္ဿကုဪ width: 410px; ဂွ္မာန္ရ။ ဆဂး ျပံင္မြဲဒႝာဲဓ၀္ ဟံြဂံြရ။ ဿကုဪ #outer-wrapper ဂွ္ေလ၀္ ဒးျပံင္ဗက္ကုီရ။

ရံင္ေကတ္ကုဪ ဗႝတ္ဗ႟တ္လတူဂွ္မၢး သုီဖအုိတ္ႏံြမံင္ 660px; မဒွ္ရ။

သြက္ #main-wrapper ဂွ္ 410px;

သြက္ #sidebar-wrapper ဂွ္ 220px; သုီ႓ါပံင္ ဒွ္အာ 630px; ရ။

ေသွ္ 30px; ဂွ္ ဒွ္သြက္ gap ျခာလ၀္အၾကာဂွ္ မဒွ္ရ။

ဥပမာ-

ယ၀္ရပုိယ္မိက္ဂံြစံြ Post ဂွ္ 500px; ၊ sidebar ဂွ္ 250px; ေတွ္-

#main-wrapper {
width: 500px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 250px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

ျပံင္လွာဲစုတ္ ဂႝန္တအ္ဂွ္ညိ။ တုဲမၢး #outer-wrapper ဂွ္ေလ၀္ တက္စုတ္ 780px; ကုီညိ။

#outer-wrapper {
width: 780px;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 100% Georgia, Serif;
}

႓ုိတ္ဏအ္ဟုီေတွ္ Post ဂွ္ ဂံြ 500px; ၊ sidebar ဂွ္ ဂံြ 250px; တုဲ ဿအၾကာဂွ္ ျခာ 30px; မဒွ္ရ။

ဆဂး header box ဂွ္ ေသွ္မံင္ဏီ၊ ဒႝာဲ width:660px; သၞ၀္ဂွ္ ျပံင္စုတ္ 780px; မၢး ဗႝတ္ဗ႟တ္ကိတ္ညှအာ သုီဖအုိတ္ရ။

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #cccccc;
}

ေကတ္ PDF - 1 မၢး ဍဳဪညိ

၂။ ပေဠ၀္ Fonts ေကုာံ Colors

ယ၀္ရပုိယ္ မိက္ဂံြပေဠ၀္ Fonts ကုဪ Colors မၢး လုပ္အာဒႝာဲ Fonts and Colors ညိ။

မပတံကုဪ...

Text Color (သာ္အရံင္ လိက္ Post မပတုိန္လ၀္)

Page Background Color (သာ္အရံင္ Background)

Page Header Color (သာ္အရံင္ ယၞဳဗႜံက္)

Date Header Color (သာ္အရံင္ စၞတ္တၝဲ Post)

တုဲေတွ္...

Text Font (မအကၡရ္ သုီဖအုိတ္ {သုီဗႜံက္မြဲ ဖအုိတ္})

Page Header Font (မအကၡရ္ ယၞဳကႛိဳပ္ဗႜံက္ဇကု)

Post Title Font (မအကၡရ္ ယၞဳကႛိဳပ္ Post)

Sidebar Title Font (မအကၡရ္ ယၞဳကႛိဳပ္ sidebar)

သုီဖအုိတ္ လွာဲစမ္ရံင္ မြဲတုဲမြဲ၊ ေပင္ပၞိက္စုိတ္မၢး ဍဳဪေထာံ SAVE CHANGES ညိ။

ေကတ္ PDF - 2 မၢး ဍဳဪညိ

၃။ ပေဠ၀္ Header

စပ္ကုဪ Header တုဲ မိက္ဂံြေသာင္ကဠးကုဪညိ။ ဗြဲကုိပ္ကႜာ ဂံြလွာဲဂံြဟုီဂွ္ ပုိယ္ဒးေကတ္ဗႝတ္ဗ႟တ္ေဍံကႜာ၊ ဂံြဗႝတ္ဗ႟တ္တုဲ ဗုီျပင္ပုိယ္ေကတ္ဂွ္ ေကႜာန္ Design တုဲမွ ဂံြစုတ္စႝး Header ေၾတံေတံဂံြ မဒွ္ရ။ ဟုိတ္ဂွ္ရ ဂံြဂံြဗႝတ္ဗ႟တ္ဟုီေတွ္...

၁။ ပံက္ေကတ္မုက္ Blog ဇကုညိ။

၂။ ဍဳဪ Key – Prt Sc ဿ Keyboard ဂွ္ညိ။

၃။ ပံက္ Photoshop တုဲ Paste စုတ္ညိ။(ဂံြဗႝတ္ဗ႟တ္တုဲ ေကႜာန္ဗုီျပင္အတုိင္ပၞိက္စုိတ္ဂံြရ။ ဗုီျပင္ေကႜာန္လ၀္ဂွ္ Save နကုဪ JPEG Image ညိ။)

မုက္ဂႝန္-၁ တုဲဒွ္အုိတ္မၢး အာ Layout > Page Elements ညိ။

မုက္ဂႝန္-၂ ဍဳဪ Edit ဿဖုိင္ Header ဂွ္ညိ။

မုက္ဂႝန္-၃ ဿကုဪ Image ႏံြ႓ါဂွ္...

ယ၀္ရသုင္ေစာဲဗုီ ႏံြဿ Computer မၢး ႐ုဲေကတ္ From your computer တုဲ၊

ယ၀္ရသုင္ ေစာဲဗုီ ႏံြဿ Website မၢး ႐ုဲေကတ္ From the web ညိ။

(ယ၀္သုင္ေစာဲ ဗုီႏံြဿ Computer မၢး ဍဳဪ Browse တုဲ ဂႜာဲေကတ္ဗုီဇကုေကႜာန္လ၀္ဂွ္ညိ။)

မုက္ဂႝန္-၄ ဿကုဪ Placement ႏံြ႓ါဂွ္ေလ၀္...

ယ၀္ရဒုင္စယၞဳကႛိဳပ္ဗႜံက္ အတုိင္ႏံြဿဗႜံက္ဂွ္မၢး ႐ုဲေကတ္ Behind title and description တုဲ

ယ၀္ရမိက္ဂံြကေလံေထာံ ယၞဳႏံြမံင္ဿဗႜံက္ဂွ္မၢး ႐ုဲေကတ္ Instead of title and description ညိ။

မုက္ဂႝန္-၅ တုဲဒွ္အုိတ္မၢး Save ေထာံညိ။

ေကတ္ PDF - 3 မၢး ဍဳဪညိ