ခ်ံဳ႕ခ်ဲ႕ႏိုင္ေသာ Link List တစ္ခု ဖန္တီးျခင္း

SideBar မွာ သူငယ္ခ်င္း ဘေလာ့ဂါေတြရဲ႕ လိပ္စာေတြကို ထည့္ၾကတာ ေတြ႕ျမင္ဖူးမွာပါ။ စာဖတ္သူလည္း ထည့္မယ္လို႔ ယံုၾကည္ပါတယ္။ အဲဒါကို Link List ထည့္တယ္လို႔ ေခၚပါတယ္။ တကယ္လို႔ ကိုယ္ထည့္ခ်င္တဲ့ လူေတြ တအား မ်ားလာၿပီ ဆိုရင္ေတာ့ လင့္ခ္ေတြ အမ်ားႀကီးနဲ႔ SideBar က တအားရွည္ေနပါမယ္။ ဒီလိုဆိုရင္ ဘေလာ့ဂ္ရဲ႕ အသြင္အျပင္ကုိ ထိခိုက္ႏိုင္သလိုပဲ အဲဒီ Link List ရဲ႕ ေအာက္မွာ ရွိတဲ့ တျခား Widget တစ္ခုခုကို ၾကည့္ခ်င္ရင္ အေတာ္ေလးကုိ အခ်ိန္ေပးၿပီး ေအာက္ကို ဆင္းေနရတယ္။ တကယ္လို႔ အဲဒီ ရွည္လ်ားလွတဲ့ Link List ကို ခ်ံဳ႕ၿပီး လိုတဲ့ အခ်ိန္မွ ခ်ဲ႕ၾကည့္လို႔ ရရင္ မေကာင္းဘူးလား။ ဟုတ္ကဲ့။ ဒီပို႔စ္မွာ အဲဒါ လုပ္နည္းကို ရွင္းျပေပးသြားပါ႔မယ္။ ကဲ ... က်ေနာ္တို႔ စလိုက္ၾကရေအာင္ဗ်ာ။

အဆင့္ (၁) စတိုင္ (CSS) သက္မွတ္ျခင္း

ထံုးစံအတုိင္း CSS မွန္သမွ်ကို Style Sheet မွာ ထည့္သြင္းေပးရပါမယ္။ <b:skin><![CDATA[ နဲ႔ ]]></b:skin> အၾကားမွာပါ။ ေအာက္မွာ ျပထားတဲ့ Code ကို ထည့္ေပးပါ။

.commenthidden {display:none}
.commentshown {display:inline}

အဆင့္ (၂) JS Code ထည့္ျခင္း

ထံုးစံအတိုင္း JS မွန္သမွ်ကို </head> အတိုင္းခင္ သူ႔အေပၚနားမွာ ထည့္ေပးရပါ႔မယ္။

<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; }
else { whichpost.className="commentshown"; }
} </script>

အဆင့္ (၃) Link List Widget ထည့္သြင္းျခင္း

Widget ေတြ မွန္သမွ်ဟာ <b:widget id=' .... ဆိုတာနဲ႔ စပါတယ္။ Widget ထည့္မယ္ဆိုရင္ျဖင့္ က်ေနာ္တို႔ Layout >> Edit HTML ကို သြားေပးရပါမယ္။ ေနာက္ၿပီး Expand Widget Templates ကို အမွန္ျခစ္ဖို႔ မေမ့ပါနဲ႔။ ေအာက္မွာ ျပထားတဲ့ Code ကို </b:widget> နဲ႔ <b:widget id=' .... အၾကားမွာ ထည့္ေပးပါ။ ထည့္ၿပီးမွ ေနရာတက် ျဖစ္ဖို႔ Layout >> Page Element ကို သြားၿပီး ေရႊ႕ေပးလိုက္ပါ။

<b:widget id='LinkList99' locked='false' title='+/- YOUR TITLE' type='LinkList'>
<b:includable id='main'>
<script type='text/javascript'>

if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;">');

</script>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<script type='text/javascript'>
document.write('<div id="' + rnd + '" style="display:none;">');
</script>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<script type='text/javascript'>
document.write('<\/div>');
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

အထက္ YOUR TITLE ဆိုတဲ့ ေနရာမွာ ကိုယ္ ေပးခ်င္တဲ့ နာမည္ ေပးႏိုင္ပါတယ္။ ဒါဆို က်ေနာ္တို႔ လိုခ်င္တဲ့ Expandable Widget ရပါၿပီ။ အဆင္ေျပပါေစဗ်ာ။