Automatic Table of Contents (TOC)
သင့်ဘလော့ဂ်ပို့စ်များအတွက် အကြောင်းအရာဇယား (TOC) ကို ကိုယ်တိုင်ဖန်တီးရန်အခက်ခဲဖြစ်၍ ငြီးငွေ့နေပါသလား။ သင့်အကြောင်းအရာများကို စနစ်တကျ ထိန်းသိမ်းထားရန်နှင့် သင့်စာဖတ်သူများအတွက် အလွယ်တကူ ရယူနိုင်ရန် ရုန်းကန်နေရပါသလား။ဤပို့စ်တွင်၊ Blogger တွင် အလိုအလျောက် အကြောင်းအရာဇယား (TOC) ဖန်တီးနည်းကို သင့်စာဖတ်သူများ သင့်အကြောင်းအရာကို လမ်းညွှန်ရန်နှင့် သင့်ဘလော့ဂ်ကို စီမံခန့်ခွဲရန်အတွက် ပိုမိုလွယ်ကူစေမည့် နည်းလမ်းကိုပြန်လည်မျှ ဝေ ဖော်ပြ ပေးလိုက်ပါတယ်။
Blogger မှာ TOC ဘာကြောင့် လိုအပ်တာလဲ။
အသုံးပြုသူအတွေ့အကြုံကို ပိုမိုကောင်းမွန်စေသည်- စာဖတ်သူများသည် ပို့စ်တစ်ခုလုံးကို လှိမ့်မလှန်ဘဲ လိုအပ်သော အချက်အလက်များကို အမြန်ရှာဖွေနိုင်သည်။
SEO အကျိုးကျေးဇူးများ - Google ကဲ့သို့ ရှာဖွေရေးအင်ဂျင်များသည် သင်၏အဆင့်များကို မြှင့်တင်ပေးနိုင်သည့် ကောင်းမွန်သောဖွဲ့စည်းပုံပါအကြောင်းအရာကို နှစ်သက်ကြသည်။
ပိုမိုကောင်းမွန်သော လမ်းကြောင်းပြခြင်း- စာဖတ်သူများအား ရှည်လျားသော ပို့စ်များတစ်လျှောက် အလွယ်တကူ သွားလာနိုင်ရန် ကူညီပေးသည်။
Blogger တွင် Automatic Table of Content (TOC) ဖန်တီးနည်း
No(1)မိမိ Blogger site ကို account အရင်ဝင်ပါ
No(2) dashboard ထဲက Theme ကိုနှိပ်
No(3)ညာဘက်အပေါ်ထောင့်ရှိ "Backup/Restore" ခလုတ်ကိုနှိပ်ပြီးလက်ရှိအသုံးပြု နေတဲ့ Template ကို download အရင်လုပ်ထားပါ။ တစ်စုံတစ်ခု အမှားအယွင်းဖြစ်ပါက ၎င်း Backup ဖြင့် download လုပ်ထား သောမူလ template ကိုပြန်အသုံးပြုနိုင်မှာဖြစ်ပါတယ်
No(4) Edit HTML ကိုနှိပ်ပါ
No(5) </body> ကိုရှာတွေ့ပြီဆိုရင်အောက်က code ကိုအဲဒီ </body> အပေါ်ကနေထည့် ပေးပါ။ထည့်ပြီးသွားရင် save ကိုနှိပ်
<style>
/* tocbot */ .hidden{display:none;}
.tocI:checked~.tocL{right:0;z-index:9999;}
.tocI:checked~.tocL .tocC{opacity:0;visibility:hidden;}
.tocI:checked~.tocL .fCls{background:rgba(0,0,0,.25);opacity:1;visibility:visible;}@-webkit-keyframes indicator{0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}@keyframes indicator{0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}
.fixH .c::after{content:'\2715';line-height:18px;font-size:14px;}@media screen and (min-width:768px){.tocC{top:40px;}
.tocI:checked~.tocL{z-index:9999;}}
.fCls{display:block;position:fixed;top:-50%;left:-50%;right:-50%;bottom:-50%;z-index:1;transition:all .1s ease;background:transparent;opacity:0;visibility:hidden;}
.tocL{position:fixed;top:0;bottom:0;right:-280px;width:280px;transition:all .1s ease;z-index:9999;}
.tocLi{width:100%;height:100%;position:relative;background:#fff;box-shadow:0 5px 30px 0 rgba(0,0,0,.05);z-index:2;border-radius:12px 0 0 12px;}
.tocLs{position:relative;top:20px;background:inherit;}
.fixH{display:flex;background:inherit;position:absolute;top:0;left:0;right:0;padding:0 10px;z-index:2;}
.tocC{position:absolute;left:-45px;top:105px;transition:all .1s ease;}
.tocC span{display:flex;align-items:center;justify-content:center;width:45px;height:40px;border-radius:15px 0 0 15px;background:#fff;box-shadow:0 0 10px 0 rgba(0,0,0,.1);transition:inherit;z-index:1;}
.tocC span svg{opacity:.95;width:22px;height:22px;}
.tocT{display:flex;width:100%;}.fixT::before{content:attr(data-text);flex-grow:1;padding:16px 10px;font-size:90%;opacity:.7;}
.fixH .cl{padding:0 10px;display:flex;align-items:center;justify-content:flex-end;position:relative;flex-shrink:0;min-width:40px;}
.tocIn{padding:50px 0 0;overflow-y:scroll;overflow-x:hidden;width:100%;height:calc(100vh - 60px);}
.tocIn>ol{padding:0 20px 20px;}.tocIn ol{list-style:none;padding:0;margin:0;line-height:1.5em;}
.tocIn ol ol,.tocIn li:not(:last-child){margin-bottom:5px;}
.tocIn li a{flex:1 0 calc(100% - 23px);}
.tocIn a{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:inherit;text-decoration:none;}
.toc-list{width:100%;position:relative;box-shadow:2px 0 0 0 #0000001a inset;}
.toc-list.is-collapsible .toc-link{padding-left:2.25rem;}
.toc-list.is-collapsed{display:none;}.toc-link{display:block;color:#495057;padding:.75rem 1rem .75rem 1.5rem;transition:.5s;}
.toc-link.is-active-link{background-color:#eceff1;font-weight:500;box-shadow:2px 0 0 0 #495057 inset;}
.docs-toc{--bg-scrollbar-thumb:#ced4da;--bg-scrollbar-track:transparent;}
</style>
<b:if cond='data:view.isSingleItem'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.18.2/tocbot.min.js'>
</script>
<script>
/*<![CDATA[*/ var content=document.querySelector(".post-body"),headings=content.querySelectorAll("h2, h3, h4, h5, h6, h7"),headingMap={};Array.prototype.forEach.call(headings,function(e){var t=e.id?e.id:e.textContent.toLowerCase().replace(/[^a-z -]/gi,"").trim().split(" ").join("-").replace(/--/g,"-");headingMap[t]=isNaN(headingMap[t])?0:++headingMap[t],headingMap[t]?e.id=t+"-"+headingMap[t]:e.id=t}),tocbot.init({tocSelector:".Toc",contentSelector:".post-body",headingSelector:"h2, h3, h4, h5, h6, h7",hasInnerContainers:!0,listItemClass:"toc-list-item",orderedList:!1,headingsOffset:1}); /*]]>*/</script></b:if>
No(6) မိမိရဲ့မူလ dashboard ကိုပြန်သွား၍ dashboard ထဲက Layout ကိုနှိပ်
No(7) Add a Gadget ကိုနှိပ်
No(8) HTML/JavaScript ကိုနှိပ်
No(9) အောက်က HTML code ကို copy ယူပြီးထည့်ပေးပါ။save ကိုနှိပ်ပြီးပါပြီ။
<input class='tocI hidden' id='forTocJs' type='checkbox' /> <div class='tocL'> <div class='tocLi'> <div class='tocLs'> <label aria-label='Tutup' class='tocH fixH' for='forTocJs'> <div class='tocC'> <span> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-card-list" viewBox="0 0 16 16"> <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"></path> <path d="M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8zm0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-1- 5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zM4 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z" ></path> </svg> </span> </div> <div class='tocT fixT' data-text='Daftar Isi'> <span class='c cl' data-texxt='Tutup'></span> </div> </label> <div class='Toc tocIn scroll' id='tocAuto'> </div> </div> </div> <label class="fCls" for="forTocJs"></label> </div>