Accordion Menu

က်ေနာ့္ Blog ရဲ႕ ေဘးက ေလွ်ာကနဲ ေလွ်ာကနဲ ထြက္သြားတဲ့ Sidebar ကို ဘယ္လိုလုပ္လဲလုိ႔ ညီငယ္တစ္ေယာက္က ေမးလာတယ္။ အဲဒါ က်ေနာ္လုပ္တာမဟုတ္ပါဘူး။ (ဟီး.. အဲေလာက္သာေတာ္ရင္ေတာ့.. =D ) က်ေနာ္ တစ္ေနရာက သြားကူးလာတာပါ။ အဲဒါကို ဘယ္ကစေတြ႔တာလဲ ဆိုေတာ့ ကိုေဝယံလင္း ရဲ႕ Switch Menu ဆိုတဲ့ post ကပါ။ က်ေနာ္ လက္ရွိသံုးထားတဲ့ဟာက အဲဒီ ပံုစံအမ်ိဳးစားထဲကပဲ တျခား Menu Set တစ္ခုကို ယူလိုက္တာပါ။ Blogspot မွာ sidebar တစ္ခုအေနနဲ႔ ဘယ္လို ရေအာင္လုပ္လဲ ဆိုတာေျပာျပပါ့မယ္။

အရင္ဆံုး အဲဒီ Menu Set ေတြရွိတဲ့ ဒီကို သြားပါ။ ေပးထားတဲ့ "ddaccordion.js" "jquery-1.2.6.pack.js" နဲ႔ Code Box ေအာက္က ေပးထားတဲ့ ပံု ၃ပံု ကို Download လုပ္ၿပီး Ripway လိုမ်ိဳး File Hosting တစ္ခုမွာ သြားတင္ထားလိုက္ပါ။ ေနာက္က်မွ ကုိယ့္ရဲ႕ URL ေတြကို သူျဖည့္ခိုင္းတဲ့ ေနရာမွာ ျဖည့္လိုက္ပါ။

ၿပီးရင္ Code Box ထဲက code ေတြကူးရမယ္။ ကူးတဲ့အခါ <head> </head> <body> </body> ဆိုတဲ့ အပုိင္းေတြကို ခ်န္ၿပီးကူးပါ။ ကူးၿပီးရင္ sidebar ရဲ႕ addelement မွာ HTML/Java ကိုေရြးၿပီး ကူးထည့္လိုက္ပါ။ <data:h3 class .....> </h3> ၾကားက ဟာက အျပင္မွာ ေပၚတဲ့ ေခါင္းစဥ္ေတြ ျဖစ္ၿပီး ေအာက္က <li> <a href="...."> </a> </li> ဆိုတာေတြ ၾကားက ကိုယ္လုိခ်င္တဲ့ ဟာေတြရဲ႕ link ေတြ ျဖစ္ပါတယ္။ သူေပးထားတဲ့ code ေတြထဲမွာ ကိုယ့္အတြက္ အသံုးတည့္တာေတြ ပါသလို မပါတာေတြလဲ ပါပါတယ္။ ကိုယ္လိုခ်င္တဲ့ထိ စိတ္တိုင္းက်ျဖစ္ေအာင္ေတာ့ ဟိုစမ္းဒီစမ္းနဲ႔ ကလိၾကည့္ေပါ့။

အေရးႀကီး တစ္ခုေျပာခ်င္တာက သူက Blogspot က ေပးသလို Label တို႔ Archives တို႔လို auto မဟုတ္ပဲ တစ္ခုခ်င္းစီကို link လိုက္ ထည့္ရတာျဖစ္တဲ့ အတြက္ ေတာ္ေတာ္ေတာ့ လက္ေပါက္ကပ္ပါတယ္။ Label ေတြေဘးမွာ နံပါတ္ေတြပါ တပ္ခ်င္တယ္ဆုိရင္ Post အသစ္တစ္ခုတင္တုိင္း အဲဒီ မွာ သြားသြားၿပီးေတာ့ Manually ၁ တိုးေပးရပါတယ္။ အျမင္လွေပမယ့္ လူေတာ့ မသက္သာလွပါဘူး။ အထူးသျဖင့္ ပထမဆံုးလုပ္တဲ့ အခ်ိန္ေပါ့။ လုပ္ၾကည့္လို႔ အဆင္ေျပတာရွိ၊ မေျပတာရွိလဲ ေျပာျပခဲ့ပါဦး။ ။

ရႊင္လန္းခ်မ္းေျမ့ၾကပါေစ ။ ။

ဆက္ဖတ္ရန္...

ျပန္သိမ္းရန္...

Blog Page Nav

