Label, Archive, HTML, Link List, Blog List စတဲ့ Widget ေတြကို ပံုမွန္ ျပမထားဘဲ သက္ဆုိင္ရာ ေခါင္းစဥ္ကို ကလစ္ႏွိပ္မွ က်လာၿပီး ေပၚေအာင္ လုပ္ေပးလို႔ ရပါတယ္။ ဥပမာ Label ေပါ႔။ က်ေနာ္တို႔ ဘေလာ့ဂ္မွာ Label ေတြ အမ်ားႀကီး လုပ္ထားၿပီး SideBar မွာ အရွည္ႀကီး ျဖစ္ေနရင္ ခ်ံဳ႕ ထားလို႔ ရပါတယ္။ အဲဒီ Label ရဲ႕ ေခါင္းစဥ္ကို ႏွိပ္လိုက္ရင္ Label ေတြ အကုန္က်လာပါတယ္။ အဲဒီလို ခ်ံဳ႕ႏိုင္၊ ခ်ဲ႕ႏိုင္တဲ့ Widget ဘယ္လို ဖန္တီးမလဲ ဆိုတာ ဒီပို႔စ္မွာ ရွင္းျပခ်င္ပါတယ္။ ေအာက္မွာ အဆင့္ဆင့္ ရွင္းျပသြားပါ႔မယ္။ Layout >> Edit HTML မွာ Expand Widget Templates ကို အမွန္ျခစ္ ျခစ္ေပးပါ။
အဆင့္ (၁) စတိုင္ သက္မွတ္ျခင္း
.commenthidden {display:none}
.commentshown {display:inline}
.commentshown {display:inline}
အထက္မွာ ေဖာ္ျပထားတဲ့ CSS ေတြကို Style Sheet မွာ သြားထည့္ေပးပါမယ္။
အဆင့္ (၂) JavaScript ထည့္သြင္းျခင္း
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>
အထက္မွာ ေဖာ္ျပထားတဲ့ JS Code ကို </head> မတုိင္ခင္မွာ သြားထည့္ေပးပါ။
အဆင့္ (၃) Widget တြင္ Code ျပင္ဆင္ျခင္း
အရင္ဆံုး မိမိ ျပင္ဆင္လိုတဲ့ Widget ကို သိရပါ႔မယ္။
- Label ဆိုရင္ <b:widget id='label ကို ရွာေပးပါ။
- HTML ဆိုရင္ <b:widget id='HTML ကို ရွာေပးပါ။
- Archive ဆုိရင္ <b:widget id='BlogArchive ကို ရွာေပးပါ။
- Link List ဆိုရင္ <b:widget id='LinkList ကို ရွာေပးပါ။
- Profile ဆိုရင္ <b:widget id='Profile ကို ရွာေပးပါ။
တကယ္လို႔ ကိုယ္ရွာတဲ့ Widget ဟာ တစ္ခုမက ရွိရင္ေန သူတို႔ရဲ႕ အေနာက္မွာ 2, 3, 4 စသျဖင့္ ပါႏိုင္ပါတယ္။ ကိုယ္ ျပင္ခ်င္တဲ့ Widget ဟုတ္မဟုတ္ ဆိုတာကို အေနာက္မွာ ပါတဲ့ title နဲ႔ တိုက္ဆိုင္ စစ္ေဆးၾကည့္ပါ။ ကိုယ္လုပ္ခ်င္တဲ့ Widget ေရာက္ၿပီ ဆိုရင္ေတာ့ အဲဒီ Widget ထဲမွာ <data:title/></h2> ကို ရွာေပးပါ။ ပံုမွန္ အားျဖင့္ေတာ့ <h2><data:title/></h2> ဆိုၿပီး ရွိေနပါတယ္။ တကယ္လို႔ <h2 ရဲ႕အေနာက္မွာ တစ္ခုခု ရွိလည္း ျပႆနာ မရွိပါဘူး။ ဒီလိုေလး ျပင္ေပးပါ။
<a aiotitle='click to expand' href='javascript:togglecomments("browselabel")'>
<h2><data:title/></h2></a>
အနီေရာင္နဲ႔ Code ေတြကို ျဖည့္ေပးပါ။
ေနာက္ၿပီး <div class='widget-content'> ရဲ႕ အေပၚနားမွာပဲ <div class='commenthidden' id='browselabel'> ကို ထည့္ေပးပါ။ ဒီလို ျဖစ္ပါလိမ့္မယ္။
<div class='commenthidden' id='browselabel'>
<div class='widget-content'>ၿပီးရင္ <b:include name='quickedit'/> ရဲ႕ ေအာက္မွာ </div> ကို ထည့္ေပးပါ။ ဒါဆို ဒီလုိ ျဖစ္လာမွာေပါ႔။
<b:include name='quickedit'/>
</div>
ဒါဆို က်ေနာ္တို႔ လုပ္ခ်င္တာ ၿပီးေျမာက္သြားပါၿပီး Template ကို Save ၿပီး ဘေလာ့ဂ္ကုိ သြားၾကည့္ၾကည့္ လုိက္ပါ။ ဒီမွာ နည္းနည္းေလး ေျပာစရာ ရွိတာက အေပၚက အျပာေရာင္နဲ႔ လုပ္ထားတဲ့ browselabel ဆိုတာပါ။ အဲဒါကို ႏွစ္ေနရာမွာ ေတြ႕ရပါလိမ့္မယ္။ တကယ္လို႔ က်ေနာ္တို႔ တျခား Widget မွာပါ အဲလို ေခါက္တာေလး သံုးခ်င္ရင္ အဲဒီ နာမည္ကို ေျပာင္းရပါမယ္။ ဒါေပမယ့္ Widget တစ္ခုတည္းမွာ ပါတဲ့ နာမည္ကေတာ့ တူေနရပါတယ္။ browselabel လိုေပါ႔။ Widget ေျပာင္းရင္ နာမည္ေျပာင္းေပးပါ။
အခု ပိုၿပီး နားရွင္းသြားေအာင္ Label Widget အတြက္ လုပ္ထားတဲ့ Code အျပည့္အစံုကို တင္ေပးလိုက္ပါတယ္။ အနီေရာင္နဲ႔ ျပထားတာေတြက ထပ္ျဖည့္ထားတဲ့ Code ေတြပါ။ စမ္းၾကည့္ပါဦး။ အဆင္ေျပပါေစဗ်ာ။
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<a aiotitle='click to expand' href='javascript:togglecomments("browselabel")'>
<h2><data:title/></h2>
</a>
</b:if>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:widget>
<b:includable id='main'>
<b:if cond='data:title'>
<a aiotitle='click to expand' href='javascript:togglecomments("browselabel")'>
<h2><data:title/></h2>
</a>
</b:if>
<div class='commenthidden' id='browselabel'>
<div class='widget-content'><ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</div>
</b:includable></b:widget>
