Blogger Template အေၾကာင္း (၁)
23 July 2008
တကယ္တမ္းေတာ့ ဘေလာ့ဂါရဲ႕ တန္းပလိတ္ကို နားလည္ဖို႔ သိပ္မခက္ပါဘူး။ ဘာလို႔လဲ ဆိုေတာ့ သူက က်ေနာ္တို႔ နားလည္လြယ္တဲ့ စကားလံုးေတြကို သံုးထားလို႔ပါ။ ဥပမာ b:if ဆုိရင္ အေျခအေန စစ္ေဆးတဲ့ေနရာမွာ သံုးတယ္။ b:loop ဆုိရင္ ထပ္ခါ ထပ္ခါ လုပ္ရမယ့္ ေနရာမ်ိဳးေတြမွာ သံုးတယ္။ ဒါ သာမန္ အဂၤလိပ္ အသံုးအႏႈန္းနဲ႔ သိပ္မကြာဘူး။ တကယ္လို႔ စာဖတ္သူဟာ HTML အေၾကာင္း တီးမိ ေခါက္မိ ရွိရင္ေတာ့ တန္းပလိတ္တစ္ခုကို ျပင္ဖုိ႔ နားလည္ဖို႔ မခက္ေတာ့ပါဘူး။ ေနာက္ၿပီး CSS အေၾကာင္းနဲ႔ Javascript အေၾကာင္း အနည္းအက်ဥ္း နားလည္မယ္ဆိုရင္ေတာ့ ဘေလာ့ဂ္ လုပ္ရတာ အေတာ္ေလး အဆင္ေျပ လြယ္ကူသြားမယ္။ က်ေနာ္ ဒီေနရာကေန Blogger Template မွာ ပါတဲ့ အစိတ္အပိုင္းေတြကို နည္းနည္း ရွင္းျပခ်င္တယ္။ အခု စာဖတ္သူကို အေျခခံက်က် ရွင္းျပႏုိင္ဖို႔ ႀကိဳးစားၾကည့္ပါ႔မယ္။ တခ်ိဳ႕ ေနရာေတြမွာ အေသးစိတ္ရွင္းဖုိ႔ မလိုအပ္ရင္ ေက်ာ္သြားမွာပါ။ အတြင္းက်က် လိုက္ရွင္းေနရင္ ႐ႈပ္ကုန္မွာလည္း စိုးလို႔ တန္းပလိတ္ရဲ႕ အေျခခံ အလုပ္လုပ္ပံုပဲ ရွင္းျပပါ႔မယ္။ တခ်ိဳ႕ ဘေလာ့ဂါေတြ အေနနဲ႔ တျခားသူ တစ္ဦးဦးက တန္းပလိတ္ ျပင္ေပးေနတယ္ ဆိုေပမယ့္လည္း ဘေလာ့ဂါတစ္ေယာက္ အေနနဲ႔ အေျခခံ အဆင့္ေလာက္ေတာ့ သိထားသင့္တယ္လို႔ ယူဆမိပါတယ္။ အတတ္ႏိုင္ဆံုး တန္းပလိတ္ကို ခ်ံဳ႕ၿပီး တေျဖးေျဖး ခ်ဲ႕ရွင္းျပ သြားပါ႔မယ္။
<?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> .... </head>
<body> .... </body>
</html>
ဒါ Template ကို အနိမ့္ဆံုး အဆင့္အထိ ခ်ံဳ႕ၾကည့္လိုက္တာပါ။ အဲလို ခ်ံဳ႕လိုက္ေတာ့ အစိတ္အပိုင္း (၂) ခုပဲ က်န္ေတာ့တယ္။
(၁) Head Section နဲ႔
(၂) Body Section ပါ။
(၁) Head Section
က်ေနာ္တို႔ <head> နဲ႔ </head> ၾကားကို Head Section လုိ႔ သတ္မွတ္ပါတယ္။ အဲဒီ အပိုင္းမွာ ဆိုရင္ က်ေနာ္တို႔ သံုးမည့္ ပစၥည္း ပစၥယေတြ သိမ္းဆည္းတဲ့ ေနရာေလးပါ။ Body Section မွာ သံုးမယ့္ လုပ္ေဆာင္ခ်က္ေတြ အတြက္ ဒီေနရာမွာ ေၾကျငာေပးပါ႔မယ္။ ေနာက္ၿပီး တန္းပလိတ္ တစ္ခုလံုးရဲ႕ အသြင္အျပင္၊ ဒီဇိုင္းကုိ ဒီမွာ သတ္မွတ္ရပါတယ္။ Color တို႔၊ Font တို႔၊ စာလံုး အရြယ္အစား၊ အေနအထားေတြကို ဒီေနရာမွာ ေၾကျငာေပးရမွာပါ။ ဒီ အပိုင္းကိုလည္း က်ေနာ္တို႔ နားလည္လြယ္ေအာင္ အစိတ္အပိုင္း သံုးပိုင္း ထပ္ခဲြလို႔ ရပါတယ္။
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin>
<![CDATA[ .............. ]]>
</b:skin>
<--------------- Javascript ! Put here.
</head>
ပထမဆံုး အနီေရာင္နဲ႔ ျပထားတဲ့ အပိုင္းက Title ပိုင္းပါ။ b:include ဆိုတဲ့ Tag ဟာ သူ႔ အထဲမွာ ေၾကျငာထားတဲ့ လုပ္ေဆာက္ခ်က္ကို လုပ္ေဆာင္ေပးပါတယ္။ all-head-content လို႔ အမည္ေပးထားတဲ့ လုပ္ေဆာင္ခ်က္ကို လုပ္ေပးဖို႔ ေၾကျငာတာပါ။ ေနာက္ၿပီး <title> </title> အထဲမွာ ပါတဲ့ စာဟာ အျမဲတမ္း က်ေနာ္တို႔ သံုးတဲ့ Browser ရဲ႕ အေပၚဆံုး ဘယ္ဘက္ အနားမွာ ကပ္ၿပီး ေပၚေနတဲ့ စာပဲ ျဖစ္ပါတယ္။ ဘေလာ့ဂ္တိုင္းမွာ ဆိုရင္ အျမဲ ဘေလာ့ရဲ႕ နာမည္ပဲ ေပၚပါ႔မယ္။ ဘာလို႔လဲ ဆိုေတာ့ data:blog.pageTitle အေနနဲ႔ ေၾကျငာထားလို႔ပါ။
<b:skin> နဲ႔ </b:skin> ၾကားမွာ ေရးထားတဲ့ Code ေတြဟာ CSS Code ေတြပဲ မ်ားပါတယ္။ ပို႔စ္ေခါင္းစဥ္ကိုေတာ့ျဖင့္ ဘာအေရာင္ေလးနဲ႔ စာလံုး ဘယ္အရြယ္အစားနဲ႔ ေပၚခ်င္တယ္ ဆိုတာေတြကို ဒီေနရာမွာ သတ္မွတ္ေပးပါတယ္။ သူ႔ရဲ႕ Tag နာမည္အတုိင္း skin ဆိုသလိုပဲ ဘေလာ့တစ္ခုလံုးရဲ႕ အေရျပားပိုင္းပါ။ အျပင္အဆင္ပိုင္းေပါ႔။ Style Sheet လုိ႔လည္း ေခၚပါတယ္။ တကယ္လို႔ Style Sheet ထဲမွာ ထည့္ေပးပါလို႔ ေျပာခဲ့ရင္ ဒီေနရာမွာ ထည့္ေပးရမွာပါ။ ေသးစိတ္ကို ေနာက္မွ ဆက္ေဆြးေႏြးပါ႔မယ္။
</b:skin> နဲ႔ </head> ၾကားမွာေတာ့ မူလ ဘေလာ့ဂါမွာ မပါတဲ့ ထပ္တိုး လုပ္ေဆာင္ခ်က္ေတြအတြက္ ဒါမွမဟုတ္ သူမ်ား ေရးထားၿပီးသား လုပ္ေဆာင္ခ်က္ေတြ အခန္႔သင့္ သံုးႏိုင္ဖုိ႔အတြက္ ဒီေနရာမွာ အဲဒီ ဖုိင္ေတြကို ၫႊန္ေပးရပါ႔မယ္။ ဥပမာ ပို႔စ္ေခါက္တဲ့ လုပ္ေဆာင္ခ်က္ ဆိုပါစို႔။ က်ေနာ္တို႔အတြက္ အဲဒီ လုပ္ေဆာင္ခ်က္ကို အလြယ္တကူ သံုးႏိုင္ေအာင္ တျခားလူတစ္ေယာက္ေယာက္က ေရးထားေပးပါတယ္။ အဲဒါကို myhacko.js ဆိုတဲ့ နာမည္နဲ႔ သိမ္းထားပါတယ္။ က်ေနာ္တို႔ အဲဒီ လုပ္ေဆာင္ခ်က္အတြက္ အဲဒီ ဖုိင္ကို ဒီေနရာမွာ ေခၚေပးရပါ႔မယ္။
<script src='http://pikay.googlepages.com/myhacko.js' type='text/javascript'/> ဆိုတာကို </b:skin> နဲ႔ </head> ၾကားမွာ ထည့္ေပးရပါတယ္။ ဒါဆို myhacko.js ထဲက Javascript Function ေတြကို အသင့္ ယူသံုးလို႔ ရပါၿပီ။
အခု ရွင္းျပထားသေလာက္ မရွင္းတာ ရွိမယ္ဆိုရင္ ကြန္းမန္႔ထဲမွာ ေမးျမန္ႏိုင္ပါတယ္။ အားမနာပါနဲ႔။ လြတ္လြတ္လပ္လပ္ ေမးႏိုင္ပါတယ္။ အစစအရာရာ အဆင္ေျပပါေစဗ်ာ။
ဆက္လက္ ေဖာ္ျပပါမည္။
<b:skin> နဲ႔ </b:skin> ၾကားမွာ ေရးထားတဲ့ Code ေတြဟာ CSS Code ေတြပဲ မ်ားပါတယ္။ ပို႔စ္ေခါင္းစဥ္ကိုေတာ့ျဖင့္ ဘာအေရာင္ေလးနဲ႔ စာလံုး ဘယ္အရြယ္အစားနဲ႔ ေပၚခ်င္တယ္ ဆိုတာေတြကို ဒီေနရာမွာ သတ္မွတ္ေပးပါတယ္။ သူ႔ရဲ႕ Tag နာမည္အတုိင္း skin ဆိုသလိုပဲ ဘေလာ့တစ္ခုလံုးရဲ႕ အေရျပားပိုင္းပါ။ အျပင္အဆင္ပိုင္းေပါ႔။ Style Sheet လုိ႔လည္း ေခၚပါတယ္။ တကယ္လို႔ Style Sheet ထဲမွာ ထည့္ေပးပါလို႔ ေျပာခဲ့ရင္ ဒီေနရာမွာ ထည့္ေပးရမွာပါ။ ေသးစိတ္ကို ေနာက္မွ ဆက္ေဆြးေႏြးပါ႔မယ္။
</b:skin> နဲ႔ </head> ၾကားမွာေတာ့ မူလ ဘေလာ့ဂါမွာ မပါတဲ့ ထပ္တိုး လုပ္ေဆာင္ခ်က္ေတြအတြက္ ဒါမွမဟုတ္ သူမ်ား ေရးထားၿပီးသား လုပ္ေဆာင္ခ်က္ေတြ အခန္႔သင့္ သံုးႏိုင္ဖုိ႔အတြက္ ဒီေနရာမွာ အဲဒီ ဖုိင္ေတြကို ၫႊန္ေပးရပါ႔မယ္။ ဥပမာ ပို႔စ္ေခါက္တဲ့ လုပ္ေဆာင္ခ်က္ ဆိုပါစို႔။ က်ေနာ္တို႔အတြက္ အဲဒီ လုပ္ေဆာင္ခ်က္ကို အလြယ္တကူ သံုးႏိုင္ေအာင္ တျခားလူတစ္ေယာက္ေယာက္က ေရးထားေပးပါတယ္။ အဲဒါကို myhacko.js ဆိုတဲ့ နာမည္နဲ႔ သိမ္းထားပါတယ္။ က်ေနာ္တို႔ အဲဒီ လုပ္ေဆာင္ခ်က္အတြက္ အဲဒီ ဖုိင္ကို ဒီေနရာမွာ ေခၚေပးရပါ႔မယ္။
<script src='http://pikay.googlepages.com/myhacko.js' type='text/javascript'/> ဆိုတာကို </b:skin> နဲ႔ </head> ၾကားမွာ ထည့္ေပးရပါတယ္။ ဒါဆို myhacko.js ထဲက Javascript Function ေတြကို အသင့္ ယူသံုးလို႔ ရပါၿပီ။
အခု ရွင္းျပထားသေလာက္ မရွင္းတာ ရွိမယ္ဆိုရင္ ကြန္းမန္႔ထဲမွာ ေမးျမန္ႏိုင္ပါတယ္။ အားမနာပါနဲ႔။ လြတ္လြတ္လပ္လပ္ ေမးႏိုင္ပါတယ္။ အစစအရာရာ အဆင္ေျပပါေစဗ်ာ။
ဆက္လက္ ေဖာ္ျပပါမည္။
