

ميزة جدول المحتويات في بلوجر |
ميزة "جدول المحتويات" (Table of Contents - TOC) هي أداة رائعة تتيح لك تنظيم محتوى المقالات في مدونتك بطريقة سلسة ومهنية. هذه الميزة تُسهل على القراء التنقل بين أقسام المقالة المختلفة دون الحاجة إلى التمرير الطويل. في هذا المقال، سنتعرف على كيفية إضافة "جدول المحتويات" تلقائيًا إلى مدونتك في بلوجر.
إضافة جدول المحتويات إلى مقالات مدونتك ليس مجرد تحسين في التصميم، بل خطوة استراتيجية لتحسين تجربة المستخدم والسيو (SEO). إليك بعض الفوائد الرئيسية:
لإضافة جدول المحتويات إلى مدونتك في بلوجر، يمكنك اتباع الخطوات التالية:
بعد العثور على وسم <data:post.body/>، قم بإضافة الكود الخاص بجدول المحتويات مباشرةً قبله. إليك الكود المطلوب:
<style>.hidden{display:none}.jistwebtocI:checked~.jistwebtocL{right:0;z-index:9999}.jistwebtocI:checked~.jistwebtocL .jistwebtocC{opacity:0;visibility:hidden}.jistwebtocI:checked~.jistwebtocL .fCls{background:rgba(0,0,0,.25);opacity:1;visibility:visible}@media screen and (min-width:768px){.jistwebtocC{top:40px}}.fCls{display:block;position:fixed;top:-50%;left:-50%;right:-50%;bottom:-50%;z-index:1;transition:all .1s ease;background:0 0;opacity:0;visibility:hidden}.jistwebtocL{position:fixed;top:0;bottom:0;right:-280px;width:280px;transition:all .1s ease;z-index:9999}.jistwebtocLi{width:100%;height:100%;position:relative;background:#fff;box-shadow:0 5px 30px 0 rgba(0,0,0,.05);z-index:2;border-radius:12px 0 0 12px}.jistwebtocLs{position:relative;top:20px;background:inherit}.fixH{display:flex;background:inherit;position:absolute;top:0;left:0;right:0;padding:0 10px;z-index:2}.jistwebtocC{position:absolute;left:-45px;top:105px;transition:all .1s ease}.jistwebtocC span{display:flex;align-items:center;justify-content:center;width:45px;height:40px;border-radius:15px 0 0 15px;background:#fff;box-shadow:0 0 10px 0 rgba(0,0,0,.1);transition:inherit;z-index:1}.jistwebtocC span svg{opacity:.95;width:22px;height:22px}.jistwebtocT{display:flex;width:100%}.fixT::before{content:attr(data-text);flex-grow:1;padding:16px 10px;font-size:90%;opacity:.7;font-family:inherit}.fixH .cl{padding:0 10px;display:flex;align-items:center;justify-content:flex-end;position:relative;flex-shrink:0;min-width:40px}.jistwebtocIn{padding:50px 0 0;overflow-y:auto;width:100%;height:calc(100vh - 60px)}.jistwebtocIn ol{list-style:none;padding:0;margin:0;line-height:1.5em}.jistwebtocIn li:not(:last-child),.jistwebtocIn ol ol{margin-bottom:5px}.jistwebtocIn li a{flex:1 0 calc(100% - 23px)}.jistwebtocIn a{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:inherit;text-decoration:none}.jistwebtoc-list{width:100%;position:relative;box-shadow:2px 0 0 0 rgba(0,0,0,.1) inset}.jistwebtoc-list.is-collapsible .jistwebtoc-link{padding-left:2.25rem}.jistwebtoc-list.is-collapsed{display:none}.jistwebtoc-link{display:block;color:#495057;padding:.75rem 1rem .75rem 1.5rem;transition:.5s}.jistwebtoc-link.is-active-link{background-color:#eceff1;font-weight:500;box-shadow:2px 0 0 0 #495057 inset}.docs-jistwebtoc{--bg-scrollbar-thumb:#ced4da;--bg-scrollbar-track:transparent}ul.jistwebtoc-list li:before{all:unset}.jistwebtocIn ul{all:unset}.jistwebtocIn ul{list-style:none;padding:0;margin:0;font-family:Arial,sans-serif}.jistwebtocIn li{margin-bottom:8px}.jistwebtocIn a{display:block;color:#333;text-decoration:none;padding:10px 15px;border-radius:5px;transition:background-color .3s ease,color .3s ease;font-size:14px;line-height:1.4;font-weight:500}.jistwebtocIn a:hover{background-color:#f0f0f0;color:#007bff}.jistwebtocIn a.is-active{background-color:#007bff;color:#fff;font-weight:600;box-shadow:0 2px 4px rgba(0,0,0,.1)}.jistwebtocIn ul ul{padding-left:20px;margin-top:5px;border-left:2px solid #e0e0e0}.jistwebtocIn ul ul a{padding-left:30px;font-size:13px}</style> <input class='jistwebtocI hidden' id='forjistwebtocJs' type='checkbox'/><div class='jistwebtocL'><div class='jistwebtocLi'><div class='jistwebtocLs'><label aria-label='Close TOC' class='jistwebtocH fixH' for='forjistwebtocJs'><div class='jistwebtocC'><span><svg class='bi bi-card-list' fill='currentColor' height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z'/><path d='M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8zm0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-1-5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zM4 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 2.5a.5.5 0 1 1-1 0 .5.5 0 1 1 1 0z'/></svg></span></div><div class='jistwebtocT fixT' data-text='جدول المحتويات'><span class='c cl' data-text='Close'/></div></label><div class='jistwebtoc jistwebtocIn scroll' id='jistwebtocAuto'/></div></div><label class='fCls' for='forjistwebtocJs'/> </div> <script type='text/javascript'>/*<![CDATA[*/ document.addEventListener("DOMContentLoaded",function(){const a=document.querySelector(".post-body"),b=a.querySelectorAll("h2, h3, h4, h5, h6"),c=document.querySelector("#jistwebtocAuto"),d=document.createElement("ul");d.classList.add("jistwebtoc-list"),b.forEach(function(a,e){const f=a.id||"heading-"+(e+1);a.id=f;const g=document.createElement("li"),h=document.createElement("a");if(h.href="#"+f,h.textContent=a.textContent,g.appendChild(h),d.appendChild(g),"h2"!==a.tagName.toLowerCase()){const d=function(a){const d=a.tagName.toLowerCase();let e;if("h3"===d?e="h2":"h4"===d?e="h3":"h5"===d?e="h4":"h6"===d&&(e="h5"),e)for(let a=b.length-1;0<=a;a--)if(b[a].tagName.toLowerCase()===e){const d=c.querySelector("a[href=\"#"+b[a].id+"\"]");if(d)return d.parentElement}return null}(a);if(d){let a=d.querySelector("ul");a||(a=document.createElement("ul"),a.classList.add("jistwebtoc-list"),d.appendChild(a)),a.appendChild(g)}}}),c.appendChild(d)});/*]]>*/</script>
بعد إضافة الكود، اضغط على "حفظ" لتثبيت التغييرات. الآن، سيتكون "جدول المحتويات" تلقائيًا في المقالات التي تحتوي على أكثر من عنوان رئيسي أو فرعي. ن
للحصول على أفضل نتائج عند استخدام جدول المحتويات في مقالات بلوجر، تأكد من اتباع النصائح التالية:
إضافة "جدول المحتويات" تلقائيًا في بلوجر هو خطوة مهمة لتحسين تجربة المستخدم وتسهيل التنقل داخل المدونة. هذا الجدول يسهل على القراء استكشاف محتوى المقالة بشكل أسرع ويعزز من ترتيب المقالة في محركات البحث. باتباع هذه الخطوات البسيطة، يمكنك تحسين تصميم مدونتك وجعلها أكثر احترافية.
دعوة للتفاعل
نحب نسمع آرائكم وتجاربكم! إذا عدكم أي سؤال بخصوص إضافة "جدول المحتويات" ببلوجر أو حابين تشاركونا تجاربكم ويا هالخاصية، لا تترددون تكتبون تعليق تحت. تفاعلكم راح يغني النقاش ويساعد غيركم على تحسين مدوناتهم همين. ننتظر تعليقاتكم بفارغ الصبر!
تعليقات
0