اضافة اداة جدول محتويات بلوجر تلقائي بشكل رائع

اضافة اداة جدول محتويات بلوجر تلقائي بشكل رائع

في هاذا الدرس سوف أقدم لكم طريقة إضافة جدول محتويات تلقائي بسهولة ، بحيث يقوم بعرض العناوين بشكل أنيق وهاذا بإضافة كود جدول المحتويات لمرة واحدة فقط.
اضافة أداة جدول محتويات المقال تلقائي بشكل رائع
اضافة أداة جدول محتويات المقال تلقائي بشكل رائع

ما هو جدول المحتويات

جدول المحتويات هو أداة تنشأ بشكل تلقائي قائمة بالعناوين التي تربط القارئ بالأقسام المختلفة في المقالة الخاص بك.

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

ما هي مزايا و اهمية جدول المحتويات

يعد استخدام ميزة جدول المحتويات في قوالب Blogger او WordPress أمرضروري ولابد منه ، وقد يتسائل البعض عن فائدة جدول المحتويات وهل ضروري لهاته الدرجة؟؟؟ سوف نشرح هاذا في النقاط التالية:


  • تحسين تجربة المستخدم: نعم عزيزي ، يعتبر الزائر أهم عامل لتطوير موقعك الإلكتروني من خلال العديد من العوامل منها معدل الإرتداد وتجربة المستخدم التي تقوم جوجل بدراسة كل هاته الخطوات بدقة.

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

  • تحسين محركات البحث: وهاذا من خلال زيادة كثافة الكلمات الرئيسية والفرعية في المقالة الخاصة بك ، و بالتالي زيادة فرصة ظهور موقعك في محركات البحث
  • يجعل موقعك أكثر إحترافية من خلال العناوين المرتبة
  • كود خفيف عل القالب ولايقلل من سرعته
  • قابل للتعديل و التخصيص
  • إمكانية إخفاء و إظهار جدول المحتويات التلقائي
  • تحسين seo الموقع الخاص بك

كيف تضيف جدول المحتويات التلقائي في بلوجر

ان كنت من الناس الذين يتسائلون عن كيفية عمل جدول محتويات تلقائيا على بلوجر فتابع الخطوات التالية:

  • افتح منصة بلوجر ثم المظهر بعدها الى تعديل HTML من أجل أفضل اضافة جدول محتويات
  • ابحث عن وسم <b:skin/> ، وضع الكود الاتي فوقه


.mbtTOC2 ol{counter-reset:section1;list-style: circle;}
.mbtTOC2 ol ol{counter-reset:section2}
.mbtTOC2 ol ol ol{counter-reset:section3}
.mbtTOC2 ol ol ol ol{counter-reset:section4}
.mbtTOC2 ol ol ol ol ol{counter-reset:section5}
.mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}
.mbtTOC2 li li:before{content:counter(section1) &quot;.&quot; counter(section2);counter-increment:section2;font-size:14px}
.mbtTOC2 li li li:before{content:counter(section1) &quot;.&quot;counter(section2) &quot;.&quot; counter(section3);counter-increment:section3}
.mbtTOC2 li li li li:before{content:counter(section1) &quot;.&quot;counter(section2) &quot;.&quot;counter(section3) &quot;.&quot; counter(section4);counter-increment:section4}
.mbtTOC2 li li li li li:before{content:counter(section1) &quot;.&quot;counter(section2) &quot;.&quot;counter(section3) &quot;.&quot; counter(section4)&quot;.&quot; counter(section5);counter-increment:section5}
.mbtTOC2{border: 1px solid #eee;color:#707037;line-height:1.4em;padding:20px 30px 20px 10px;display: block;}
.mbtTOC2 button{background: #fff;display: block;font-size: 17px;padding-bottom: 6px;border: none;border-bottom: 1px solid #eee;margin-bottom: 6px;position: relative;}
.mbtTOC2 button a {color:#0080ff; padding:0px 2px;cursor:pointer;} 
.mbtTOC2 button a:hover{ text-decoration:underline; } 
.mbtTOC2 button span {font-size:15px; margin:0px 10px; }
.mbtTOC2 ol{counter-reset:section1;}
.mbtTOC2 li{margin:10px 15px;list-style: circle;  } 
.mbtTOC2 li a {color:#000000; text-decoration:none; font-size:13px; text-transform:capitalize;} 
.mbtTOC2 li a:hover {text-decoration: underline;}
.mbtTOC2 li li {margin:4px 0px;} 
.mbtTOC2 li li a{ color:#000000; font-size:13px;}
.mbtTOC2 ol{counter-reset:section1;list-style:none}
.mbtTOC2 ol ol{counter-reset:section2}
.mbtTOC2 ol ol ol{counter-reset:section3}
.mbtTOC2 ol ol ol ol{counter-reset:section4}
.mbtTOC2 ol ol ol ol ol{counter-reset:section5}
.mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}
.mbtTOC2 li li:before{content:counter(section1) &quot;.&quot; counter(section2);counter-increment:section2;font-size:14px}
.mbtTOC2 li li li:before{content:counter(section1) &quot;.&quot;counter(section2) &quot;.&quot; counter(section3);counter-increment:section3}
.mbtTOC2 li li li li:before{content:counter(section1) &quot;.&quot;counter(section2) &quot;.&quot;counter(section3) &quot;.&quot; counter(section4);counter-increment:section4}
.mbtTOC2 li li li li li:before{content:counter(section1) &quot;.&quot;counter(section2) &quot;.&quot;counter(section3) &quot;.&quot; counter(section4)&quot;.&quot; counter(section5);counter-increment:section5}
.point2 {list-style-type:lower-alpha} 
.point3 {list-style-type:lower-roman} 
.point4 {list-style-type:disc} 
.mbtTOC2 li:before {display: none;}

  • انسخ الكود التالي فوق وسم <body/>

<script type='text/javascript'> 
//<![CDATA[ 
//*************
function mbtTOC2(){var a="",b="",c="";document.getElementById("post-toc").innerHTML=document.getElementById("post-toc").innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#point'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='point"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("mbtTOC2").innerHTML+=c}function mbtToggle2(){var a=document.getElementById("mbtTOC2"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.display="block",b.innerHTML="إخفاء"):(a.style.display="none",b.innerHTML="إظهار")} 
//]]> 
</script>
<script>mbtTOC2();</script>

  • ابحث عن الوسم <data:post.body/> وقم بإستبداله بالكود التالي (اذا وجدت 2 او 3 اكواد مشابهة لنفس الكود فيجب التحقق من انه الكود المطلوب كما شرحت في الفيديو)

<div id="post-toc"><data:post.body/></div>

  • ضع هاذا الكود في المكان الذي تريد أن يظهر فيه كود جدول المحتويات عادة مايكون فوق وسم <data:post.body/> السابق

<div class='mbtTOC2'> 
<button>جدول المحتويات<span>[<a id='Tog' onclick='mbtToggle2()'>إخفاء</a>]</span></button> 
<div id='mbtTOC2'/> 
</div>

  • ثم قم بحفظ التغيرات
تحميل اضافة أداة جدول محتويات 4.4kb
تعليقات