كود إنشاء نص متحرك فى كل الإتجاهات 2023

جدول المحتويات في بلوجر"Blogger" سأشرح اليوم كيفية إضافة جدول المحتويات في "blogger أو blogspot" احترافي وخفيف لمقالات بلوجر باستخدام "JavaScript"، وأيضاُ سأشرح طريقة أخري لأضافه جدول محتويات لكل مقال علي حدا.

اضافه جدول المحتويات في بلوجر

كيفية إضافة جدول المحتويات في بلوجر "Blogger"

اليوم سنتعرف علي كيفية إضافة جدول المحتويات "Table of Contents" في بلوجر "Blogger"، مرحبًا بالمدونين.

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

- ركز جيداً بالشرح لتفادي الأخطاء وبعد الانتهاء من القراءة ستتمكن من أضافه جدول المحتويات بطريقة سهلة وبسيطة بسم الله نبدء.

ما هو جدول المحتويات - Table of Contents؟

جدول المحتويات أو فهرس المقال، هو جزء صغير من المحتوى بتنسيق جدولي يظهر عادة قبل الجزء الأول من المنشور أو المقالة. يسرد جميع العناوين أو العناوين الفرعية لمشاركاتك أو مقالتك في جدول.

ما هو جدول المحتويات التلقائي؟ 

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

مثلاً عندما تزور ويكيبيديا، تجد جدول المحتويات في كل مقال تقرأه، ويسهل علينا استكشاف المقالة بالكامل والقفز مباشرة إلى المقطع أو النقطة المحددة، وبالتأكيد ينقر المستخدم على نقاط جدول المحتويات للتنقل السريع وفهم محتوى المنشور.

ما هي مزايا استخدام جدول المحتويات؟

كما تعلم أن جدول المحتويات يظهر فوق بداية مشاركاتك مباشرةً بعد الفقرة الأولى، يمكن لجمهورك ببساطة تناول بضعة أسطر في الصفحة العليا من المنشور بأكمله.

لذلك، يمكن لجدول المحتوى المخطط جيداً أن يساعد بشكل إيجابي في:

• إعطاء نظرة احترافية لمنشورك أو مقالتك.
• ترتيب نقاط منشورك أو مقالتك بطريقة منهجية.
• إدارة توقعات جمهورك، لأنها توفر عرضًا عالي المستوى لمشاركاتك أو مقالتك.
• توفير خارطة طريق لجمهورك للتنقل بسهولة في مشاركتك أو مقالتك بالكامل.

هل يمكن لـ جدول المحتويات تحسين تجربة المستخدم؟ 

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

هل تعلم، وفقًا للبحث، أن تجربة المستخدم هي المفتاح للحصول على ترتيب أعلى في SERP. ولتحسين تجربة المستخدم لمدونتك، سيساعدك جدول المحتويات في هذا.

وفقًا للبحث، فإن أكثر من 80٪ من إجمالي قراء الويب يقرؤون فقط النقاط المهمة في منشور أو مقالة مدونة.

يجب عليك تطبق جدول المحتويات فقط عندما يكون طول المقالة أو المنشور جيدًا بما فيه الكفاية وأن يكون المقال أو المنشور يحتوي على أكثر من 3 عناوين.

 

هل يعمل جدول المحتويات على تحسين محركات البحث؟

بالتأكيد يساعد جدول المحتويات في تحسين محركات البحث أيضًا، وفهم تركيبة المنشور وأهم العناوين، إليك أسباب تحسين محركات البحث بمساعدة جدول المحتويات:

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

لذلك، مع كتابة منشور أو مقالة ذو محتوي طويل بمدونتك، من المحتمل أن تحصل مدونتك على ترتيب أفضل في محركات البحث، هل تعلم يا صديقي أن جوجل "Google" تعتبر المنشور الأطول عامل ترتيب.

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

مثال: جدول المحتويات عبارة عن عناوين الفقرات سواء فرعية أو ثانوية. وبالتأكيد، يساعد جدول المحتويات الخوارزميات من أرشفة الموضوع ومعرفة محتوي المقال بشكل أسرع.

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

ميزات البرنامج المساعدة لجدول المحتويات

