မာတိကာ တစ္ခု ဖန္တီးျခင္း (JSon)

မာတိကာတစ္ခု လုပ္ၿပီး က်ေနာ္တို႔ ေနရာ သံုးေနရာမွာ သြားထားလို႔ ရပါတယ္။
(၁) Widget တစ္ခု အျဖစ္ Sidebar တြင္ ဖန္တီးျခင္း (Sidebar Widget)
(၂) Widget တစ္ခု အျဖစ္ Header ၏ ေအာက္တြင္ ဖန္တီးျခင္း (Header Widget)
(၃) ပို႔စ္တစ္ခု အျဖစ္ ဖန္တီးျခင္း (Post Widget)

ကဲ ... က်ေနာ္တို႔ ေလ့က်င့္ခန္းေလး စလိုက္ရေအာင္။

အဆင့္ (၁) စတိုင္ သက္မွတ္ျခင္း

<br />#toc {<br />border: 0px solid #000000;<br />background: #ffffff;<br />padding: 5px;<br />width:500px;<br />margin:10px 0 20px 0;<br />}<br />.toc-header-col1, .toc-header-col2, .toc-header-col3 {<br />background: #e0e0e0;<br />color: #5d5d54;<br />padding: 8px 5px 8px 5px;<br />width: 300px;<br />}<br />.toc-header-col1 {<br />width:300px;<br />}<br />.toc-header-col2 {<br />width:75px;<br />}<br />.toc-header-col3 {<br />width:125px;<br />}<br />.toc-header-col1 a:link, .toc-header-col1 a:visited, <br />.toc-header-col2 a:link, .toc-header-col2 a:visited, <br />.toc-header-col3 a:link, .toc-header-col3 a:visited {<br />font-size:90%;<br />color: #404040;<br />text-decoration:none;<br />}<br />.toc-header-col1 a:hover, .toc-header-col2 a:hover, <br />.toc-header-col3 a:hover {<br />font-size:90%;<br />text-decoration:underline;<br />}<br /><br />.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {<br />padding-left: 5px;<br />font-size:90%;<br />}<br /><br />.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a {<br />text-decoration: none;<br />}

အဆင့္ (၂) Widget တစ္ခု ျပဳလုပ္ျခင္း

Sidebar Widget တစ္ခု အေနနဲ႔ လုပ္မယ္ဆိုရင္ ...

Template ကို Save ေပးပါ။ ေနာက္ၿပီး Layout >> Page Elements မွာ Add a page element ကို ႏွိပ္ၿပီး HTML/Javascript ကို ေရြးေပးပါ။ ေနာက္ၿပီး Text Box ထဲကို ေအာက္က Code ေတြ ကူးထည့္ၿပီး Save ေပးပါ။ Save မလုပ္ခင္ http://YOURBLOGURL.com ေနရာမွာ ကိုယ့္ရဲ႕ ဘေလာ့ဂ္ လိပ္စာကို ျပင္ဖို႔ မေမ့ပါနဲ႔။ ဒါဆို မာတိကာကို ေဖာ္ျပမယ့္ Sidebar Widget တစ္ခု ရပါၿပီ။

<br /><div id="toclink"><br /><p>On this page you can see the whole list of posts published.</p> <br /><p>To show the full table of contents, please click on the link below (this may take a few moments to load)</p> <br /><p><a href="javascript:showToc();"><b>Show table of contents</b></a></p> <br /><br/><br/><br/><br/><br /></div> <br /><script style="text/javascript" src="http://bloggerbuster.com/scripts/blogtoc.js"></script> <br /><script src="http://YOURBLOGURL.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script><br /><div id="toc"></div>

Header Widget တစ္ခု လုပ္ခ်င္တယ္ ဆိုရင္ေတာ့ ...

Edit HTML ထဲမွာ <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> ကို ရွာေပးပါ။ အတိအက် မတူတာေတာင္ အနီးစပ္ဆံုး တူတာ တစ္ခု ေတြ႕ပါလိမ့္မယ္။ ေတြ႕ၿပီဆိုရင္ ေအာက္မွာ ျပထားတဲ့ အနီေရာင္ ေနရာအတုိင္း ျပင္ေပးပါ။ Template ကို Save ေပးပါ။

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

က်ေနာ္တို႔ လုပ္ခ်င္တဲ့ ပံုစံက Sidebar မွာ ရွိတဲ့ Show table of contents ဆိုတဲ့ စာကုိ ကလစ္ႏွိပ္လိုက္ရင္ Header နဲ႔ ပို႔စ္နဲ႔ ၾကားမွာ မာတိကာ ေပၚခ်င္တာပါ။ ဒါေၾကာင့္ Layout >> Page Elements မွာ Sidebar က Add a page element ကို ကလစ္ႏွိပ္ၿပီး HTML/Javascript ကို ေရြးေပးပါ။ ၿပီးရင္ Text Box ထဲမွာ ေအာက္က Code ကို ထည့္ေပးပါ။ http://YOURBLOGURL.com ဆိုတဲ့ ေနရာမွာ ကိုယ့္ရဲ႕ ဘေလာ့ဂ္ လိပ္စာ ျပင္ဖို႔ မေမ့ပါနဲ႔။ ၿပီးရင္ Save ေပးပါ။

