طريقة إضافة أداة جدول محتويات المقال إلى بلوجر تلقائياً

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

إنها أقوى أكواد بلوجر الجاهزة لسنة 2023 و 2024 جدول محتويات بلوجر التي تساعد في تسريع القالب واضافة مدونة بلوجر لمحركات البحث جوجل وبينج ومحرك البحث yandex

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

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

ما هو جدول محتويات المقال ؟

جدول المحتوى او جدول محتويات المقال والذي يُعرف بـ "Article table of contents" هو الوسيلة والطريقة الأفضل والتي تعشقها فيروسات البحث الفهرسة التي تقوم بأرشفة المقالات في محرك البحث جوجل وفي جميع محركات البحث

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

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

وهذا الأمر يطلب من المستخدم فهم لغات البرمجة وبذل الكثير من الجهد في كل مقال غلى حدى, لكن الجدول الذي سوف يتم طرحه هو جدول تلقائي بمجرد تطبيقه لمرة واحدة سوف يتم تطبيق جدول المحتوى سوف يتم تطبيقه على جميع المقالات السابقة والمقالات التي سوف تنشر في المستقبل

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

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

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

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

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

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

طريقة إستخدام جدول المحتويات وتركيبه على مدونة بلوجر

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

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

في البداية يجب الدخول إلى المظهر بعد ذلك يجب الدخول إلى زر تعديل HTML وفتح المستند الذي يتضمن الأكواد المطلوبة
في قسم <head> سوف يجده المستخدم في بداية الموقع في بداية كود الموقع
يجب وضع فراغ خلف كلمة <head>
بعد ذلك يجب نسخ الكود الأول بشكل كامل, الكود موجود في المستند الذي سوف يتم إدراج الرابط الخاص به في نهاية المقال

طريقة تعريب قوالب بلوجر الأجنبية يدوياً و اون لاين عبر موقع Nadertricks

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

أولاً عليكم الدخول إلى المظهر ومن ثم إلى إعدادات HTML وبعد ذلك عليكم وضع هذا الكود فوق قسم <head>

<style>
/* CSS Table of Contents by tharabic.com */
#toc{border-right:6px dotted rgba(121,128,136,0.24);padding-right:20px;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:0;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>ol{counter-reset:item;list-style:none}#toc>ol>li:before,#toc>ol li>li:before{content:counters(item,".") " ";counter-increment:item;margin-left:5px}#toc>ol>ol{padding-right:16px;padding-right:1rem}#toc>ol>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:" ";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>

في الخطوة التالية يجب البحث عن قسم body وسوف تجدونه في نهاية الأكواد الخاصة بقالب بلوجر

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

عليكم وضع هذا الكود خلف قسم </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="none",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>

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

قد يكون الكود هذا مكرر مرتين ويمكن البحث عنه بسهولة

طريقة البحث عن كود محدد في أكواد قالب بلوجر هي عن طريق الضغط على CTRL _ F

عند إيجاد هذا الكود يجب نسخ الكود الأخير الموجود في المستند وتقومون بوضعه فوق الكلمة data:post.body

عليكم وضع هذا الكود فوق قسم data:post.body

قم بالبحث عن </data:post.body> واضف الكود التالي فوقه ثم قم بحفظ المظهر:

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

سوف يظهر قسم البحث الذي يساعد المستخدم على إيجاد القسم الذي يبحث عنه

بعد التأكد من نسخ الأكواد بشكل كامل يجب الضغط على حفظ أو save الخاص بالمظهر في الأعلى

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

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

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

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

لتحميل مستند النص الذي يحتوي على جميع الأكواد المطلوبة ادخلوا هنا