طريقة إضافة جدول محتويات المقال - بلوجر

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

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

أما إذا كانت طبيعة محتوى مدونتك مقالية ( أخبار - صحافة - روايات - قصص - معلومات ) فغالبًا ستسرد المقالة مرة واحدة ولن تحتاج إلى تقسيم محتواك إلى أقسام وعناوين ثانوية.

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

 

لإضافة جدول المحتويات توجد طريقتين:

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

2/ يدوية: وتتم بإضافة الكود في كل مشاركة تريد فيها إضافة جدول المحتويات - هذه الطريقة أفضل لأنها تسمح لك بتغيير موقع جدول المحتويات أعلى التدوينة أو في المنتصف - ولمعاينة جدول المحتويات إنتقل إلى هذه التدوينة.

طريقة الإضافة: 

قم بحفظ نسخة إحتياطية للقالب تفاديًا لأي مشكلة قد تحدث.

1- إبحث عن </head> وضع الكود التالي فوقه:

<style type='text/css'> /* CSS Table of Contents by tharabic.com */ #toc{border-right:6px dotted rgba(121,128,136,0.24);padding-right:20px;padding-left:7px;padding-right:1.25rem;margin:0 0 20px;margin:0 0 1.25rem;font-size:14px;font-size:.875rem}@media only screen and (max-width : 480px){#toc{padding-right:.75rem}}#toc a{text-decoration:none}#toc b.toc{text-transform:uppercase}#toc ol{padding-right:6px;margin:0}#toc ol li{margin:8px 0}#toc ol li ol{padding-right:32px;padding-right:2rem;margin:0}#toc ol li ol li{list-style-type:disc}#toc&gt;ol{counter-reset:item;list-style:none}#toc&gt;ol&gt;li:before,#toc&gt;ol li&gt;li:before{counter-increment:item;margin-left:0px}#toc&gt;ol&gt;ol{padding-right:16px;padding-right:1rem}#toc&gt;ol&gt;ol li{list-style-type:disc}#toc-0::before,#toc-1::before,#toc-2::before,#toc-3::before,#toc-4::before,#toc-5::before,#toc-6::before,#toc-7::before,#toc-8::before,#toc-9::before,#toc-10::before,#toc-11::before,#toc-12::before,#toc-13::before,#toc-14::before,#toc-15::before{content:&quot; &quot;;margin-top:-72px;height:72px;display :block;visibility:hidden}.toc button{background:transparent;border:0;padding:0;outline:0;margin:0 4px;cursor:pointer;text-transform:lowercase;font-weight:normal} </style>

2- إبحث عن </body> وضع الكود التالي فوقه:

<script type='text/javascript'> //<![CDATA[ //toc by tharabic.com !function(e){"use strict";function p(e){if("string"!=typeof e)return 0;var t=e.match(/\d/g);return t?Math.min.apply(null,t):1}function o(e){var i,c,n,t,o,r,a=e.selector,l=e.scope,u=document.createElement("ol"),d=u,s=(i=e.overwrite,c=e.prefix,function(e,t,n){e.textContent;var o=c+"-"+n;t.textContent=e.textContent;var r=!i&&e.id||o;r=encodeURIComponent(r),e.id=r,t.href="#"+r});return n=a,t=l,o=[],r=document.querySelectorAll(t),Array.prototype.forEach.call(r,function(e){var t=e.querySelectorAll(n);o=o.concat(Array.prototype.slice.call(t))}),o.reduce(function(e,t,n){var o=p(t.tagName),r=h(d,o-e)||u,i=document.createElement("li"),c=document.createElement("a");return s(t,c,n),r.appendChild(i).appendChild(c),d=i,o},p(a)),u}function t(e){var t=(e=function(e,t){for(var n in t)t.hasOwnProperty(n)&&t[n]&&(e[n]=t[n]);return e}({selector:"h1, h2, h3, h4, h5, h6",scope:"body",overwrite:!1,prefix:"toc"},e)).selector;if("string"!=typeof t)throw new TypeError("selector must be a string");if(!t.match(/^(?:h[1-6],?\s*)*$/g))throw new TypeError("selector must contains only h1-6");var n=location.hash;return n&&setTimeout(function(){location.hash="",location.hash=n},0),o(e)}var h=function(e,t){return t<0?h(e.parentElement,t+1):0<t?function(e,t){for(;t--;){var n=document.createElement("ol");e.appendChild(n),e=n}return e}(e,t):e.parentElement};"function"==typeof define&&define.amd?define("toc",[],function(){return t}):e.initTOC=t}(window);var aside=document.getElementById("toc"),toc=initTOC({selector:"h2, h3",scope:".post-body"});function tocShowHide(){var e=document.querySelector(".toc"),t=document.createElement("button"),n=document.querySelector("#toc ol");e.appendChild(t),t.innerHTML="(إخفاء)",n.style.display="",t.addEventListener("click",function(e){"none"==n.style.display?(n.style.display="",t.innerHTML="(اخفاء)"):(n.style.display="none",t.innerHTML="(عرض)")})}function tocOption(){var e=document.querySelector(".toc");"undefined"==typeof linkMagzSetting&&(linkMagzSetting={judulTOC:"محتويات المقال",showHideTOC:!0}),e.innerHTML=linkMagzSetting.judulTOC,1==linkMagzSetting.showHideTOC&&tocShowHide()}null!=aside&&(aside.appendChild(toc),tocOption()); //]]> </script>

 يمكنك تغيير "محتويات المقال" بأي عبارة أخرى.

 

الآن لإضافة جدول المحتويات لديك طريقتان:

 

1- إضافة جدول المحتويات يدويًا في المشاركات التي تحددها:

من خلال المشاركة إنتقل إلى وضع تحرير/ html ثم ألصق الكود التالي في المكان المراد وضع جدول المحتويات فيه سواء في بداية التدوينة أو في المنتصف, في أي مكان تريد.

<div id="toc"><b class="toc"></b></div>

2- إضافة جدول المحتويات تلقائيًا في المشاركات القديمة والجديدة:

ابحث عن <data:post.body/> - ستجده منه إثنان أو ثلاث في القالب، في كل مرة تجد فيه هذا الوسم ضع قبله أو فوقه نفس الكود الذي بالأعلى، هذه المرة لن تحتاج إلى إضافته يدويًا في المشاركات.

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

 

وهكذا تعمل مع كل العناوين المراد إظهارها في جدول المحتويات، بحيث لو ضغطت على العنوان في جدول المحتويات ستنتقل مباشرة إلى السطر الذي يوجد به ذلك العنوان.

أو تقوم بلصق الكود التالي في وضع تحرير/ html للمشاركة وسيتم إضافة العنوان مباشرة إلى جدول المحتويات.

<h2 style="text-align: right;"> هنا تكتب العنوان </h2>

 

أتمنى يكون الشرح سهل وواضح والأهم أنك أستفدت

ختامًا .. اللهم صلّ وسلم على نبينا محمد وآله وصحبه ..