. مرحبًا بكم في مدونة عبدو تكنولوجي! جدول المحتويات يعد أداة قوية تُسهِّل على القرّاء الوصول إلى الأقسام والمحتوى الهام بسرعة. في هذا الموضوع، سنتعلم معًا كيفية إضافة جدول المحتويات في مدونات بلوجر. سنرى خطوات توسيم العناوين وإنشاء جدول محتويات مرتب وجذاب يعزِّز تجربة القراءة
معاينة الاضافة
فيديو الشرح
ضع الكود التالي فوق ال </head
ضع الكود التالي فوق ال </body
<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
لا تنسى الاشتراك في المدونة من القائمة العلوية
تعليقات
يا ليت تضيف اضافة صفحة معلومات التبرع على بلوجر و شكرا
إنشالله
دائما مبدع وتقدم شي مواضيع مميزه وبشروحات بشكل مبسط شكرا استاذ عبدو بس للأسف رابط تحميل كود متوقف
حبيبي اظن ان الرابط يعمل معي