ميزة "جدول المحتويات" (Table of Contents - TOC) في بلوجر هي خاصية تسمح بعرض قائمة منظمة لأقسام المقالة أو الموضوع المنشور في المدونة.
يتم إنشاء هذا الجدول عادةً بشكل تلقائي بناءً على العناوين الفرعية (مثل <h2>, <h3>, إلخ) المستخدمة في المقالة. يسهل جدول المحتويات على القراء التنقل داخل المحتوى للوصول إلى الأقسام التي تهمهم بشكل مباشر. في هذا المقال سوف نتطرق إلى شرح كيفية إضافة جدول المحتويات تلقائي على بلوجر.
ميزات ميزة "جدول المحتويات" في بلوجر
- التنقل السريع: يمكن للزوار الوصول مباشرةً إلى القسم الذي يريدون قراءته دون الحاجة إلى التمرير عبر الصفحة بالكامل.
- تحسين تجربة المستخدم: توفر هذه الميزة تجربة تصفح مريحة ومنظمة للقراء، مما يزيد من احتمال بقاء الزائر لفترة أطول في المدونة.
- تحسين السيو (SEO): يساعد جدول المحتويات على تحسين السيو من خلال تنظيم المحتوى بشكل جيد وجعله أكثر قابلية للفهم بالنسبة لمحركات البحث.
- مظهر احترافي: يجعل وجود جدول محتويات في المقالة المدونة تبدو أكثر احترافية وتنظيماً.
لماذا يجب استخدام ميزة "جدول المحتويات" في بلوجر؟
استخدام ميزة "جدول المحتويات" في بلوجر يُعتبر ضرورة لأي مدون يرغب في تحسين تجربة المستخدم وتعزيز السيو. من خلال توفير وسيلة سريعة للتنقل بين أقسام المقالة، يمكنك زيادة تفاعل القراء مع المحتوى، وتقليل معدل الارتداد (Bounce Rate). كما أن وجود جدول محتويات يجعل المحتوى أكثر جاذبية للقراء ويعطي انطباعًا إيجابيًا عن احترافية المدونة وتنظيمها.
ميزة "جدول المحتويات" ليست فقط أداة لتسهيل التصفح، بل هي أيضًا استراتيجية فعّالة لجذب المزيد من الزوار من خلال تحسين ترتيب المقالات في نتائج محركات البحث.
كيفية إضافة ميزة "جدول المحتويات" إلى مدونة بلوجر
إليك خطوات إضافة ميزة "جدول المحتويات" (TOC) إلى مدونتك على بلوجر:
الخطوة 1: الانتقال إلى محرر HTML
- سجّل الدخول إلى لوحة التحكم في بلوجر.
- من القائمة الجانبية، اختر المظهر.
- اضغط على زر تعديل HTML لتحرير كود القالب الخاص بمدونتك.
الخطوة 2: البحث عن وسم <data:post.body/>
- داخل محرر HTML، اضغط على Ctrl + F لفتح شريط البحث.
- اكتب في شريط البحث: <data:post.body/> للعثور على الوسم المطلوب.
الخطوة 3: إضافة كود "جدول المحتويات"
بعد العثور على وسم <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>
بعدها تضغط على حفظ.
إضافة ميزة "جدول المحتويات" إلى مدونتك على بلوجر ليست مجرد تحسين بسيط في التصميم، بل هي خطوة استراتيجية مهمة لتحسين تجربة المستخدم وجعل المحتوى أكثر سهولة في الوصول والتنقل. من خلال إرشادات بسيطة، يمكنك تحسين هيكلية مدونتك وجعلها أكثر احترافية وجاذبية للقراء. استثمار الوقت في تطبيق هذه الميزة سيؤدي بالتأكيد إلى زيادة التفاعل مع محتواك وتحسين أداء مدونتك في محركات البحث. تأكد دائمًا من مراجعة التغييرات وتجربتها قبل نشرها، لضمان تقديم أفضل تجربة لزوار مدونتك.