سعر و مواصفات Huawei nova 8 5G مميزات و عيوب

كيفية عمل جدول محتويات في مدونات المشاركات

جدول المحتويات عبارة عن قائمة تتكون من نقاط أو نقاط مناقشة رئيسية في مقال. يمكننا استخدام "جدول المحتويات" كتحليل لمحتويات المقالة في شكل ارتباط بحيث يسهل على القراء اختيار المعلومات التي سيتم قراءتها في الجزء الرئيسي من الموضوع. غالبًا ما يتم العثور على جدول المحتوى هذا على ويكيبيديا والموسوعات وكذلك ملفات PDF من الكتب الإلكترونية التي يتم وضعها عادةً بعد إدخال الكلمة التمهيدية أو الفكرة الرئيسية لمقال.

فيديو شرح

طريقة التركيب

اوالان نتوجة الى المظهر ثم تحرير HTML ثم قم بالبحث عن /b:skinوقم بوضع الكود فوقة اى قبلة مباشرتا

#light-toc{background:#f5f5f5;border-radius:3px;padding:10px 20px;text-align: center; } #toc_list{font-weight:700;cursor:pointer;margin:10px 0} #toc_list:focus,#toc li:focus,.back_tocontent:focus{outline:none} #toc_list svg{vertical-align:middle} #toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em} #toc ol li:before{left:-2em} #toc li a{color:#222} #toc li a:hover{color:#1e90ff} #toc{display:grid} .back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:4px 12px;border-radius:99em;transition:all .3s} .back_tocontent:hover{background:#2d3436;color:#fff} :target::before{content:'';display:block;height:40px;margin-top:-40px;visibility:hidden}

اوالان فى كل مقالة تريد اضافة الجدول اضف الكود بالتوجة الي المقالة ثم HTML وقم بوضع الكود

<div id="light-toc">
<div id="toc_list" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0"><svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg>
Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="toc">
<ol>
<li><a href="#mpd2019_1" title="Subheading 1">Red</a></li>
<li><a href="#mpd2019_2" title="Subheading 2">Blue</a></li>
<li><a href="#mpd2019_3" title="Subheading 3">Green</a></li>
</ol>
</div>
</div>

اكواد التوجة

<h4 id="mpd2019_1">Red</h4>
<h4 id="mpd2019_2">Blue</h4>
<h4 id="mpd2019_3">Green</h4>

تحذير يسمح باخذ المحتوي وتقوم بذكر المصدر برابط يوجه للمقالة الاصلية والا سوف يتم التبليغ عنك وسيتم حذف المقالة من طرف بلوجر بدون اخبارك