سكريبت جدول المحتويات تلقائي مواضيع لبلوجر

سكريبت جدول المحتويات تلقائي مواضيع لبلوجر

أهمية إضافة جدول المحتويات:

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

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

الخطوات:

1. قم بالدخول إلى لوحة تحكم بلوجر ثم المظهر ثم تعديل HTML.
2. قم بالبحث عن الكود <head/> بالنقر على Ctrl + F .
3. أضف الكود التالي فوقه 

   <style>
   /* CSS Table of Contents  */
   #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>

   ..
4. قم بالبحث أيضا عن الكود <body/> بالنقر على Ctrl + F .
5. أضف الكود التالي فوقه

   !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

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

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

    .