<!-- Bigosti Smart TOC -->
<style>
#bigosti-toc {
  background: #f9f9f9;
  border: 1.5px solid #ff8c00;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  display: inline-block;
  min-width: 300px;
  max-width: 100%;
}
.toc-title {
  font-weight: 900;
  color: #ff8c00;
  font-size: 18px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 10px;
  display: flex; justify-content: space-between;
}
#toc-list { list-style: none; padding: 0; margin: 0; }
#toc-list li { margin: 8px 0; }
#toc-list a { text-decoration: none; color: #333; transition: 0.2s; }
#toc-list a:hover { color: #ff8c00; padding-right: 5px; }
.toc-h3 { margin-right: 20px !important; font-size: 0.9em; opacity: 0.8; }
</style>

<div id="bigosti-toc">
  <div class="toc-title">🚀 محتويات المقال</div>
  <ul id="toc-list"></ul>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
  const headings = document.querySelectorAll(".post-body h2, .post-body h3");
  const tocList = document.getElementById("toc-list");
  
  headings.forEach((heading, index) => {
    const id = "section-" + index;
    heading.setAttribute("id", id);
    const li = document.createElement("li");
    if(heading.tagName === "H3") li.className = "toc-h3";
    li.innerHTML = `<a href="#${id}">${index + 1}. ${heading.innerText}</a>`;
    tocList.appendChild(li);
  });
});
</script>

هل يعمل الكود مع جميع قوالب بلوجر؟
نعم، الكود مصمم ليعمل بشكل مستقل، ولكن تأكد أن حاوية المقال في قالبك تحمل كلاس .post-body (وهو الكلاس الافتراضي لمعظم القوالب).

هل يبطئ السكربت سرعة الصفحة؟
إطلاقاً، السكربت حجمه أقل من 1 كيلوبايت ويعمل بعد تحميل الصفحة بالكامل، فلا يؤثر على أداء PageSpeed.