ماهو جدول التنقل 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>
في كل عنوان اضفته في جدول المحتويات يجب ان يحتوي على عنوان ال id المحدد باللون الاحمر كالتالي:
<h2 id="head1">العنوان الأول</h2>
<h2 id="head2">العنوان الثاني</h2>
<h2 id="head3">العنوان الثالث</h2>
<h2 id="head4">العنوان الرابع</h2>
2. استخدام اداة انشاء جدول المحتويات لمقالك بشكل تلقائي
هذه الطريقة المثلى لإنشاء جدول التنقل للمحتوى بضغطة زر مع تفادي الأخطاء فقط كل ماعليك فعله بعد الانتهاء من كتابتك لمشاركتك هو تحويل عرض محرر المشاركات الى عرض HTML وتحديد كافة محتويات المقال ونسخه بالكامل والدخول الى اداة انشاء جدول التنقل في المحتوى ولصق محتويات مقالتك واضغط على زر انشاء جدول التنقل ... بعد ذلك انسخ المحتويات والصقها في مدونتك واحفظ المشاركة .
مالذي يميز اداة انشاء جدول المحتوى عن الاضافة التلقائية في بلوجر؟
- توفير بعض السرعة على مدونتك ، وذلك بتوفير في حجم التحميل وعمل الجافاسكريبت بعد التحميل، وبهذا يتم تخفيض قيمة CLS.
- جدول المحتوى يكون منشأ مسبقا ضمن المحتوى وكأنه انشئ بلغات في جهة السيرفر كالوردبرس.
- يساعد محرك البحث بالتعرف على جدول المحتوى بشكل تلقائي بدون تأخير وانتظار الجافا سكربت لكي تنشئة.
- يمكنك من القدرة على تحديد المقال الذي تريد انشاء جدول تنقل في المحتوى له خصوصا المحتوى الطويل.
وبالأخير اذا اردت تنسيق شكل جدول المحتوى ادخل للقالب تحرير HTML وابحث عن الكود التالي
]]></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.اضافة جدول التنقل او المحتوى التلقائي في بلوجر
من مميزات هذه الطريقة انك لن تحتاج لعمل اي شيء عند كتابة المشاركة غير اضافة كود بسيط لايتعدى سطر .. ستقوم الاضافة بعد اضافتها لقالبك من انشاء جدول التقل بشكل تلقائي ، ايضا من عيوب جدول التنقل التلقائي انها ستنظاف اكواد الإضافة للقالب وتزيد من حجم القالب ، ولكن لاتقلق احظرت لك اكواد مختصره وخفيفة ، ايضا سيتم انشاء الجدول بعد تحميل المقالة للمتصفح.
تركيب اضافة جدول المحتويات الى قالبك
1.إضافة اكواد ال CSS ، افتح محرر HTML لقالبك وابحث عن الكود التالي:
]]></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}
2.اضافة اكواد الجافا سكربت قبل اغلاق وسم body ، ابحث عن الكود التالي في قالبك :
</body>
والصق الكود التالي قبله مباشرة
<b:if cond='data:blog.pageType == "static_page"'>
<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>
وأخيرا اضافة كود HTML في بدابة المشاركة التي تريد اظهار جدول التقل اليها، افضل اضافته في المشاركة عند الحاجة لإضافة جدول التنقل للمقالة ... وليس اجباريا لكل المقالات ...
<div id="tocHolder"></div>
ولكن اذا اردته اظهاره في كافة المقالات ابحث عن الكود التالي في القالب واضفته قبله مباشره
</data:post.body>
كانت هذه ثلاث طرق لإضافة جدول التنقل في المحتوى لمدونات بلوجر ، وأتمنى ان تستفيد من الشرح دمتم في رعاية الله وحفظه.