က်ေနာ့္ Blog ျပင္တုန္းက Page Navigation ကို အစက ဒီထဲကလိုမ်ိဳး နံပါတ္နဲ႔ လုပ္မလို႔။ ေနာက္ေတာ့ နံပါတ္ေတြ ရႈပ္ပါတယ္ဆိုၿပီး စိတ္ကူး ေပၚသလိုပံုဆဲြၿပီး အဲဒီပံုကို နဂိုေပၚတဲ့ "Older-Post" "Newer-Post" ေနရာေတြမွာ အစားထုိးလိုက္တယ္။ ဘယ္လိုလုပ္လဲ တစ္ဆင့္ခ်င္းဆီ ေျပာျပမယ္...

ထည့္ခ်င္တဲ့ ပံုကို URL တစ္ခုရေအာင္ လုပ္ရမယ္...
ကိုယ္လိုခ်င္တဲ့ မွ်ား ပံုတစ္ပံုကို အရင္ဆြဲပါ။ က်ေနာ့္ "အေဟာင္းမ်ား" "အသစ္မ်ား" ကို လဲ Download လုပ္ၿပီးသံုးလို႔ရပါတယ္။ Download လုပ္ၿပီးသြားရင္ Ripway လိုမ်ိဳး hosting တစ္ခုခုမွာ တင္လိုက္ပါ။ ပံုေတြရဲ႕ URL ရပါလိမ့္မယ္။

Template ကို Backup လုပ္ရမယ္...
Blog ရဲ႕ HTML ျပင္တဲ့ ေနရာကို သြား။ Customize>Layout> Edit HTML
Download Full HTML ႏွိပ္ၿပီး တစ္ေနရာမွာ သိမ္းထားလိုက္ပါ။

ျပင္ဆင္ၿပီးသြားရင္ ပံုထည့္မယ္...
Expand Widget Templates ဆိုတာကို Tick လုပ္လုိက္ပါ။
ၿပီးရင္ <data:olderPageTitle/> ဆုိတဲ့ ဟာကို ရွာပါ။ (Firefox ဆိုရင္ Ctrl+F ႏွိပ္ၿပီး ရွာရင္ ပိုျမန္ပါတယ္)

[[အဲဒီဟာက အျပင္မွာ ျမင္ရတဲ့ "Older Page" ဆိုတဲ့ စာသားကို ကုိယ္စားျပဳတာပါ။ အဲဒါဖ်က္လိုက္ရင္ "Older Page" ဆိုတဲ့ စာသားမျမင္ရေတာ့ဘူး။]]

အခု အဲဒီစာသားေနရာမွာ <img height='64' src='YOUR IMAGE URL' width='100'/> ဆိုတဲ့ဟာ ထည့္ရမယ္။

[[အနီ နဲ႔ေရးထားတဲ့ link ေနရာမွာ က်ေနာ္တို႔ လုပ္ခဲ့တဲ့ ပံုရဲ႕ URL ကို ထည့္ေပးရပါမယ္။ က်ေနာ္ ေပးထားတဲ့ ပံုကို သံုးမယ္ ဆုိရင္ေတာ့ height နဲ႔ width နဲ႔ ကို ျပင္စရာ မလုိပါဘူး။ က်ေနာ့္ရဲ႕ "Newer Post" ပံုက Width="120" ရွိပါတယ္။ ကုိယ့္ပံု ကိုယ္သံုးခ်င္တယ္ဆုိရင္ ေတာ့ ပံုနဲ႔ ညီေအာင္ လုိက္ၿပီး ျပင္ေပးရပါမယ္။]]

လုပ္ငန္းစဥ္ရဲ႕ တစ္ဝက္ၿပီးပါၿပီ။ "Preview " အရင္လုပ္ၾကည့္လိုက္ပါ။ "Older post" စာသား ေပ်ာက္ၿပီး တင္ထားတဲ့ ပံုေရာက္ေနတာေတြ႕ရပါလိမ့္မယ္။ "Older post" ကိစၥၿပီးသြားေတာ့ "newer post" ကိုလဲ <data:newerPageTitle/> ဆိုတာရွာၿပီး အေပၚက အဆင့္ေတြအတိုင္း ျပန္လုပ္ပါ။
ၿပီးရင္ "Save Template " လုပ္လုိက္ပါ။

အလယ္ေခါင္မွာ "Home" ဆိုတာေလး က်န္ေနပါေသးတယ္။ အဲဒါကို က်ေနာ္က ေဖ်ာက္ထားတယ္။ ဘယ္လုိေဖ်ာက္လဲဆိုရင္ အခုဏက လုပ္ေနတဲ့ ေအာက္နားမွာရွိတဲ့ <data:homeMsg/> ဆုိတာကို ရွာပါ။ ၂ ေနရာေတြ႕ပါလိမ့္မယ္။ အဲဒါေလးကို ဖ်က္လိုက္ရင္ မျမင္ရေတာ့ပါဘူး။

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
အဲလိုမလုပ္ခ်င္ဘူး ပံုထပ္ဆြဲၿပီး တင္ခ်င္တယ္ဆိုရင္ ေတာ့ အဲဒီ <data:homeMsg/> ဆိုတဲ့ ေနရာမွာ ပံုဆြဲၿပီး အေပၚကလိုမ်ိဳး ျပန္လုပ္ရင္ ကိုယ္လိုခ်င္တဲ့ ပံုေလး အလယ္မွာ ေရာက္ေနတာ ေတြ႕ရပါလိမ့္မယ္။

