Hide/Show, Expand/Collapse for Blog Sidebar Link

Cbox မှာ မိတ်ဆွေတစ်ယောက် မေးထားတာလေး ရေးပြချင်ပါတယ် ....။

အောင်အောင်: Link များအတွက် +/- ပေါ်တွင် Click နှိပ်ပါခင်ဗျာ ဆိုတာလေးကိုဘာကုဒ်ခံပြီးလုပ်ထားတာလဲ ပြောပြပေးပါလား

ဒီလို +/- နဲ့ မူရင်း Link တွေကို ဖျောက်ထားတာဟာ Blog ရဲ့ Side Bar ကို အရှည်ကြီးဖြစ်နေခြင်းမှ ကာကွယ်ပေးတဲ့ အပြင် Blog Loading Time ကိုလည်း လျော့ချပေးပါတယ် ....။ Hide/Show, Expand/Collapse စသည်ဖြင့်ပြောကြသလို Peek-a-boo လို့လည်း ပြောကြပါတယ် ....။ အသေးစိတ်တော့ ကျွန်တော် သေချာမသိပါဘူး ...။

ဒီလိုဖြစ်အောင် လုပ်ဖို့အတွက် အဆင့် (၃) ဆင့် လုပ်ရမှာ ဖြစ်ပါတယ် ....။


အဆင့်(၁)
ပထမဆုံး ကိုယ့် Blog သို့ Login ၀င်ရောက်လိုက်ပါ။ ပြီးရင် Blogger Dashboard သို့ဝင်ရောက်လိုက်ပြီး Template သို့ ဆက်သွားလိုက်ပါ။(ဒီနေရာမှာ လေ့လာနိုင်ပါတယ်။)
Template ထဲမှာ အောက်မှာပေးထားတဲ့ Code ကိုရှာပါ။ (ကီးဘုတ်မှ Ctrl+F ကိုနှိပ်ပြီး Find: အကွက်မှာ ရိုက်ထည့်ရှာရင် ပိုမြန်ပါတယ်)

]]></b:skin>

တွေ့ပြီဆိုရင် သူ့ရဲ့ အပေါ်မှာ အောက်က Code တွေကို ထည့်ပေးလိုက်ပါ။

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

အဆင့်(၂)
ဆက်လက်ပြီး အောက်က Code ကိုရှာပါ။

</head>

သူ့ရဲ့ အပေါ်မှာ အောက်က Code တွေကို ထည့်ပေးလိုက်ပါ။

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

ပြီးရင် အောက်နားလေးမှာပါတဲ့ Save template ကိုနှိပ်လိုက်ပါ။
ဒါက Template အတွင်းလိုအပ်တဲ့ Code တွေကို ထည့်သွင်းခြင်း အပိုင်းဖြစ်ပါတယ်။ ဆက်လက်ပြီး ကိုယ် +/- နဲ့ပေါ်စေချင်တဲ့ Link တွေကို Blog ရဲ့ Side Bar မှာ Gadget တစ်ခုအနေနဲ့ ထည့်သွင်းရပါမယ်။ ဒီလိုထည့်သွင်းဖို့ အတွက်

အဆင့်(၃)
Blog ရဲ့ Dashboard မှာပါတဲ့ Layout သို့ဝင်ရောက်လိုက်ပါ။
Sidebar နေရာမှာပါတဲ့ Add Gadget ဆိုတာလေးကို နှိပ်လိုက်ပါ။
ပွင့်လာတဲ့ windows ထဲက HTML/JavaScript ဆိုတာလေးကို နှိပ်လိုက်ပါ။
ပွင့်လာတဲ့ Windows ထဲက အကွက်ရဲ့ Title နေရာမှာ ကိုယ်ကြိုက်တဲ့ ခေါင်းစဉ်ပေးပါ။ (မပေးရင်လည်း ရပါတယ်။) သီးခြား Gadget တစ်ခုထည့်တဲ့သဘောပါဘဲ လိုအပ်ရင် ဒီPost မှာ ဖတ်ကြည့်နိုင်ပါတယ်။
အလယ်က Content နေရာမှာ အောက်က Code တွေကို ထည့်ပေးလိုက်ပါ။

<a aiotitle="click to expand" href="javascript:togglecomments('FreeIdea')">+/-Linkတွေရဲ့ခေါင်းစဉ်ဒီမှာရေးပါ</a><br /><br><div class="commenthidden" id="FreeIdea">
<a href="လင့်1ကိုဒီမှာထည့်ပါ" target="_blank"> လင့်1ရဲ့အမည်ကိုဒီမှာထည့်ပါ </a><br />
<a href="လင့်2ကိုဒီမှာထည့်ပါ" target="_blank"> လင့်2ရဲ့အမည်ကိုဒီမှာထည့်ပါ </a><br />
<a href="လင့်3ကိုဒီမှာထည့်ပါ" target="_blank"> လင့်3ရဲ့အမည်ကိုဒီမှာထည့်ပါ </a><br />
</div>

Code ကိုပြုပြင်ရန်

• ဒီနေရာမှာ အရေးကြီးတာက ကျွန်တော် အနီရောင် နဲ့ရေးပြထားတဲ့ FreeIdea ဆိုတဲ့ စာလုံးတွေကို ကိုယ့်စိတ်ကြိုက်ပေးလို့ပါတယ်။ ဒါပေမဲ့ နှစ်နေရာလုံး စာလုံးပေါင်း/အကြီးအသေး တူရမှာဖြစ်ပါတယ်။ မတူရင် Code အလုပ်မလုပ်ပါ။ ဒီလို +/- Link တွေ Sidebar မှာ တစ်ခုမက ထည့်မယ်ဆိုရင်လည်း တစ်ခုနဲ့တစ်ခု မတူအောင် ပေးရမှာ ဖြစ်ပါတယ်။
• ကျွန်တော် အပြာရောင် နဲ့ရေးပြထားတဲ့ နေရာတွေကတော့ ကိုယ်ကြိုက်တဲ့ Link တွေကို ထည့်ပေးလို့ ရပါတယ်။ တစ်ခုသတိထားသင့်တာက Link ရဲ့ရှေ့မှာ http:// ဆိုတာကို ထည့်ပေးရမှာ ဖြစ်ပါတယ်။
• ကျွန်တော့် အနေနဲ့ Link (3) ခုကိုဘဲ နမူနာပေးထားတာပါ။ တကယ်လို့ မိတ်ဆွေအနေနဲ့ Link တွေထပ်တိုးထည့်ချင်သေးတယ် ဆိုရင် အောက်ဆုံး </div> ဆိုတာလေးရဲ့ ရှေ့မှာ <a href="လင့်ကိုဒီမှာထည့်ပါ" target="_blank"> လင့်ရဲ့အမည်ကိုဒီမှာထည့်ပါ </a><br /> အတိုင်း ထပ်တိုးထည့်နိုင်ပါတယ်။ ( Code ရဲ့ နောက်ဆုံးမှာတော့ </div> နဲ့ အဆုံးသတ်ရပါမယ်။)
• အားလုံးပြီးသွားပြီ ဆိုရင်တော့ အောက်မှာပါတဲ့ Save ကိုနှိပ်လိုက်လို့ ရပါတယ်။

ကျွန်တော် သိသလောက်လေးကို ရေးပြခြင်းသာ ဖြစ်ပါတယ် ....။
အဆင်ပြေနိုင်ကြပါစေ ....