ကွျန်ေတာ်ဆိုဒ်မှာ Post မတင်ြဖစ်တာလည်းြကာြပီဗျာ ... ဘာြဖစ်လို့မတင်ြဖစ်တာလည်းဆိုတာကို ကွျန်ေတာ်အေြကာင်းြပချက်ေတွမေပးေတာ့ပါဘူး။ အာလံုးသိေနတာပဲ။ အခု Post တစ်ခုတင်လိုက်ပါတယ်။ Blogger Blog အတွက် Hide/Show Collapsible Panel ထည့်ြခင်းနှင့် Link Nudging ထည့်ြခင်း ဆိုတဲ့ Post ေပါ့ဗျာ။ သူကဘာလဲဆိုေတာ့ အေပါ်ကပံုကိုြကည့်နိုင်သလို ကွျန်ေတာ်ဆိုဒ်ရဲ့ Sidebar မှာလည်း နမူနာြကည့်နိုင်ပါတယ်။ အဲ့လိုထည့်ချင်တဲ့သူေတွအတွက်ဒီ Post ကိုတင်လိုက်တာပါ ။ ။
အခုထည့်မှာကနှစ်ခုပါ Hide/Show Collapsible Panel နဲ့ Link Nudging ြဖစ်ပါတယ်။ ပထမဦးဆုံး Hide/Show Collapsible Panel ဆိုတဲ့ထည့်နည်းကိုအရင်ေြပာပါမယ်။ ဒီလိုလုပ်ြကည့်ပါခင်ဗျား ။ ။
Blogger Dashboard >> Design >> Edit HTML >>Expand Widget Templates ကိုအမှန်ြခစ်ေပးြပီး ]]></b:skin> ကိုရှာပါ၊ ေတွ့ြပီဆိုရင် ဒီေအာက် Code ကို ]]></b:skin> အေပါ်မှာထည့်လိုက်ပါ။
.posthidden {display:none}
.postshown {display:inline}
ြပီးရင် </head> ကိုရှာပါ။ ေတွ့ရင်ဒီေအာက်က Code ကို </head> ရဲ့အေပါ်မှာထည့်လိုက်ပါ။ ေနာက် Save Template ကိုနိုပ်လိုက်ပါ။
<!-- Expand Collapse Post-->
<script type='text/Javascript'>
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="postshown") {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}
</script>
<!-- Expand Collapse Post ends-->
အဲ့ဒါ သူငယ်ချင်းတို့ Hide/Show Collapsible Panel ကိုထည့်လို့ရေအာင်လုပ်နည်းလုပ်ြပီးသွားပါြပီ။ ထည့်နည်းေလးေြပာပါမယ်။ ကိုယ့် Blog ရဲ့ Sidebar မှာပဲြဖစ်ြဖစ် Post မှာပဲြဖစ်ြဖစ်ထည့်မယ်ဆိုရင် ဒီလိုထည့်ရပါမယ်။
<a href="javascript:expandcollapse('subtopic0001')">
<h4>ထည့်ချင်တဲ့ေခါင်းစဉ်ထည့်ပါ </h4></a>
<span class="posthidden" id="subtopic0001">
ထည့်ချင်တဲ့အေြကာင်းအရာလင့်ခ်ထည့်ပါ
</span>
ဥပမာ -
<a href="javascript:expandcollapse('subtopic000
1')">
<h4>
+/- MM Albums </h4></a><span class="posthidden" id="subtopic000
1">
<a href="http://www.ehlar.com/2011/12/bobby-soxer.html">လွှမ်းပိုင် ၊ Bobby Soxer - ဒံုးပျံ </a></span>
အဲ့လိုထည့်ရင်ေအာက်ပါပံုအတိုင်းေပါ်လာမှာပါ။
+/- MM Albums
လွှမ်းပိုင် ၊ Bobby Soxer - ဒံုးပျံ subtopic0001 မှာအပိုင်းမှာထည့်ထားတဲ့လင့်ခ်က လွှမ်းပိုင် ၊ Bobby Soxer - ဒံုးပျံ ြဖစ်ပါတယ်။ အဲ့ဒီအပိုင်းမှာ သူငယ်ချင်းတို့ထည့်ချင်တဲ့လင့်ခ်ေတွြကိုက်သေလာက်ထည့်နိုင်ပါတယ်။ လင့်ခ်တစ်ခုြပီးတစ်ခုထည့်ရမှာြဖစ်ပါတယ်။
အစိမ်းေရာင်နဲ့ ြပထားတဲ့ +/- MM Albums (သူငယ်ချင်းတို့ြကိုက်တဲ့နာမည်ထည့်နိုင်တယ်ေနာ်) အပိုင်းမှာသူငယ်ချင်းတို့ ြကိုက်သလိုထည့်ြပီးြပီဆိုရင် ဥပမာ +/- MM Albums နာမည်နဲ့မတူပဲ နာမည်ေနာက်တစ်ခုေြပာင်းချင်တယ်ဆိုရင် +/- MM Albums ကိုေြပာင်းနိုင်ပါတယ်။ ြပီးရင် သူငယ်ချင်းတို့ေနာက်တစ်ခုလုပ်မှာဆိုေတာ့ subtopic0001 ထဲက 1 မှာ 2 ဆိုြပီးထည့်ရပါမယ်။
ဥပမာ -
<a href="javascript:expandcollapse('subtopic0002')">
<h4>+/- MM Playlists </h4></a><span class="posthidden" id="subtopic0002">
<a href="http://www.ehlar.com/2012/01/playlist_27.html">အိုဘားမားသွားတိုင်မလား မိုင်နာပဲ </a></span>
+/- MM Playlists
အိုဘားမားသွားတိုင်မလား မိုင်နာပဲ အဲ့လိုပဲေနာက်ထပ်သူငယ်ချင်းတို့ ထပ်လုပ်ချင်တယ်ဆိုရင် 1, 2 , 3, 4 ဆိုြပီးထပ်တိုးသွားလိုက်ရံုပါပဲ။ ဒါက Hide/Show Collapsible Panel အပိုင်းြပီးပါြပီ။ အဲ့ေလာက်မှာပဲရပ်ချင်တဲ့သူေတွရပ်လို့ရပါြပီ။ ဒါေပမဲ့ ကွျန်ေတာ့်ဆိုဒ်က Sidebar
လိုလင့်ခ်ကိုေထာက်လိုက်ရင်လှုပ်ေနတာမျိုးလုပ်ချင်ေသးရင်ေတာ့ထပ်လုပ်ြကည့်ချင်ရင် လုပ်ြကည့်ပါ။ သူက Link Nudging လို့ေခါ်ပါတယ်။ အဲ့လိုလုပ်ချင်ရင်ေအာက်ပါအတိုင်းလုပ်နိုင်ပါတယ်။
</head> ကိုြပန်ရှာပါ။ ေတွြပီဆိုရင် ေအာက်ပါ Code ကို </head> ရဲ့အေပါ်မှာထည့်လိုက်ပါ။
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var dur = 400; // Duration Of Animation in Milli Seconds
$(document).ready(function() {
$('a.linknudge').hover(function() {
$(this).animate({
paddingLeft: '25px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
}); // end of Jquery Script
</script>
ြပီးရင် Save Template နိုပ်ပါ။ ေနာက်အေပါ်ကထည့်ထားတဲ့လင့်ခ်ေတွမှာ Link Nudging style ထည့်မယ်ဆိုရင်ဒီလိုထည့်ရပါမယ်။
<a href="javascript:expandcollapse('subtopic0001')">
<h4> +/- MM Albums</h4></a><span class="posthidden" id="subtopic0001">
<a class='linknudge' href='http://www.ehlar.com/2011/12/bobby-soxer.html'>လွှမ်းပိုင် ၊ Bobby Soxer - ဒံုးပျံ </a></span>
ေအာက်ပါအတိုင်းြမင်ရပါမယ် ... +/- MM Albums ကိုနိုပ်ြပီး လွှမ်းပိုင် ၊ Bobby Soxer - ဒံုးပျံ ကိုထိြကည့်ပါ။ Link Nudging style နဲ့လှုပ်ေနတာြမင်ရပါမယ်။
+/- MM Albums
လွှမ်းပိုင် ၊ Bobby Soxer - ဒံုးပျံ Link Nudging အပိုင်းလည်းြပီးပါြပီ။ တကယ်လို့ Post ေတွမှာသူငယ်ချင်းတို့ထည့်တဲ့လင့်ခ်ေတွက Link Nudging style နဲ့ထည့်မယ်ဆိုရင် ဒီလိုထည့်ရပါမယ်။
<a class='linknudge' href='Url'>Link Name</a>
ဥပမာ -
<a class='linknudge' href='http://www.ehlar.com/2011/12/album_18.html'>ေကျာ်ထွဋ်ေဆွ - ရပ်ကွက်ထဲကအရူး</a>
ေအာက်ပါအတိုင်းြမင်ရပါမယ်။
ေကျာ်ထွဋ်ေဆွ - ရပ်ကွက်ထဲကအရူး
အဲ့ဒါပါပဲခင်ဗျား။ Blogger Blog အတွက် Hide/Show Collapsible Panel ထည့်ြခင်းနှင့် Link Nudging ထည့်ြခင်း အြပည့်အစံုပါပဲ။ ေကျးဇူးတင်ပါတယ်ခင်ဗျား။ ။
Update! ၈လ ၁ရက် ၂၀၁၂ ခုနှစ်
ေအာက်ပါကျွန်ေတာ်တင်တဲ့နမူနာြကည့်နိုင်ပါတယ်။ အဲ့လိုလည်းတင်လို့ရပါတယ်။ ြကည့်ရလွယ်ေအာင်အေရာင်ခွဲထားပါတယ်။ ။
<a href="javascript:expandcollapse('subtopic0001')">
<h4>+/- Myanmar Playlists</h4></a>
<span class="posthidden" id="subtopic0001">
<ul><li><a class='linknudge' href='http://www.ehlar.com/2012/07/collection_28.html'>ေမာင်မိုးေအာင် [Collection]</a></li></ul><ul><li><a class='linknudge' href='http://www.ehlar.com/2012/07/emc-j-ki-collection.html'>Emc. J Ki [Collection]</a></li></ul>
<ul><li><a class='linknudge' href='http://www.ehlar.com/2012/07/x-box-collection.html'>X-BoX [Collection]</a></li></ul><ul><li><a class='linknudge' href='http://www.ehlar.com/2012/07/mrehlars-collection-2-demo.html'>Mr.Ehlar's Collection [2]</a></li></ul>
<ul><li><a class='linknudge' href='http://www.ehlar.com/2012/07/mrehlars-collection-3.html'>Mr.Ehlar's Collection [3]</a></li></ul><ul><li><a class='linknudge' href='http://www.ehlar.com/2012/07/mc-yan-yan-collection.html'>MC Yan Yan [Collection]</a></li></ul>
<ul><li><a class='linknudge' href='http://www.ehlar.com/2012/07/bone-collection.html'>Bone+ [Collection]</a></li></ul><ul><li><a class='linknudge' href='http://www.ehlar.com/2012/07/i-beat-collection.html'>i-Beat [Collection]</a></li></ul>
<ul><li><a class='linknudge' href='http://www.ehlar.com/2012/07/b-clipz-collection.html'> ေအာင်ရဲထိုက်(B-Clipz') [Collection]</a></li></ul><ul><li><a class='linknudge' href='http://www.ehlar.com/2012/07/amz-collection.html'>AMZ [Collection]</a></li></ul>
<ul><li><a class='linknudge' href='http://www.ehlar.com/2012/06/air-air-collection.html'>Air Air [Collection]</a></li></ul><ul><li><a class='linknudge' href='http://www.ehlar.com/2012/06/collection.html'>သဲချစ်ကို[Collection]</a></li></ul>
<ul><li><a class='linknudge' href='http://www.ehlar.com/2012/07/collection.html'>Lay Net [Collection]</a></li></ul><ul><li><a class='linknudge' href='http://www.ehlar.com/2012/01/playlist_27.html'>Obama</a></li></ul>
<ul><li><a class='linknudge' href='http://www.ehlar.com/2011/12/playlist.html'>Remix </a></li></ul><ul><li><a class='linknudge' href='http://www.ehlar.com/2012/01/michelle-obama-playlist.html'>Michelle Obama</a></li></ul>
<ul><li><a class='linknudge' href='http://www.ehlar.com/2012/01/blog-post_22.html'>ရှင်ဖုန်းp</a></li></ul><ul><li><a class='linknudge' href='http://www.ehlar.com/2012/02/blog-post_03.html'>ရိန်းမိုး</a></li></ul>
</span>
