اضافة جدول محتوى المقال في بلوجر Table of content 2023

byسعدو للتقنية •

هل تريد إضافة جدول محتوى Table of content على موقع blogger الخاص بك ولكن لا تريد التنازل عن سرعة التحميل ، إذا فهذه الطريقة تناسبك.

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

في هذا الدليل ، سأوضح لك كيف يمكنك إضافة جدول محتوى تلقائي داخل منشور مدونة بلوجر باستخدام CSS و JavaScript لتشغيل جدول المحتوى.

◀️ و الان دعونا نفهم بعض الأشياء الأساسية حول Toc.

1• ماهو جدول المحتوى:

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

2• ما هي مزايا استخدام جدول المحتويات؟

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

 يجلب جدول المحتويات الرائع بالتأكيد الفوائد التالية إلى موقع الويب الخاص بك.

  • يمنح موقع الويب الخاص بك مظهرًا سهل الاستخدام وشاملًا.

  • فرز جميع المواضيع على المقال الخاصة بك على شكل نقاط.

  • هذا لا يلبي احتياجات زوار مدونتك فحسب ، بل يوفر أيضًا تجربة مشاهدة وقراءة ممتازة.

  • سيؤدي هذا بالتأكيد إلى زيادة حجم زوار موقع الويب الخاص بك.

3• فوائد جدول المحتوى للسيو SEO :

بالطبع ، يحتل جدول المحتويات جزءًا كبيرًا من تطوير السيو الخاص بموقعك. يساعد جدول المحتويات هذا على تحسين السيو في موقعك أو مدونتك. 

يعمل Google على ترتيب أفضل المقالات في محركات البحث. جدول المحتويات هو إضفاء مظهر احترافي على موقعك في Blogger . لذلك ، يزيد جدول المحتوى أيضًا من تصنيف موقع الويب الخاص بك. حيث أنه يحسن نسبة النقر إلى الظهور (CTR) الخاصة بك على الموقع. لذا ، فإن إضافة جدول محتويات إلى موقع الويب الخاص بك سيمنحك بالتأكيد بعض فوائد للسيو (SEO).

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

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

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

4• كيف يمكن لجدول المحتوى تحسين تجربة المستخدم؟

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

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

5• كيفية إضافة جدول المحتوى:

في هذه الطريقة ، يجب عليك إضافة بعض أكواد CSS و JavaScript إلى قالب Blogger الخاص بك 

الخطوة 1• انقر فوق تحرير HTML في قسم السمة والصق الكود فوق علامة </head> مباشرةً.

CSS 
<style>
/* CSS Table of Contents by saado-tech.xyz */
#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>

الخطوة 2• الان ابحث عن  علامة </body>  واضف الكود التالي فوقه.

HTML 
//<![CDATA[   
//toc by saado-tech.xyz
!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>
الخطوة 3• ثم في الخطوة الاخيرة قم بالبحث عن <data:post.body/>  واضف الكود التالي فوقه ثم قم بحفظ المظهر.
HTML 
<div id='toc'><b class='toc'></b></div>

لا تنسى حفظ التعديلات.

تهانينا الآن لقد تم إضافة جدول المحتوى بنجاح !!!

6• ختاما :

يعد وجود جدول المحتويات Table of content في المحتوى الطويل مفيدًا جدًا ويحسن تجربة المستخدم. 

لذلك ، لقد شاركت معك هذه الطريقة لإضافة جدول المحتويات بشكل تلقائي .

إذا أعجبك هذا الشرح ، فقم بمشاركته مع أصدقائك .

Tags

إرسال تعليق

أحدث أقدم
مشاركة في التطبيقات الأخرى
نسخ رابط المشاركة

نموذج الاتصال