تركيب جدول المحتويات لعناوين الموضوع منزلق في قالب بلوجر

•  تحسين تجربة المستخدم

•  تحسين السيو (SEO) 

•  تنظيم المقال بشكل احترافي

•  مناسب للمقالات الطويلة

•  تحسين التوافق مع الجوال

•  زيادة التفاعل مع المقال

<style>

#toc-button{position:fixed;top:20px;right:20px;background:#0088cc;color:#fff;border:none;border-radius:50%;width:55px;height:55px;font-size:26px;font-weight:bold;box-shadow:0 4px 10px rgba(0,0,0,0.25);cursor:pointer;z-index:9999;transition:background 0.3s,transform 0.2s}

#toc-button:hover{background:#006fa6;transform:scale(1.05)}

#toc-container{position:fixed;top:50%;right:-320px;transform:translateY(-50%);width:300px;max-height:80vh;overflow-y:auto;background:#fff;border-radius:12px 0 0 12px;box-shadow:-4px 0 15px rgba(0,0,0,0.2);padding:20px;transition:right 0.4s ease;z-index:9998;height:100%}

#toc-container.active{right:0}

#toc-container h3{margin-top:0;font-size:18px;border-bottom:2px solid #0088cc;padding-bottom:8px;color:#0088cc}

#toc-container ul{list-style:none;padding:0;margin:0}

#toc-container li{margin:8px 0;padding:6px 8px;border-radius:8px;transition:background 0.3s}

#toc-container li:hover{background:#f3f8fc}

#toc-container a{text-decoration:none;color:#333;display:block;transition:color 0.2s}

#toc-container a:hover{color:#0088cc}

#toc-container ul li a{font-size:16px;font-weight:600}

#toc-container ul ul li a{font-size:15px;padding-left:8px;font-weight:500}

#toc-container ul ul ul li a{font-size:14px;padding-left:16px;font-weight:500}

#toc-container ul ul ul ul li a{font-size:13px;padding-left:24px;font-weight:400}

#toc-container ul ul ul ul ul li a{font-size:12px;padding-left:32px;font-weight:400}

#toc-container ul ul{border-left:2px dashed #ddd;margin-left:10px;padding-left:10px}

html{scroll-behavior:smooth}

#toc-list &gt;li &gt;a::before{content:&quot;\f22d&quot;;/* book */

  font-family:&quot;Font Awesome 6 Free&quot;;font-weight:900;font-size:14px;color:#0088cc}

#toc-list ul &gt;li &gt;a::before{content:&quot;\f22d&quot;;/* book-open */

  font-family:&quot;Font Awesome 6 Free&quot;;font-weight:900;font-size:14px;color:#00aacc}

#toc-list ul ul &gt;li &gt;a::before{content:&quot;\f22d&quot;;/* bookmark */

  font-family:&quot;Font Awesome 6 Free&quot;;font-weight:900;font-size:14px;color:#00bbdd}

#toc-list ul ul ul &gt;li &gt;a::before{content:&quot;\f22d&quot;;/* file-alt */

  font-family:&quot;Font Awesome 6 Free&quot;;font-weight:900;font-size:14px;color:#00ccee}

#toc-list ul ul ul ul &gt;li &gt;a::before{content:&quot;\f22d&quot;;/* file */

  font-family:&quot;Font Awesome 6 Free&quot;;font-weight:900;font-size:14px;color:#00ddee}

#toc-list a::before{display:inline-block;margin-left:4px;transition:transform 0.2s}

#toc-list a:hover::before{transform:translateX(3px)}

@media (max-width:480px){#toc-container{width:80vw;right:-85vw}#toc-container.active{right:0}}

</style>

<b:if cond='data:view.isPost'>

  <!-- زر وجدول المحتويات -->

  <button id='toc-button' title='جدول المحتويات'>&#9776;</button>

  <nav id='toc-container'>

    <h3>جدول المحتويات</h3>

    <ul id='toc-list'/>

  </nav>

<script type='text/javascript'>

//<![CDATA[

document.addEventListener("DOMContentLoaded",function(){const button = document.getElementById("toc-button");const tocContainer = document.getElementById("toc-container");const tocList = document.getElementById("toc-list");if (!button || !tocContainer || !tocList) return;const content = document.querySelector(".post-body,.entry-content,.article-post,.post");if (!content){tocList.innerHTML = "<li>لم يتم العثور على محتوى المقال.</li>";return;}const headings = content.querySelectorAll("h1,h2,h3,h4,h5");if (headings.length === 0){tocList.innerHTML = "<li>لا توجد عناوين في هذا المقال.</li>";}headings.forEach((h,i) =>{const id = "toc-item-" + i;h.setAttribute("id",id);const li = document.createElement("li");const a = document.createElement("a");a.href = "#" + id;a.textContent = h.textContent;a.addEventListener("click",function(e){e.preventDefault();const rect = h.getBoundingClientRect();const top = window.pageYOffset + rect.top - 20;window.scrollTo({top,behavior: "smooth"});});li.appendChild(a);tocList.appendChild(li);});button.addEventListener("click",() =>{tocContainer.classList.toggle("active");button.innerHTML = tocContainer.classList.contains("active") ? "✕" : "☰";});});

//]]>

</script>

</b:if>