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

. مرحبًا بكم في مدونة عبدو تكنولوجي! جدول المحتويات يعد أداة قوية تُسهِّل على القرّاء الوصول إلى الأقسام والمحتوى الهام بسرعة. في هذا الموضوع، سنتعلم معًا كيفية إضافة جدول المحتويات في مدونات بلوجر. سنرى خطوات توسيم العناوين وإنشاء جدول محتويات مرتب وجذاب يعزِّز تجربة القراءة

معاينة الاضافة

ضع الكود التالي فوق ال </head

<b:if cond='data:view.isPost'>
<style type='text/css'>
/*<![CDATA[*/  
:root{
--mainColor: #2573d8; /* اللون الاساسي*/
--txtColor: #27272a;/* اللون الخط*/
--separator : #e8e8e8;
}
.TOC{display:table;position:relative;border-radius:.5rem;padding:1.5rem;margin:40px 20px 40px 0;border:1px solid var(--separator);max-width:500px;width:100%}.TOC:empty{display:none!important}.TOC input{display:none}.TOC .toc-title{font-weight:600;font-size:1rem;user-select:none;display:flex;justify-content:space-between}.TOC .toc-title:after{content:'-';background-color:var(--mainColor);border-radius:3px;clear:both;color:#fff;cursor:pointer;font-weight:400;display:flex;justify-content:center;align-items:center;width:25px;height:25px}.TOC input:checked~.toc-title:after{content:'+'}.TOC .tocList{max-height:100%;max-width:500px;opacity:1;overflow:hidden;transition:max-height .1s,max-width,margin-top .3s linear,opacity .3s linear,visibility .3s linear;visibility:visible}.TOC input:checked~.tocList{margin-top:0;max-height:0;max-width:0;opacity:0;transition:max-height,max-width,margin-top .3s linear,opacity .3s linear,visibility .3s linear;visibility:hidden}.TOC ul{margin-top:5px;counter-reset:item;list-style:none;padding-inline-start:25px!important}.TOC .tocList>ul{padding-top:1rem}.TOC ul a{text-decoration:none;color:var(--txtColor);font-weight:600}.TOC ul li a:before{content:counters(item,".",decimal) ". ";display:inline-block;counter-increment:item;flex-grow:0;flex-shrink:0;margin-inline-end:.2em}.TOC ul li ul a{font-weight:400;display:inline-flex;align-items:stretch;flex-wrap:nowrap;font-size:16px}
/*]]>*/
</style>
</b:if>

ضع الكود التالي فوق ال </body