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

مدونة تقدم كل ما هو جديد في البرامج و التطبيقات, دروس في سيو, قوالب و اضافات بلوجر

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

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

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

مميزات  جدول المحتويات مدونة بلوجر

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

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

  1. إضافة سكريب جدول المحتويات تلقائيا لمدونة بلوجر اتبع الخطوات التالية :
  2. توجه الى لوحة تحكم بلوجر من هنا
  3. حدد المدونة التي تريد تثبيث عليها سكريبت
  4. اختر المظهر من القائمة الجانبية
ثم انقر على تعديل 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>  واضف الكود التالي فوقه :
<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>  واضف الكود التالي فوقه ثم قم بحفض المظهر :
<div id='toc'><b class='toc'></b></div>