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

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

كيفية اضافة جدول المحتويات blogger

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

اقرأ ايضاً :أخطاء شائعة في إشهار المدونات ومخلفه لسياسه ادسنس!

وانت تتصفح مدونة جيزو ستجد في بداية جميع المقالات جدول المحتوى الذي من شئنه ان يزيد في تقوية سيو الموقع الخاص بك.

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

اقرأ ايضاً :شرح لغات البرمجة والجافا سكريبت

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

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

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

-اتبع الخطوات التالية:

1. توجه الى لوحة تحكم بلوجر من هنا.
2. حدد المدونة التي تريد تثبيث عليها سكريبت.
3. اختر المظهر من القائمة الجانبية.

ثم انقر على تعديل 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>  

وبكده قد انتهينا من تركيب "جدول المحتويات تلقائيا لبلوجر".

واي خطأ في لاتتردد بارسال تعليق بالمشكلة وسوف يتم الرد ف اسرع وقت، وشكرآ.

مواضيع مشابهة

• كيفية اصلاح الروابط المعطلة فى الموقعاصلاح الروابط المعطوبة فى مدونة بلوجر ، (كيفية ايجاد و اصلاح الروابط المعطوبة في المواقع؟) ، كيفية العثور وإصلاح الرواب ...
• حل مشكلة تقييد اعلانات ادسنس لموقعكقامة جوجل ادسنس، في الايام الاخيرة بإجراء تغييرات على سياسات AdSense لتحسين وتطوير خدماتها بلنسبة للمعلنين مما ادي هذا ...
• مجموعة إضافات بلوجر مهمة واساسية للمدوناتسلام الله عليكم متابعي ومحبي مدونة جيزو:اليوم سوف نتطرق إلى مجموعة من إضافات البلوجر المهمة والمتميزة والتي تضفي مظهر ج ...