Peekaboo Sidebar လုပ္နည္း

အားလုံးပဲ မဂၤလာပါခင္ဗ်ာ.

ကၽြန္ေတာ္လည္း ေနရာသစ္မွာ အသားက်ေအာင္ ေနေနရတာရယ္၊ အင္တာနက္ မရတစ္ရက္ ရတစ္ရက္ျဖစ္ေနတာရယ္ေၾကာင္႔ ပုိ႔စ္ေတြ မေရးျဖစ္ခဲ႔ဘူး. အခုေတာ႔ ျပန္ေရးျဖစ္ပါျပီ. ေရးစရာပုိ႔စ္ေတြ အမ်ားၾကီးရွိေနတဲ႔အထဲကမွ အသုံး၀င္မယ္႔ ဘေလာ႔ဂ္အေထာက္အကူျပဳပုိ႔စ္ေလး တစ္ခုနဲ႔ပဲ ကၽြန္ေတာ္႔ရဲ႔ idle status ကုိ ျပန္ေခ်ဖ်က္လုိက္ပါရေစ…

ဒါကေတာ႔ Peekaboo Sidebar လုပ္နည္းေလးပါ. ကၽြန္ေတာ္႔ဘေလာ႔ဂ္ရဲ႔ ေဘးနားမွာ My Links တုိ႔ Red links တုိ႔ ရွိပါတယ္. စမ္းၾကည္႔ပါခင္ဗ်ာ. ၾကိဳက္တယ္ေနာ္. အုိေက. ဒါဆုိ ဘယ္လုိလုပ္ရလဲ ေျပာျပမယ္.

ဂလုိလုပ္ပါခင္ဗ်ာ..

အဆင္႔ (၃) ဆင္႔ပါပါတယ္.

အဆင္႔ (၁)

ပထမဦးဆုံး ဒီစာေၾကာင္းေလး နွစ္ေၾကာင္းကုိ style sheet ထဲမွာ ထည္႔ေပးပါခင္ဗ်ာ. Style Sheet ဆုိတာကေတာ႔ ]]></b:skin> ဆုိတဲ႔ စာေၾကာင္းေလး မေတြ႔မခ်င္းအထိ အပုိင္းကုိ ေခၚပါတယ္. ဒါေၾကာင္႔ အဆင္ေျပတဲ႔ တစ္ေနရာရာမွာ အခုလုိ ထည္႔လုိက္ႏုိင္ပါတယ္ ခင္ဗ်ာ. အေပၚက ေရးထားတဲ႔ /* Peekaboo Sidebar …. */ ဆုိတာက ျပန္ရွာရလြယ္ေအာင္ လုပ္ထားတာပါ. ဘာမွ အက်ိဳးသက္ေရာက္မႈမရွိပါဘူး.

/* Peekaboo Sidebar
------------------------------------- */
.commenthidden {display:none}
.commentshown {display:inline}

အဆင္႔ (၂)

ဒုတိယအဆင္႔မွာေတာ႔ ဒီ script ေလးေတြကုိ </head> tag မဆုံးခင္ေလးမွာ ထည္႔ေပးပါ.

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

အဆင္႔ (၃)

ဒါဆုိရင္ coding အပုိင္းမွာ ေတာ္ေတာ္ေလး ျပီးသြားပါျပီ. အခုလုပ္မွာကေတာ႔ ကုိယ္ထည္႔မယ္႔ လင္႔ခ္ေလးေတြပါပဲ. New Blogger Template အတြက္ေရာ Classic Template အတြက္ပါ သုံးလုိ႔ရပါတယ္. New Blogger ဆုိရင္ေတာ႔ Add a page element> HTML/Java Script ကုိ ေရြးပါ. Classic ဆုိရင္ေတာ႔ ဒီတုိင္းပဲ ထည္႔ပါခင္ဗ်ာ.

<a aiotitle="click to expand" href="javascript:togglecomments('YouNameIt')">Title</a><br />
<div class="commenthidden" id="YouNameIt">
<ul>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.gmail.com">Gmail</a></li>
</ul>
</div>

YouNameIt ဆုိတာကေတာ႔ ကုိယ္ေပးခ်င္တဲ႔ နာမည္ေပးတာကုိ ဆုိလုိတာပါ. သူတုိ႔ (၂)ခုက တူရပါမယ္ခင္ဗ်ာ.

ဥပမာကုိၾကည္႔ရင္ ပုိရွင္းသြားပါလိမ္႔မယ္.

Example:

<a aiotitle="click to expand" href="javascript:togglecomments('Zawgyi')"><span style="color:red;">+/- Zawgyi ရယူရန္</span></a><br/><br/>
<div id="Zawgyi" class="commenthidden">
<ul>

<li>
<a href="http://www.fileden.com/files/2007/2/17/784534/Zawgyi-One-20051130.ttf "><
img border="0" src="http://static.flickr.com/40/74230378_f794a1e17a_m.jpg"/></a></li>
<li><a href="http://www.fileden.com/files/2007/2/17/784534/ZawgyiKb_installer_I.zip"> Zawgyi Keyboard Installer</a></li>

<li><a href="http://www.fileden.com/files/2007/2/17/784534/zawgyi_keyboard_map0_4.gif">Zawgyi Keyboard Layout</a></li>

</ul>
</div>

ဒါပါပဲခင္ဗ်ာ.

+/- Zawgyi ရယူရန္ ဆုိတာက အရုိးရွင္းဆုံးလုပ္ထားတာပါ. Graphic ကၽြမ္းက်င္သူမ်ားကေတာ႔ ပုံေလးေတြ အစားထုိးျပီး ပုိလွေအာင္ဖန္တီးယူႏုိင္ပါတယ္ ခင္ဗ်ာ..

အားလုံးပဲ ေပ်ာ္ရႊင္ခ်မ္းေျမ႔စြာ ဘေလာ႔ဂင္းႏုိင္ၾကပါေစ…

ဒီေနရာက ပုိ႔စ္ေလးကုိ သင္႔ေတာ္သလုိ ဘာသာျပန္ပါတယ္ခင္ဗ်ာ.