تم ترميز هذا البرنامج المساعد من JavaScript" و CSS" وقد تم تصميمه بحيث لا يتم تحميله حتى يتم تحميل صفحة الويب الخاصة بك بالكامل.

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

ميزة مهمة أيضاً أفضل جزء هو أن جدول المحتويات هذا لا يتم تنفيذه إلا عند استدعائه. هذا يعني أنه يمكنك تمكين أو تعطيل جدول المحتويات في صفحة أو منشور معين.

كيفية إضافة جدول المحتويات في بلوجر Blogger؟ 

اتبع الخطوات التالية لإضافة جدول المحتويات في بلوجر "Blogger" وركز جيداً

ملحوظة: يوصى بشدة بعمل نسخة احتياطية من القالب الحالي قبل تخصيص القالب أو إجراء تغييرات عليه لتجنب حدوث أي أخطاء، حتي يمكنك استعادة القالب الأصلي.

طريقة إضافة جدول المحتويات في بلوجر Table of Contents

1. قم بتسجيل الدخول إلى Blogger
2. التوجه للوحة تحكم مدونتك ثم المظهر وتعديل HTML.

3. أضغط في الكيبورد على  Ctrl + F  ثم البحث </head>  والصق البرنامج النصي أدناه أعلى علامة </head> مباشرةً.

كـــCODــود - جدول المحتويات Table of Contents

<script type='text/javascript'>              
//<![CDATA[           
//*************TOC plugin           
function mbtTOC() {var mbtTOC=i=headlength=gethead=0;           
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)           
{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}           
//]]>              
</script> 

4. الآن ابحث  ]]></b:skin>  والصق كود CSS التالي أعلاه  ]]></b:skin>

الكـــــود

.mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#f5f5f5;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px;font-family:oswald,arial;display:block;width:70%}.mbtTOC ol,.mbtTOC ul{margin:0;padding:0}.mbtTOC ul{list-style:none}.mbtTOC ol li,.mbtTOC ul li{padding:15px 0 0;margin:0 0 0 30px;font-size:15px}.mbtTOC a{color:#0080ff;text-decoration:none}.mbtTOC a:hover{text-decoration:underline}.mbtTOC button{background:#f5f5f5;font-family:oswald,arial;font-size:20px;position:relative;outline:none;cursor:pointer;border:none;color:#707037;padding:0 0 0 0px}.mbtTOC button:after{المحتويات:"\f0dc";font-family:FontAwesome;position:relative;left:10px;font-size:20px}

 

5. ابحث عن <data:post.body/>، يمكن أن يكون هناك أكثر من علامة <data: post.body /> واحدة، استبدلها جميعًا بالكود أدناه.

كـــــــــود جدول المحتويات

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

6. ينتهي هنا جزء الترميز، انقر فوق "حفظ"

كيف تُظهر جدول المحتويات في منشور المدونة؟

لكي يتم تفعيل جدول المحتويات في مدونتك أوفي مقالة، قم بكتابة مقالة جديدة أو أفتح مقالة قديمة تريد وضع جدول محتويات لها ،قم بتغير وضع المقال من  وضع  الإنشاء  إلي عرض HTML  ثم ألصق الرمز أدناه بعد الفقرة الأولى أو قبل العلامة الأولى للعنوان الخاص بالمقال.

الكــــــــود

<div class="mbtTOC"> 
    <button onclick="mbtToggle()">المحتويات</button> 
    <ol id="mbtTOC"></ol> 
    </div>

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

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

الكــــــــود

<script>mbtTOC();</script>

الأسئلة الشائعة

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

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

لا يؤثر هذا الجدول علي القالب أو السرعة وهو عكس كثير من جداول المحتويات فهو خفيف الوزن ولا يعمل ألا عند الاستدعاء في المقال، وقد قمت بدمج ألأكواد وتغير الشكل ليصبح مختلف وخفيف وذو شكل احترافي.

الخلاصة

كان موضوع اليوم عن كيفية أضافه جدول المحتويات في بلوجر- Table of Contents؟ وقد حاولت أن أبقي هذا الشرح بسيطًا قدر الإمكان، كما أنني قمت بتصغير جميع الرموز التي لن تؤثر على سرعة صفحة المدونات الخاصة بك.

تعديل المقال