02 August, 2008

Widget ကို Home Page တြင္ မေပၚေအာင္ ျပဳလုပ္ျခင္း

တခ်ဳိ႕ Widget ေတြဟာ ဘေလာ့ဂ္ ရဲ႕ ပထမဆံုး စာမ်က္ႏွာမွာ ေပၚေနဖို႔ မသင့္ေလ်ာ္တာေတြ ရွိပါတယ္။ ဥပမာ ႏွီးႏြယ္ေသာပို႔စ္မ်ား (Related Posts) Widget ပါ။ “ႏွီးႏြယ္တဲ့ပို႔စ္မ်ား” ဆိုတာ ကိုယ္ အခု ဖတ္ေနတဲ့ သီးသန္႔ ပို႔စ္တစ္ခုခ်င္းစီနဲ႔ပဲ သက္ဆိုင္ပါတယ္။ မူလစာမ်က္ႏွာမွာ ရွိရွိသမွ် ပို႔စ္ေတြ ေဖာ္ျပထားတာ ျဖစ္လို႔ သူတို႔နဲ႔ ဆက္ႏြယ္တဲ့ ပို႔စ္ရယ္လို႔ ေဖာ္ျပစရာ မရွိပါဘူး။ ဒါေၾကာင့္ “ႏွီးႏြယ္ေသာပို႔စ္မ်ား” (Related Post) ဆိုတဲ့ Widget ဟာ Home Page မွာ ေပၚမေနသင့္ပါဘူး။ အဲဒီလို တျခား Widget ေတြလည္း ရွိဦးမွာပါ။ အခု က်ေနာ္ တင္ျပခ်င္တာက Widget တစ္ခုကို ၀င္၀င္ခ်င္း Home Page မွာ မေပၚေအာင္ ဘယ္လို လုပ္မလဲ ဆိုတာပါ။ ကဲ က်ေနာ္တို႔ရဲ႕ ေလ့က်င္းခန္းေလး စလိုက္ၾကရေအာင္။ အရင္ဆံုး Layout >> Edit HTML မွာ Expand Widget Templates ကို အမွန္ျခစ္ ျခစ္ေပးပါ။

အဆင့္ (၁) ျပဳျပင္လိုေသာ Widget အား ရွာေဖြျခင္း

ပထမဆံုး အေနနဲ႔ က်ေနာ္တို႔ ျပဳျပင္လိုတဲ့ Widget ကို အရင္ ရွာရပါမယ္။ Widget မွန္သမွ်ဟာ <b:widget id=' .... ဆိုတာနဲ႔ စတာပါ။ ဥပမာ Related Post Widget ဆိုရင္ HTML ပဲ ျဖစ္ႏိုင္ပါတယ္။ ဒါေၾကာင့္ သူက <b:widget id='HTML နဲ႔ စမွာေတာ့ ေသခ်ာတယ္။ ကိုယ္ရွာေနတဲ့ Widget ဟုတ္မဟုတ္ကို အေနာက္မွာပါတဲ့ title ဆိုတာနဲ႔ တိုက္ဆိုင္ စစ္ေဆးၾကည့္ပါ။ ဟုတ္ကဲ့။ က်ေနာ္တို႔ ကိုယ္ ျပင္ခ်င္တဲ့ Widget ကုိ ေတြ႕ၿပီ ဆိုၾကပါစုိ႔။

အဆင့္ (၂) Widget ၌ Code ျပင္ဆင္ျခင္း

က်ေနာ္တို႔ ျပင္ခ်င္တဲ့ Widget မွာ ဒီ <div class='widget-content'> စာေၾကာင္းကုိ ရွာေပးပါ။
ရွာေတြ႕ၿပီ ဆိုရင္ သူ႔ အေပၚနားမွာ <b:if cond='data:blog.pageType == "item"'> စာေၾကာင္းကို ထည့္ေပးပါ။
ေနာက္ၿပီး <div class='widget-content'> ကုိ ပိတ္ထားတဲ့ အပိတ္ </div> ကို ေတြ႕ေအာင္ရွာပါ။
ေတြ႔ၿပီဆိုရင္ သူ႔ ေအာက္နားမွာ </b:if> ကို ထည့္ေပးပါ။
ဒါဆိုရင္ က်ေနာ္တို႔ ျပဳျပင္ထားတဲ့ Widget ဟာ Home Page မွာ မေပၚေတာ့ပါဘူး။

ဥပမာ အေနနဲ႔ ျပရမယ္ဆိုရင္

<b:widget id='HTML10' locked='false' title='Popular Pages' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

အဲဒီမွာ အနီေရာင္ ျပထားတဲ့ Code ေတြဟာ ထပ္ျဖည့္ထားတဲ့ Code ေတြပဲ ျဖစ္ပါတယ္။ အဆင္ေျပပါေစဗ်ာ။

No comments:

Post a Comment