ဘေလာ့မွာ Table Of Contents ( Site Map ) အလြယ္ထည့္နည္း

ဘေလာ့တစ္ခုရဲ႕ အေရးပါတဲ့ အစိပ္အပိုင္းေတြထဲက
တစ္ခုကို ေျပာပါဆိုရင္ Site Map လို႔ပဲေခၚေခၚ
Table Of Contents ( TOC ) လို႔ပဲေခၚေခၚ
ေရးခဲ့ၿပီးသမွ် ပို႔စ္ေတြအားလံုးကို Page တစ္ခုထဲမွာ
တစ္ေပါင္းတစ္စည္းတည္း ေဖၚျပေပးတဲ့ Page ေလးတစ္ခုဟာ
ကိုယ့္ဘေလာ့ကို အလည္လာတဲ့ မိတ္ေဆြေတြအတြက္
အခ်ိန္ကုန္သက္သာေစသလို ကိုယ္လိုခ်င္တာကို အလြယ္တကူနဲ႔ ရွာေဖြႏိုင္မွာပါ
Dear Visitor,
I've shared a technique on creating a table of content or site map for a blogger in this post.
If you're not the one who doesn't know Myanmar Language, you can read this post in English
at the end of the post in Myanmar Language.
Thanks for visit. :)


ဒါ့အျပင္ Site Map မထားတဲ့ ဘေလာ့တစ္ခုနဲ႔ Site Map ထားတဲ့ ဘေလာ့တစ္ခုအေပၚ
Search Enging ေတြရဲ႕ ရွာေဖြေတြ႕ရွိႏိုင္စြမ္းကလည္း မိုးနဲ႔ေျမလို ကြာျခားပါတယ္ ..

ကဲ .. ဒီပို႔စ္မွာေတာ့ Site Map တစ္ခု အလြယ္တကူတည္ေဆာက္ႏိုင္မယ့္ နည္းပညာေလးတစ္ခုကို
မွ်ေ၀ေပးခ်င္ပါတယ္ ...

ဒီနည္းေလးရဲ႕ Demo ကို ၾကည့္ခ်င္ေသးတယ္ဆိုရင္ေတာ့ ကၽြန္ေတာ့္ဘေလာ့ရဲ႕ Menu ထဲက Site Map ကိုပဲျဖစ္ျဖစ္ " ေရးထားသမွ် ဒီေနရာမွာရွိပါတယ္ " ဆိုတဲ့ ညာဖက္က Sidebar ေလးကိုျဖစ္ျဖစ္ ကလစ္လိုက္ပါ ..
ကဲ .. သေဘာက်ရင္ စလိုက္ၾကစို႔ ..

အရင္ဆံုး Blogger ကို Log in ၀င္လိုက္ပါ ..
ၿပီးရင္ Pages ကိုသြားပါ ..
New Page ကေန Blank Page ကိုယူပါ ..
ပြင့္လာတဲ့ Blank Page ကို ကိုယ္ႀကိဳက္တဲ့ Title ေပးပါ .. ဥပမာ .. Table of content တို႔ Site Map တို႔ ေရးၿပီးသမွ် တို႔ .. အဲဒီလိုေပါ့
ၿပီးရင္ေတာ့ အဲဒီ Page ရဲက HTML Mode ကိုႏွိပ္ပါ ..
ၿပီးရင္ ေအာက္ကကုဒ္ေတြကို ေကာ္ပီကူးၿပီး ထည့္ေပးလိုက္ပါ ..

<style type="text/css">     #toc{     width:99%;     margin:5px auto;     border:1px solid #2D96DF;     -webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);     -moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);     box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);     }     .labl{     color:#FF5F00;     font-weight:bold;     margin:0 -5px;     padding:1px 0 2px 11px;     background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);     background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));     border:1px solid #2D96DF;     border-radius:4px;-moz-border-radius:4px;     -webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;     -moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;     }     .labl a{     color:#fff;     }     .labl:first-letter{t     ext-transform:uppercase;     }     .new{     color:#FF5F00;     font-weight:bold;     font-style:italic;     }     .postname{     font-weight:normal;     background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);     background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));     }     .postname li{     border-bottom: #ddd 1px dotted;     margin-right:5px     }     </style>     <div id="toc"><script type="text/javascript" src="http://bloggerprofessionals.googlecode.com/files/MyTOC.js"></script>     <script src="http://www.itmotesoeway.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">     </script></div>

အနီေရာင္နဲ႔ေရးထားတဲ့ လင့္ေနရာမွာ ကိုယ့္ဘေလာ့ရဲ႕ URL ကို ေျပာင္းထည့္ေပးရပါမယ့္ ..
ဒီေနရာမွာ www. ဆိုတာေလး မပါရင္ တစ္ခါတစ္ခါ Error တက္တတ္ပါတယ္
ၿပီးရင္ေတာ့ Publish လုပ္လိုက္ေပါ့ ..
ေအာ္ .. တစ္ခုက်န္ေသးတာက .. အခု Page မွာ Comment မေပးေစခ်င္ရင္ ညာဖက္က Options ထဲမွာ ၀င္ျပင္ေပးလို႔ရပါတယ္
ကၽြန္ေတာ့္အယူအဆကေတာ့ ၀င္ရွာလို႔လြယ္ေစခ်င္ယံုပဲမို႔ Comment ကို not allow ေပးထားသင့္တယ္ ထင္တာပါပဲ ..
ဘာပဲ ျဖစ္ျဖစ္ ျပႆနာ မရွိပါဘူးေလ ..
ကဲ .. အဆင္ေျပၾကပါေစဗ်ာ

Table of content is an important page for a blogger.
So, if you wish to create a table of content or site map for your blogger ( blogspot)
follow the steps below.
1. Log in blogger.
2. Go to Pages and choose New page >> Blank page.
3. Name the title of the new page as you like, i.e, Table Of Content or Site Map, e.t.c.
4. Click on HTML mode.
5. Copy and paste the code given below.

<style type="text/css">     #toc{     width:99%;     margin:5px auto;     border:1px solid #2D96DF;     -webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);     -moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);     box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);     }     .labl{     color:#FF5F00;     font-weight:bold;     margin:0 -5px;     padding:1px 0 2px 11px;     background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);     background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));     border:1px solid #2D96DF;     border-radius:4px;-moz-border-radius:4px;     -webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;     -moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;     }     .labl a{     color:#fff;     }     .labl:first-letter{t     ext-transform:uppercase;     }     .new{     color:#FF5F00;     font-weight:bold;     font-style:italic;     }     .postname{     font-weight:normal;     background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);     background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));     }     .postname li{     border-bottom: #ddd 1px dotted;     margin-right:5px     }     </style>     <div id="toc"><script type="text/javascript" src="http://bloggerprofessionals.googlecode.com/files/MyTOC.js"></script>     <script src="http://www.itmotesoeway.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">     </script></div>

Note >> Replace the link in red color with your blog's URL.
6. Publish the page and link the URL of the page with something, i.e, with your menu or other.
In my blog, I've linked the page with 'Site Map" in my menu.
You're done.
Be enjoy.