Forms

الاسم

بريد إلكتروني *

رسالة *

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

Author Img
عبدو تكنولوجي

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

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


فيديو الشرح


ضع الكود التالي فوق ال </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

لا تنسى الاشتراك في المدونة من القائمة العلوية

قد تُعجبك هذه المشاركات

تعليقات

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