أخر الاخبار

كيفية اضافه جدول المحتويات في بلوجر- Table of Contents

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

كيفية اضافه جدول المحتويات في بلوجر- Table of Contents

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

اليوم سنتعرف علي كيفية إضافة جدول المحتويات "Table of Contents" في بلوجر "Blogger"، مرحبًا بالمدونين، سأشرح في منشور المدونة هذا كيفية إضافة جدول محتويات في blogger أو مشاركة blogspot

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

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


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

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



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

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

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


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

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

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

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

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

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

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

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

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

 

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

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

  #   إليك أسباب تحسين محركات البحث بمساعدة جدول المحتويات :

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

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

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

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

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


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

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

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

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


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

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

    ملحوظة :-

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


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

      #   قم بتسجيل الدخول إلى Blogger

      1   التوجه للوحة تحكم مدونتك ثم المظهر وتعديل HTML 👇

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


      #   كيفية إضافة جدول المحتويات في Blogger

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

     الكـــCODــود👇 
    <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> 

      #   كيفية إضافة جدول المحتويات في Blogger

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

    Blogger - Table of Contents

     الكـــــود 👇 

    .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}
    
    

     

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

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

     الكـــــــــود👇  
    <div id="post-toc"><data:post.body/></div>
    

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


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

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

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

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


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

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

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

    <script>mbtTOC();</script>
    


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

    ✅ كيف يمكنني تنظيم جدول المحتويات في المقال؟

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

    ❗ هل يمكن أيقاف جدول المحتويات لمقال معين أو عدة مقالات؟

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

    🚀 هل يؤثر جدول المحتويات هذا علي القالب أو سرعة المدونة؟

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


    الخلاصة

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

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

    هذا كل شيء لهذا اليوم ، وسنعود إن شاء الله بمنشور جديد قريبًا. حتى ذلك الحين ، اعتني بنفسك واستمتع بالتدوين.

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



    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -