تحميل قالب ليفون مجانا الاصدار الاخير 2021 - بلوجر

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

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

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

أولا : سوف تدخل على بلوجر . 

ثانيا: المظهر .

ثالثا : الاحتفاظ بنسخة إحتياطية .

رابعا : تعديل Html .

سوف تقوم بالبحث عن هذا الكود ↓↓ عن طريق الضغط على Ctrl + F

</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&gt;ol{counter-reset:item;list-style:none}#toc&gt;ol&gt;li:before,#toc&gt;ol li&gt;li:before{content:counters(item,&quot;.&quot;) &quot; &quot;;counter-increment:item;margin-left:5px}#toc&gt;ol&gt;ol{padding-right:16px;padding-right:1rem}#toc&gt;ol&gt;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:&quot; &quot;;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> <!--محتويات المقال-->

بعد ذلك سوف تقوم بالبحث عن هذا الكود ↓↓ عن طريق الضغط على Ctrl + F.

</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>

بعد ذلك سوف تقوم بالبحث عن هذا الكود ↓↓ عن طريق الضغط على Ctrl + F.

<data:post.body/>

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

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

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

هكذا نكون قد انتهينا من تحرير Html  .

نضغط حفظ المظهر.

سادسا : تضغط عرض المدونة .

سابعا: تدخل على أي مقالة عشوائية سوف تجد ان جدول المحتويات قد أضيف .

 

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