ကဲ.. Page Navigation ကို ပံုစံတစ္မ်ိဳးေလးနဲ႔ ျဖစ္ေအာင္ လုပ္လုိက္ၿပီ။ သေဘာက် မက်၊ နားလည္ရ လြယ္မလြယ္၊ အက်ိဳး ရွိမရွိ၊ ဆိုတာေတြကို ျပန္လည္ ထင္ျမင္ခ်က္ေတြကို အႀကံေပးေစလိုပါတယ္။ ။

ဆက္ဖတ္ရန္...

ျပန္သိမ္းရန္...

Blog Post Backups

က်ေနာ္ေရးခဲ့တဲ့ Some Back-Ups မွာေျပာသလို ေရးထားတဲ့ post ေတြကို Backup တကယ္ လုပ္သင့္ပါတယ္။ ဒါေပမယ့္ ေရးတာလဲ အေတာ္ခရီးေပါက္ေနၿပီ။ အခုမွ တစ္ခုျခင္းစီ Backup လုပ္ရေအာင္လဲ အခ်ိန္မေပးခ်င္ဘူးဆိုရင္။ ဒီ software ေလးသံုးၾကည့္ပါ။ Blogger Buster မွာ ညႊန္းထားတာ ေတြ႕လို႔ သံုးၾကည့္တာ ေတာ္ေတာ္အဆင္ေျပတယ္။ Post အားလံုး မပင္မပန္းပဲ သိမ္းၿပီးသားျဖစ္သြားတယ္။ အဲဒီ Backup File ေတြကိုပဲ ျပန္ၿပီး Post အေနနဲ႔လဲ တင္လို႔ရတယ္။ သံုးၾကည့္ေပါ့။ ။

ဆက္ဖတ္ရန္...

ျပန္သိမ္းရန္...

Blogger Nav Bar

Blog ေပၚဘက္မွာ ရွိတဲ့ Bar တစ္ခုရွိတယ္။ Nav Bar လို႔ေခၚတယ္တဲ့။ အဲဒါႀကီးက မ်က္စိေနာက္စရာႀကီး ႀကိဳက္လဲမႀကိဳက္ဘူးဆိုၿပီး ေမာင္ Harry တစ္ေယာက္ ေဖ်ာက္ပစ္လိုက္တယ္။ အဲဒီမွာ စ ရြာပတ္တာပဲ။ Post တစ္ခုေရးခ်င္တိုင္း၊ Edit လုပ္ခ်င္တိုင္း Blogspot.com ကို ျပန္သြား၊ sign in လုပ္နဲ႔ ဒုကၡကို ေရာက္ေရာ။ ေနာက္ဆံုး BlogU မွာ အဲဒါကို Mouse Hover လုပ္လိုက္မွ က်လာေအာင္ လုပ္ထားတာ သြားေတြ႕တယ္။ ဟိုႀကံ ဒီလုပ္နဲ႔ ေမာင္ ေအာင္သူမိုးတစ္ေယာက္ သူ႕ ဆီမွာလဲ လုပ္ထားတာေတြ႕ေတာ့ code ကူးလိုက္တယ္။ အဆင္ေျပသြားေရာ။ သေဘာက်ရင္ လုပ္လို႔ရေအာင္ ဘယ္လိုလုပ္လဲ ဆိုတာေျပာျပမယ္။

~အေရးႀကီးဆံုးကေတာ့ ဘာမွမလုပ္ခင္ Template ကို Full Back Up လုုပ္ပါ။

~HTML ျပင္တဲ့ေနရာမွာ ေအာက္က ဟာကို ရွာပါ။

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

~ၿပီးရင္ ဒီဟာနဲ႔ အစားထုိးလိုက္ပါ။

#navbar-iframe{height:30px;opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{height:30px;opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

ဒါဆိုရင္ mouse hover လုပ္လိုက္ေတာ့မွ က်လာတဲ့ navbar အရွင္ကို ရပါလိမ့္မယ္။

မွတ္ခ်က္။ ။ ie တြင္ အဘယ္ေၾကာင္းေၾကာင့္မွန္းမသိ အလုပ္မလုပ္ပါ။ သိလွ်င္ ေျပာျပၾကပါဦး။

ဆက္ဖတ္ရန္...

ျပန္သိမ္းရန္...