Home
BLOGGER TOOL

TABLE OF CONTENT TOC ON BLOGGER

Table Of Content Toc On Blogger



သင့်ဘလော့ဂ်ပို့စ်များအတွက်အကြောင်းအရာဇယား (TOC) ကိုကိုယ်တိုင်ဖန်တီးရန်အခက်ခဲဖြစ်၍ငြီးငွေ့နေပါသလား။သင့်အကြောင်းအရာများကိုစနစ်တကျထိန်းသိမ်းထားရန်နှင့်သင့်စာဖတ်သူများအတွက်အလွယ်တကူရယူနိုင်ရန်ရုန်းကန်နေရပါသလား။

ဤပို့စ်တွင် Blogger တွင်အလိုအလျောက်အ ကြောင်းအရာဇယား (TOC) ဖန်တီးနည်းကိုသင့်စာဖတ်သူများသင့်အကြောင်းအရာကိုလမ်းညွှန်ရန်နှင့်သင့်ဘလော့ဂ်ကိုစီမံခန့်ခွဲရန်အတွက်ပိုမိုလွယ်ကူစေမည့်နည်းလမ်းကိုပြန်လည်မျှ‌ဝေ‌ဖော်ပြ‌ပေးလိုက်ပါတယ်။

မိမိ post များထဲမှမိမိကြိုက်နှစ်သက်တဲ့ post ရဲ့အချက်အလက်များနှင့်အဓိကအကြောင်းအရာများကို Heading အဖြစ်သတ်မှတ်၍‌ ရေးပါ။


<h1>Hello</h1>

<h2>Hello</h2>

<h3>Hello</h3>

<h4>Hello</h4>

<h5>Hello</h5>
<h6>Hello</h6>

  1. dashboard ထဲက Theme ကိုနှိပ်
  2. HTML🔻ကိုနှိပ်
  3. <data.post.body/> ရှာပါ(သတိ - template တခုနှင့်တစ်ခုမတူသဖြင့် <data.post.body/> သည်တခုထက်ပို၍ရှိနိုင်သည်။နောက်ဆုံး <data.post.body/> အောက်တွင် အောက်က code ကို copy ယူ၍ထည့်ပါ

<div id="tocToggle"><span>
<svg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'><path d='M416 416H32c-17.67 0-32 14.33-32 32S14.33 480 32 480h384c17.67 0 32-14.33 32-31.1S433.7 416 416 416zM32 224h384c17.67 0 32-14.33 32-31.1S433.7 160 416 160H32C14.33 160 0 174.3 0 192S14.33 224 32 224zM32 96h224c17.67 0 32-14.33 32-31.1S273.7 32 256 32H32C14.33 32 0 46.33 0 64S14.33 96 32 96zM32 352h224c17.67 0 32-14.33 32-31.1S273.7 288 256 288H32c-17.67 0-32 14.33-32 32S14.33 352 32 352z'/></svg>
</span></div>
<div id="toc">
  <div>
    <h3>Table Of Contents</h3>
    <span id="tocClose">✖</span>
  </div>
</div>

  1. </body>ရှာပါ။တွေ့ပြီဆိုရင်အောက်က css & js code ကို copy ယူ၍အဲဒီ</body> အပေါ်ကနေထည့်ပါ။

<style>
#toc {position:fixed;top:40px;right:20px;width:270px;height:80%;overflow-y:auto;background:#fff;border:1px solid #ddd;box-shadow:0 4px 12px rgba(0,0,0,0.15);border-radius:12px;padding:15px;z-index:9999;font-family:"Poppins", sans-serif;display:none;transition: all 0.3s ease;}
#toc > div:first-child {display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
#toc h3 {font-size:16px;margin:0;color:#333;}
#toc span {cursor:pointer;font-size:18px;color:#e91e63;font-weight:bold;transition:0.2s;}
#toc span:hover {color:#ff4081;transform:scale(1.2);}
#toc ul {list-style:none;padding-left:0;margin:0;}
#toc li {margin:6px 0;line-height:1.4;}
#toc li[data-level="2"] { margin-left: 15px; }
#toc li[data-level="3"] { margin-left: 30px; }
#toc li[data-level="4"] { margin-left: 45px; }
#toc li[data-level="5"] { margin-left: 60px; }
#toc li[data-level="6"] { margin-left: 75px; }
#toc a {text-decoration:none;color:#333;font-size:14px;transition:color 0.3s;}
#toc a:hover {color:#007bff;}
#toc a.active {color:#e91e63;font-weight:bold;}
#tocToggle {position:fixed;bottom:25px;right:25px;width:50px;height:50px;background:#ffffff;color:#333;font-size:22px;border-radius:30%;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,0.3);top:50%;transition:0.3s ease;}
#tocToggle:hover {background:#0056b3;transform:scale(1.1);}
#tocToggle span svg{opacity:.95;width:22px;height:22px;}
</style>
<script>/*<![CDATA[*/
document.addEventListener("DOMContentLoaded", function() {
  const tocContainer = document.getElementById("toc");
  const tocToggle = document.getElementById("tocToggle");
  const tocClose = document.getElementById("tocClose");
  const postBody = document.querySelector(".post-body");
  if (!postBody) {
    tocContainer.style.display = "none";
    tocToggle.style.display = "none";
    return;
  }
  const headings = postBody.querySelectorAll("h1, h2, h3, h4, h5, h6");
  if (headings.length === 0) {
    tocContainer.style.display = "none";
    tocToggle.style.display = "none";
    return;
  }
  const tocList = document.createElement("ul");
  const counters = [0,0,0,0,0,0]; 
  headings.forEach(h => {
    const id = h.textContent.trim().toLowerCase().replace(/\s+/g, "-");
    h.id = id;
    const li = document.createElement("li");
    const level = parseInt(h.tagName.replace("H",""));
    li.setAttribute("data-level", level);
    counters[level-1]++;
        for(let i=level;i<6;i++) counters[i]=0;
    const roman = ["i","ii","iii","iv","v","vi","vii","viii","ix","x"];
    const prefix = roman[counters[level-1]-1] || counters[level-1];
    const a = document.createElement("a");
    a.href = `#${id}`;
    a.textContent = `${prefix}. ${h.textContent}`;
    li.appendChild(a);
    tocList.appendChild(li);
  });
  tocContainer.appendChild(tocList);
  document.querySelectorAll("#toc a").forEach(link => {
    link.addEventListener("click", e => {
      e.preventDefault();
document.querySelector(link.getAttribute("href")).scrollIntoView({behavior:"smooth"});
      tocContainer.style.display = "none";
    });
  });
  window.addEventListener("scroll", () => {
    let current = "";
    headings.forEach(h => {
      if (pageYOffset >= h.offsetTop - 150) {
        current = h.id;
      }
    });
    document.querySelectorAll("#toc a").forEach(link => {
      link.classList.remove("active");
      if(link.getAttribute("href")==="#" + current) link.classList.add("active");
    });
  });
  tocToggle.addEventListener("click", () => {
    tocContainer.style.display = "block";
  });
  tocClose.addEventListener("click", () => {
    tocContainer.style.display = "none";
  });
});
/*]]>*/</script>

  1. save ကိုနှိပ်။ပြီးပြီ

Post a Comment