<br /><div id="toclink"><br /><p>On this page you can see the whole list of posts published.</p> <br /><p>To show the full table of contents, please click on the link below (this may take a few moments to load)</p> <br /><p><a href="javascript:showToc();"><b>Show table of contents</b></a></p> <br /><br/><br/><br/><br/><br /></div> <br /><script style="text/javascript" src="http://bloggerbuster.com/scripts/blogtoc.js"></script> <br /><script src="http://YOURBLOGURL.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

ေနာက္ၿပီး Header ရဲ႕ ေအာက္မွာလဲ Add a page element ေတြ႕ပါလိမ့္မယ္။ ကလစ္ႏွိပ္ၿပီး HTML/Javascript ကို ေရြးေပးပါ။ ေနာက္ၿပီး Text Box ထဲမွာ <div id="toc"></div> ကို ထည့္ၿပီး Save ေပးပါ။ ဒါဆို မာတိကာ ပါတဲ့ Header Widget တစ္ခု ဖန္တီးလို႔ ၿပီးပါၿပီ။

Post Widget တစ္ခု ဖန္တီးမယ္ ဆိုရင္ ...

Template ကို Save လိုက္ပါ။ ၿပီး Posting မွာ New Post ယူလိုက္ပါ။ ၿပီးရင္ Post Editor မွာ ေအာက္က Code ေတြကို ကူးထည့္ေပးပါ။ http://YOURBLOGURL.com ဆိုတဲ့ ေနရာမွာ ကိုယ့္ရဲ႕ ဘေလာ့ဂ္ လိပ္စာ ျပင္ဖို႔ မေမ့ပါနဲ႔။ ၿပီးရင္ Publish လုပ္လိုက္ပါ။

<br /><script style="text/javascript" src="http://bloggerbuster.com/scripts/blogtoc.js"></script> <br /><script src="http://YOURBLOGURL.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script><br /><div id="toc"><script type="text/javascript">showToc();</script></div>

အထက္မွာ ေျပာထားတဲ့ သံုးမ်ဳိးထဲက ကိုယ္ႀကိဳက္တဲ့ တစ္မ်ဳိးကို ေရြးသံုးႏိုင္ပါတယ္။ အဆင္ေျပဆံုးကေတာ့ Sidebar Widget ပါ။ ပို႔စ္မ်ားရင္ မ်ားသလို တင္ရတာ ေလးေနတတ္ပါတယ္။ ကလစ္ႏွိပ္မွ မာတိကာ တည္ေဆာက္တာကို စလုပ္မယ္ဆိုရင္ ဘေလာ့ဂ္တက္တာကို သိပ္မေႏွးေစေတာ့ပါဘူး။ ဘေလာ့ထဲ စ၀င္ကတည္းက မာတိကာကို ေဖာ္ျပထားခ်င္တယ္ ဆိုရင္ေတာ့ ဒီစာပုိဒ္ရဲ႕ အထက္က Code ေတြကို ကူးၿပီး Layout >> Page Elements >> Add a page element >> HTML/Javascript ကို သြားထည့္လိုက္႐ံုပါပဲ။ ဘေလာ့ဂ္ တက္တက္ခ်င္း မာတိကာကို မေဖာ္ျပသင့္ပါဘူး။ အဓိကက ဘေလာ့ဂ္တက္တာ အရမ္းေႏွးသြားပါ႔မယ္။

ဒီ မာတိကာရဲ႕ အားသာခ်က္က ေကာ္လံ သံုးခု ခြဲၿပီး ျပပါတယ္။ ပို႔စ္ေခါင္းစဥ္၊ တင္တဲ့ ရက္စြဲနဲ႔ Label ဆိုၿပီး ေကာ္လံ သံုးခု ခြဲထားတယ္။ Post Title (သိုု႔) Date ကို ကလစ္ႏွိပ္လိုက္ရင္ ပို႔စ္ကို ႀကီးစဥ္ငယ္လိုက္ (သုိ႔) ငယ္စဥ္ႀကီးလိုက္ စီေပးပါတယ္။ မာတိကာ ထဲက ပို႔စ္တစ္ခုမွာ ပါတဲ့ Label ကုိ ကလစ္ႏွိပ္လိုက္ရင္လည္း ႏွိပ္လိုက္တဲ့ Label ကိုပဲ ေရြးၿပီး ျပေပးပါတယ္။ မာတိကာ လုပ္နည္းေတြ အမ်ားႀကီး ရွိေပမယ့္ ဒီနည္းဟာ လုပ္ေဆာင္ခ်က္ အစံုဆံုးပါပဲ။ စမ္းသပ္ၾကည့္ပါ။ အဆင္ေျပပါေစဗ်ာ။