ما هو الدومين اثورتي وكيفية معرفة الدومين اثورتي Domain Authority ؟

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

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

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

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

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

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

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

1. تنظيم المحتوى: يتيح جدول المحتويات تنظيم المحتوى بطريقة منظمة وهيكلية، مما يجعله أسهل للقراء العثور على المعلومات التي يبحثون عنها.
2. تحسين تجربة المستخدم: يساعد جدول المحتويات في تحسين تجربة القراءة للمستخدمين، حيث يمكنهم الانتقال بسهولة إلى الأجزاء التي يرغبون في قراءتها دون الحاجة إلى التمرير بشكل طويل.
3. زيادة الاهتمام والمشاركة: من المحتمل أن يزيد وجود جدول المحتويات من اهتمام القراء بالمحتوى ويجعلهم أكثر عرضة للمشاركة مع الآخرين، حيث يمكنهم بسهولة مشاركة الأجزاء الهامة من المقالة.
4. تحسين الرؤية في محركات البحث: يمكن أن يؤدي وجود جدول المحتويات إلى تحسين رؤية المقالة في محركات البحث، حيث يمكن أن تظهر العناوين الموجودة في الجدول في نتائج البحث وتساعد في جذب المزيد من الزوار.
5. تحسين التصفح عبر الأجهزة المحمولة: يكون جدول المحتويات مفيدًا بشكل خاص على الأجهزة المحمولة، حيث يساعد في جعل التصفح أكثر سلاسة ويقلل من الحاجة إلى التمرير الطويل على الشاشة الصغيرة.

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

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

• افتح موقع بلوجر ثم اتجه الى المظهر بعدها الى تعديل 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) "." counter(section2);counter-increment:section2;font-size:14px}
.mbtTOC2 li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}
.mbtTOC2 li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}
.mbtTOC2 li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." 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) "." counter(section2);counter-increment:section2;font-size:14px}
.mbtTOC2 li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}
.mbtTOC2 li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}
.mbtTOC2 li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." 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>

تعديل المقال