Peekaboo Sidebar လုပ္နည္း

စီေဘာက္စ္မွာ ေမးလာတဲ့ zawlixwargi(chinna) ရဲ႕ အေမးကို ေျဖေပးရင္းနဲ႔ ဒီပို႔္စ္တင္လိုက္ျခင္းျဖစ္ပါတယ္။ အမွန္ကမူးရင္း လင့္ကိုညြန္းလိုက္ရင္လဲ ရတာပါတယ္။ အခ်ိန္ရတာနဲ႔ နည္းနည္းေလးေျပာလိုက္မယ္။
Q : how do you do your sidebar dowload driver box i very like that if can be u posted me please

A: အဲဒီလုပ္နည္းက Peekaboo Sidebar လုပ္နည္းလို႔ေခၚၾကပါတယ္။ Peekaboo ရဲ႕သေဘာက ေခါက္တာ-လို႔ဆိုရမယ္။ ဒါဆိုေတာ့ ပို႔စ္ကက စာေခါက္တာမ်ိဳး၊ ဆိုက္ဘားက လင့္အရွည္ၾကီးေတြကို ေခါက္လိုက္တာမ်ိဳးကို Peekaboo Post ေခါက္ တာ၊ Peekaboo Side Bar ေခါက္တာပါပဲ။ အဲလိုလုပ္လိုက္ရင္ လင့္ေတြဘယ္ေလရွည္ရွည္ ရွင္းရွင္းလင္းလင္းနဲ႔ ကိုယ့္ဆိုက္မွာသိမ္းထားလို႔ရတာေပါ့ဗ်ာ။ လုပ္နည္းကေတာ့ mmbloggershelpdesk အတုိင္းပဲတင္
ေပးလိုက္တယ္။

အဆင္႔ (၁)

ပထမဦးဆုံး ဒီစာေၾကာင္းေလး နွစ္ေၾကာင္းကုိ 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 ကၽြမ္းက်င္သူမ်ားကေတာ႔ ပုံေလးေတြ အစားထုိးျပီး ပုိလွေအာင္ဖန္တီးယူႏုိင္ပါတယ္ ခင္ဗ်ာ..

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