اضافة جدول التنقل او المحتوى في مقالات بلوجر بثلاث طرق

ماهو جدول التنقل Table Of content؟

جدول التنقل او المحتوى Table Of content للمقال هو عباره عن فهرس او قائمة تحتوي على العناوين الفرعية التي يتضمنها مقالك ، الذي يمكن الزائر من قراءة عناوين محتويات المقال والانتقال مباشرة الى الفقرة المطلوبة التي تبحث عنها ..

ما أهمية جدول التنقل في المحتوى لبلوجر؟

• تحسين تجرية المستخدم ، حيث يمكن الزائر من تصفح محتويات المقال بسهولة.
• تحسين السيو ، يقدم لجوجل موجز لمقالك يدل على التنظيم وخصوصا مع امكانية التنقل في محتوى المقال بسهولة وهذا مايفضلة جوجل وكافة محركات البحث.
• الأرشفة المثلى للمقال عند ارشفة مقالتك جوجل تضع العناوين دائما في الإعتبار لهذا يكون مقالك جاهز.

تركيب جدول المحتويات او التنقل لبلوجر بثلات طرق

1. اضافة جدول المحتوى بشكل يدوي 

<div class="toc">
<summary>محتويات المقال:</summary>
<ul>
   <li><a href="#head1"> العنوان الاول </a></li>
   <li><a href="#head2"> العنوان الثاني</a></li>
   <li><a href="#head3"> العنوان الثالث</a></li>
   <li><a href="#head4"> العنوان الرابع</a></li>
</ul>
</div>

<h2 id="head1">العنوان الأول</h2>
<h2 id="head2">العنوان الثاني</h2>
<h2 id="head3">العنوان الثالث</h2>
<h2 id="head4">العنوان الرابع</h2>

2. استخدام اداة انشاء جدول المحتويات لمقالك بشكل تلقائي

مالذي يميز اداة انشاء جدول المحتوى عن الاضافة التلقائية في بلوجر؟

]]></b:skin>

ol#tocList {
                   padding: 10px 30px 0;
                   margin-top: 0;
               }
               ol#tocList li:before {
                   display: none;
               }
               ol#tocList li a {
                   color: #333;
               }
               ol#tocList li {
                   list-style: decimal;
                   font-size: 15px;
                   line-height: 1.7;
                   margin-bottom: 5px;
                   padding-bottom: 5px;
                   color: #3c4041;
               }
               ol#tocList li:hover,
               ol#tocList li a:hover {
                   color: rgb(0, 140, 255);
               }

3.اضافة جدول التنقل او المحتوى التلقائي في بلوجر 

تركيب اضافة جدول المحتويات الى قالبك

]]></b:skin>

.toctitle:before{background:url("data:image/svg+xml;charset=utf8,%3Csvg%20aria-hidden%3D%22true%22%20data-prefix%3D%22fas%22%20data-icon%3D%22list%22%20class%3D%22svg-inline--fa%20fa-list%20fa-w-16%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%20%20%3Cpath%20fill%3D%22%23333%22%20d%3D%22M80%20368H16a16%2016%200%200%200-16%2016v64a16%2016%200%200%200%2016%2016h64a16%2016%200%200%200%2016-16v-64a16%2016%200%200%200-16-16zm0-320H16A16%2016%200%200%200%200%2064v64a16%2016%200%200%200%2016%2016h64a16%2016%200%200%200%2016-16V64a16%2016%200%200%200-16-16zm0%20160H16a16%2016%200%200%200-16%2016v64a16%2016%200%200%200%2016%2016h64a16%2016%200%200%200%2016-16v-64a16%2016%200%200%200-16-16zm416%20176H176a16%2016%200%200%200-16%2016v32a16%2016%200%200%200%2016%2016h320a16%2016%200%200%200%2016-16v-32a16%2016%200%200%200-16-16zm0-320H176a16%2016%200%200%200-16%2016v32a16%2016%200%200%200%2016%2016h320a16%2016%200%200%200%2016-16V80a16%2016%200%200%200-16-16zm0%20160H176a16%2016%200%200%200-16%2016v32a16%2016%200%200%200%2016%2016h320a16%2016%200%200%200%2016-16v-32a16%2016%200%200%200-16-16z%22%2F%3E%0A%3C%2Fsvg%3E%0A") no-repeat center}
.toctitle:after{background:url("data:image/svg+xml;charset=utf8,%3Csvg%20aria-hidden%3D%22true%22%20data-prefix%3D%22fas%22%20data-icon%3D%22chevron-down%22%20class%3D%22svg-inline--fa%20fa-chevron-down%20fa-w-14%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%0A%20%20%3Cpath%20fill%3D%22%23333%22%20d%3D%22M207%20381%2013%20187c-10-9-10-24%200-34l22-22c10-10%2025-10%2034-1l155%20155%20155-155c9-9%2024-9%2034%201l22%2022c10%2010%2010%2025%200%2034L241%20381c-9%2010-25%2010-34%200z%22%2F%3E%0A%3C%2Fsvg%3E") no-repeat center}
.tocHolder{display:inline-block;background:#f7f8fa;border:1px solid #dce0e1;margin:15px 0}
div#tocHolder{width:100%;clear:both;margin-bottom:15px}
.toctitle{position:relative;height:38px;background-color:#f7f9fa;font-size:16px;color:#333;display:flex;align-items:center;justify-content:flex-start;padding:0 10px;margin:0;min-width:250px;width:300px}
ol#tocList{display:none}
.tocHolder.closed ol#tocList{display:block}
.toctitle:before{content:"";transform:revert;margin-left:10px;right:15px;text-align:center;line-height:26px;background-size:17px;height:24px;width:27px;border-radius:3px;border:1px solid #dce0e1;padding:4px;background-color:#eee}
.toctitle:after{content:"";float:left;margin-right:10px;position:absolute;left:15px;text-align:center;line-height:26px;background-size:12px;height:12px;width:12px}
ol#tocList{padding:15px 30px 0}
ol#tocList li:before{display:none}
ol#tocList li a{color:#333}
ol#tocList li{list-style:decimal;font-size:15px;line-height:1.7;margin-bottom:5px;padding-bottom:5px;color:#3c4041}
ol#tocList li:hover,ol#tocList li a:hover{color:#008cff}

</body>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<script>
//<![CDATA[
if(document.querySelector("#tocHolder")){var t=null,a=null,html="",e=0;document.querySelectorAll(".post-amp h2").forEach(function(t){t.setAttribute("id","point"+e);var o=t.innerText;html+="<li><a class='ScrolingTopoint' href='#point"+e+"'>"+o+"</a></li>",e++});var tochtml="<div class='tocHolder'><div class='toctitle'>جدول التنقل</div><ol id='tocList'>"+html+"</ol></div>";document.querySelector("#tocHolder").innerHTML=tochtml,document.querySelectorAll(".ScrolingTopoint").forEach(function(e){e.addEventListener("click",function(t){t.preventDefault(),document.querySelector(e.getAttribute("href")).scrollIntoView({behavior:"smooth"})})}),0==document.querySelectorAll(".post-amp h2").length&&(document.querySelector("#tocList").innerHTML="<div class='no3nwen'>لا يوجد عناوين</div>"),document.querySelector(".toctitle").addEventListener("click",function(e){document.querySelector(".tocHolder").classList.toggle("closed")})}
//]]>
</script>
</b:if>

<div id="tocHolder"></div>

</data:post.body>