Blogger Template အေၾကာင္း (၂)
25 July 2008
ဒီပို႔စ္ကို မဖတ္ခင္ အရင္ ဖတ္ေစခ်င္ေသာ ပို႔စ္
- Blogger Template အေၾကာင္း (၁)
(၂) Body Section
ကဲ က်ေနာ္တို႔ Body Section ကို ဆက္ၾကည့္ၾကစို႔။ ဒီအပိုင္းဟာ တန္းပလိတ္ရဲ႕ အႏွစ္သာရပိုင္းပါ။ တကယ္ လုပ္ေဆာင္ခ်က္ေတြ ေရးတဲ့ အပုိင္းလည္း ျဖစ္တယ္။ အေပၚမွာ ေၾကျငာထားတဲ့ အေရာင္ေတြ၊ အရြယ္အစားေတြ၊ ပံုစံေတြကုိ ဘယ္လို အသံုးခ်မယ္၊ ဘယ္လို အေျခအေနမွာ ထုတ္သံုးမယ္ ဆိုတာေတြဟာ ဒီအပိုင္းမွာ ေရးရတာပါ။ Head အပိုင္းက သတ္မွတ္ၿပီး Body အပိုင္းက အေကာင္အထည္ ေဖာ္တာေပါ႔။
<body>
<div id='outer-wrapper'>
<div id='wrap2'>
<div id='header-wrapper'> ... </div>
<div id='content-wrapper'> ... </div>
<div id='footer-wrapper'> ... </div>
</div>
</div>
</body>
အေပၚမွာ ျပထားတဲ့ ပံုစံဟာ Body Section ကို အရွင္းဆံုး ခ်ံဳ႕ထားတာပါ။ ေအာက္က ျပထားတဲ့ ပံုနဲ႔ အပိုင္းက Code နဲ႔ ႏိႈင္းယွဥ္ၾကည့္မယ္ဆိုရင္ နည္းနည္း ပိုရွင္းသြားမယ္ထင္တယ္။
ဒါဆို က်ေနာ္တို႔ အဓိက အပိုင္းႀကီး သံုးပိုင္း ထပ္ရမယ္။ ပထမဆံုး က်ေနာ္တို႔ Header ပိုင္းကို ၾကည့္ၾကည့္ရေအာင္။
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='My Sample Blog (Header)' type='Header'>
x
x
</b:widget>
</b:section>
</div>
ဒါ header-wrapper ရဲ႕ အတိုခ်ံဳ႕ပံုစံပါ။ က်ေနာ္တို႔ Header မွာ ပံုေတြ (Banner) ထည့္မယ္။ ေခါင္းစဥ္ေရးမယ္။ ဘေလာ့ဂ္အေၾကာင္း အၾကမ္းဖ်င္း (Description) ေရးမယ္။ ဒါေတြဟာ ဒီအပုိင္းမွာ ေရးရပါ႔မယ္။ ပံုမွန္အားျဖင့္ေတာ့ Header အပိုင္းကို ျပဳျပင္ ေျပာင္းလဲေလ့ မရွိပါဘူး။ ဒါေပမယ့္ ဒီမွာ က်ေနာ္ ရွင္းျပစရာ သံုးခု ရွိေနပါတယ္။ ပထမဆံုးက maxwidgets ဆိုတာပါ။ maxwidget ဆိုတာ အမ်ားဆံုး လုပ္လို႔ရမယ့္ widget အေရအတြက္ပါ။ ပံုမွန္အားျဖင့္ maxwidgets က 1 ပါ။ ဒါေပမယ့္ တခ်ိဳ႕ ဘေလာ့ဂ္ေတြမွာ Header ရဲ႕ ေအာက္မွာ Menu ပံုစံ လုပ္ထားတာ ေတြ႕ပါလိမ့္မယ္။ ဒါဆို Header မွာ widget က ႏွစ္ခု ျဖစ္သြားတဲ့ အတြက္ေၾကာင့္ maxwidgets='2' လို႔ ေျပာင္းေပးရပါမယ္။ ဒါမွ Header မွာ Banner အျပင္ Menu ကိုပါ ေအာက္ကေန ထည့္လို႔ရမွာ ျဖစ္ပါတယ္။ ေနာက္တစ္ခု ထပ္ရွင္းျပခ်င္တာက showaddelement ပါ။ သူရဲ႕ မူလ ပံုစံအရ showaddelement='no' ဆုိတဲ့ အတြက္ေၾကာင့္ Header ရဲ႕ ေအာက္နားေလးမွာ အကြက္တစ္ကြက္နဲ႔ Add a page element ဆိုတာ မေပၚေတာ့ပါဘူး။ Blogger in Draft မွာဆိုရင္ Add a gadget လို႔ မေပၚပါဘူး။ ဒါဆိုရင္လည္း က်ေနာ္တို႔ Page Element အသစ္တိုးလို႔ မရပါဘူး။ တကယ္လို႔ Header မွာ အသစ္ထည့္ခ်င္တယ္ ဆိုရင္ေတာ့ showaddelement='yes' လို႔ ေျပာင္းေပးရပါမယ္။ ေနာက္တစ္ခုက b:widget ထဲက locked='false' ဆိုတာပါ။ သူကေတာ့ အဲဒီ widget ကို ေရႊ႕လို႔ မရေအာင္ လုပ္တဲ့ သေဘာပါ။ locked='false' ဆိုရင္ ထားခ်င္တဲ့ေနရာကုိ ေရႊ႕လို႔ ရတယ္။ 'true' ထားလိုက္ရင္ေတာ့ ေရႊ႕လို႔ မရေတာ့ဘူး။
Content အပိုင္းကုိ မေျပာခင္ Footer အပိုင္းကို အရင္ေျပာပါ႔မယ္။ ဘေလာ့္ဂ္ အမ်ားစုရဲ႕ တန္းပလိတ္မွာ Footer မွာ ဘာမွ မရွိပါဘူး။ ဒါေၾကာင့္
<div id='footer-wrapper'></div>
ဆုိတာပဲ ျမင္ရပါ႔မယ္။ တကယ္လို႔ widget တစ္ခုခု ထည့္ခ်င္ရင္ ၾကားထဲမွာ b:section န႔ဲ b:widget ေတြကို ထပ္ထည့္ေပးရပါမယ္။ showaddelement မွာ yes လုပ္လိုက္ရင္ Page Element ကို ပံုမွန္အတိုင္း Add လုပ္သြား႐ံုပါပဲ။
ဒါ Content ပိုင္းကို အတိုဆံုး ျဖစ္ေအာင္ ခ်ံဳ႕ထားတာပါ။ Content မွာလည္း ႏွစ္ပိုင္းေတြ႕ရပါ႔မယ္။ ဒါ 2 Columns Template မို႔ပါ။ 3 Columns Template ဆိုရင္ သံုးခု ျဖစ္သြားႏိုင္ပါတယ္။ အထက္က ပံုကို ျပန္ၾကည့္ရင္ ပံုထဲမွာ ႏွစ္ပိုင္းခြဲေနတာ ေတြ႕ရပါလိမ့္မယ္။ အဲဒီ အထဲက Main အပိုင္းကုိ ဆက္သြားရေအာင္။
ဒီေနရာဟာ က်ေနာ္တို႔ ေရးသမွ် ပို႔စ္ေတြ ေပၚမယ့္ ေနရာပါ။ အခု ျမင္ရသေလာက္ဟာ header-wrapper နဲ႔ ဘာမွ မထူးပါဘူး။ အေသးစိတ္ကိုေတာ့ ေနာက္ပိုင္းမွ ရွင္းျပပါ႔မယ္။
ဒီအပိုင္းမွာ က်ေနာ္တို႔ ထည့္သမွ် Widget ေတြ အလုပ္လုပ္မယ့္ ေနရာပါ။ အထက္က Code ကို ၾကည့္ရင္ျဖင့္ ဒီ ဘေလာ့ဂ္ရဲ႕ Sidebar မွာ Widget ေလးခု ရွိပါတယ္။ HTML Widget, Blog Archive Widget, Label Widget နဲ႔ LinkList Widget တစ္ခုစီ ပါပါတယ္။ ဒါ က်ေနာ္တို႔ အတိုဆံုး ခ်ံဳ႕ၾကည့္လိုက္တာပါ။
ဘေလာ့တစ္ခုရဲ႕ တန္းပလိတ္မွာ ပါတဲ့ အစိတ္အပိုင္းက ဒါအကုန္ပါပဲ။ အထက္က ရွင္းျပခဲ့သမွ်ကုိ တစ္စစီ ျပန္စုၿပီး ၾကည့္မယ္ဆိုရင္ ေအာက္က ပံုစံအတုိင္း ရလာပါလိမ့္မယ္။
ဒီထက္ ပို ခ်ံဳ႕ၾကည့္မယ္ဆိုရင္ ဒီလို ျမင္ႏိုင္ပါတယ္။
Content အပိုင္းကေတာ့ အေရးအႀကီးဆံုး အပိုင္း နဲ႔ အဓိကက်တဲ့ အပိုင္း ျဖစ္ေတာ့ အဲဒီထဲက အစိတ္အပိုင္းက နည္းနည္း မ်ားပါတယ္။ ေနာက္ၿပီး ကိုယ္သံုးထားတဲ့ တန္းပလိတ္ အမ်ိဳးအစားေပၚ မူတည္ၿပီး နည္းနည္းေလး ကြဲႏိုင္ပါတယ္။ အခု အေျခခံ နားလည္ႏိုင္ေအာင္ တန္းပလိတ္ တစ္မ်ဳိးကို ဆြဲထုတ္ၿပီး ရွင္းျပပါ႔မယ္။
<div id='content-wrapper'>
<div id='main-wrapper'> ... </div>
<div id='sidebar-wrapper'> ... </div>
</div>
ဒါ Content ပိုင္းကို အတိုဆံုး ျဖစ္ေအာင္ ခ်ံဳ႕ထားတာပါ။ Content မွာလည္း ႏွစ္ပိုင္းေတြ႕ရပါ႔မယ္။ ဒါ 2 Columns Template မို႔ပါ။ 3 Columns Template ဆိုရင္ သံုးခု ျဖစ္သြားႏိုင္ပါတယ္။ အထက္က ပံုကို ျပန္ၾကည့္ရင္ ပံုထဲမွာ ႏွစ္ပိုင္းခြဲေနတာ ေတြ႕ရပါလိမ့္မယ္။ အဲဒီ အထဲက Main အပိုင္းကုိ ဆက္သြားရေအာင္။
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
x
x
</b:widget>
</b:section>
</div>
ဒီေနရာဟာ က်ေနာ္တို႔ ေရးသမွ် ပို႔စ္ေတြ ေပၚမယ့္ ေနရာပါ။ အခု ျမင္ရသေလာက္ဟာ header-wrapper နဲ႔ ဘာမွ မထူးပါဘူး။ အေသးစိတ္ကိုေတာ့ ေနာက္ပိုင္းမွ ရွင္းျပပါ႔မယ္။
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='true' title='' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='My Label' type='Label'/>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'/>
</b:section>
</div>
ဒီအပိုင္းမွာ က်ေနာ္တို႔ ထည့္သမွ် Widget ေတြ အလုပ္လုပ္မယ့္ ေနရာပါ။ အထက္က Code ကို ၾကည့္ရင္ျဖင့္ ဒီ ဘေလာ့ဂ္ရဲ႕ Sidebar မွာ Widget ေလးခု ရွိပါတယ္။ HTML Widget, Blog Archive Widget, Label Widget နဲ႔ LinkList Widget တစ္ခုစီ ပါပါတယ္။ ဒါ က်ေနာ္တို႔ အတိုဆံုး ခ်ံဳ႕ၾကည့္လိုက္တာပါ။
ဘေလာ့တစ္ခုရဲ႕ တန္းပလိတ္မွာ ပါတဲ့ အစိတ္အပိုင္းက ဒါအကုန္ပါပဲ။ အထက္က ရွင္းျပခဲ့သမွ်ကုိ တစ္စစီ ျပန္စုၿပီး ၾကည့္မယ္ဆိုရင္ ေအာက္က ပံုစံအတုိင္း ရလာပါလိမ့္မယ္။
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin>
<![CDATA[ .............. ]]>
</b:skin>
<--------------- Javascript ! Put here.
</head>
<body>
<div id='outer-wrapper'>
<div id='wrap2'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='My Sample Blog (Header)' type='Header'>
x
x
</b:widget>
</b:section>
</div>
<div id='content-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
x
x
</b:widget>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='true' title='' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='My Label' type='Label'/>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'/>
</b:section>
</div>
</div>
<div id='footer-wrapper'></div>
</div>
</div>
</body>
</html>
ဒီထက္ ပို ခ်ံဳ႕ၾကည့္မယ္ဆိုရင္ ဒီလို ျမင္ႏိုင္ပါတယ္။
- Head Section
- Title
- CSS Code
- JS Code Definition
- Body Section Outer Wrapper
- Header Wrapper
- Content Wrapper
- Main Wrapper
- Sidebar Wrapper
- Footer Wrapper
အခု ရွင္းျပထားသေလာက္ မရွင္းတာ ရွိမယ္ဆိုရင္ ကြန္းမန္႔ထဲမွာ ေမးျမန္ႏိုင္ပါတယ္။ အားမနာပါနဲ႔။ လြတ္လြတ္လပ္လပ္ ေမးႏိုင္ပါတယ္။ အစစအရာရာ အဆင္ေျပပါေစဗ်ာ။
ဆက္လက္ ေဖာ္ျပပါမည္။
ဆက္လက္ ေဖာ္ျပပါမည္။
