كيفية إضافة جدول المحتويات بشكل جديد و رائع لمدونات بلوجر

السلام عليكم و رحمة الله تعالى وبركاته زوار و متتبعي مدونة جرعة تقنية ضمن تدوينة جديدة سوف نتعرف من خلالها على كيفية إضافة جدول المحتويات بشكل رائع و جميل لمدونات بلوجر لكن قبل كل شيئ سوف نتعرف عل ما هوا جدول المحتويات و ماهي فائدته .

جدول المحتويات هو قائمة تتكون من نقطة أو نقاط مناقشة رئيسية داخل التدوينة , ويمكننا إستخدام هذا الجدول كتفصيل لمحتويات التدوينة على شكل روابط تسهل على القارئ تحديد أي جزء من الموضيع يريد أن يقرأ

و بالإضافة الى هذا سوف يتمكن زوارك من معرفة محتويات التدوينة بكل بساطة مما سيزيد من جادبية الزائرين بشكل أفضل

على أي حال هده الإضافة كانت متوفرة فقط لمدونات و قوالب الووردبريس لكن ماذا لو تم إضافتها إلى مدونتك سيكون هذا أمرا رائعا بالفعل لن أطيل عليكم دعنا نتعرف و إياكم إلى كيفية تركيب و إستخدام هذه الإضافة

كيفية إضافة جدول المحتويات للمدونات بلوجر

أولا قم بالتوجه إلى لوحة تحكم بلوجر قم بالتوجه إلى قالب تم تحرير HTML

قم باخد نسخة احتياطية لقالب المدونة قبل القيام باي خطوة تفاديا لاي اخطاء قد تقوم بها

الان قم بالبحت على الوسم ]]></b:skin> عبر الظغط على Ctrl+F

تم قم بوضع الكود البرمجي التالي فوقه

/* Table of Contents (TOC) */
#btn-cm{border:1px solid #dadada;border-radius:5px;background-color:#f9f9f9}
#btn_toc{font-weight:700;cursor:pointer;margin:10px}
#btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}
#btn_toc svg{vertical-align:middle}
#toc li{cursor:pointer}
#toc{display:grid}
.back_toc{cursor:pointer;text-align:left}
:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}

بعد أن قمت بإضافة هذا الكود بشكل صحيح قم بحفض القالب

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

الآن ما عليك سوى التوجه إلى إحدى التدوينات التي تريد إضافة الجدول فيها
قم بالتحويل من وضع التأليف إلى وضع HTML

تم قم بنسخ الكود التالي و ضعه في المكان الذي تريد أن يضهر به جدول المحتويات لكن من المفضل أن يتم وضعه بعد الفقرة الأولى

<div id="btn-cm">
<div id="btn_toc" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">محتويات <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="toc">
<ol>
<li><a href="#toc_1" title="عنوان الفقرة 1">عنوان الفقرة 1</a></li>
<li><a href="#toc_2" title="عنوان الفقرة 2">عنوان الفقرة 2</a></li>
<li><a href="#toc_3" title="عنوان الفقرة 3">عنوان الفقرة 3</a></li>
<li><a href="#toc_4" title="عنوان الفقرة 4">عنوان الفقرة 4</a></li>
<li><a href="#toc_5" title="عنوان الفقرة 5">عنوان الفقرة 5</a></li>
</ol>
</div>
</div>

الآن ما عليك سوى القيام ببعض التعديلات على الكود

أضف رابط التدوينة الخاصة بك مثل

https://technical-dose.blogspot.com/how-to-add-table-of-content-to-blogger#toc_1

https://technical-dose.blogspot.com/how-to-add-table-of-content-to-blogger#toc_2

يمكنك إضافة حتى

#toc_6

#toc_7

إلى ما نهاية

ولكن إنتبه فمع كل رابط تضعه يجب عليك أن تقوم بوضع هذا الكود مع أكواد عناوين الفقرات

id="toc_1"

على سبيل المثال

<h3>عنوان فرعي 1</ h3> قم بالتعديل عليه ليصبح <h3 id="toc_1">عنوان فرعي 1</ h3>

و هذا بالنسبة لجميع عناوين الفقرات

أنا أعرف أن التركيب قد يبدو صعبا بالنسبة لأغلب المدونين لكن صندوق التعليقات مفتوح في وجه الجميع لدى من لديه أي إستفسار أو واجهته أي مشكلة فليقم بكتابتها في التعليقات و سوف نقوم بحلها إنشاء الله

كيفية إضافة جدول المحتويات للمدونات بلوجر

Default