شرح إنشاء جدول المحتويات التلقائي لبلوجر شبيه الووردبرس حصرياً 2019

2

شرح إنشاء جدول المحتويات التلقائي لبلوجر

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

إقرأ ايضا : اضافة جدول Table إلى مشاركة على بلوجر بأكواد HTML و CSS

شرح إنشاء جدول المحتويات التلقائي لبلوجر ،ما هو جدول المحتويات أو TOC؟

في مواقع الويب ، يعد جدول المحتويات الذي يتم اختصاره كـ TOC أو ToC ، عبارة عن قائمة ارتباطات ، عادةً ما توجد على صفحة ويب يتم وضعها مباشرةً بعد الفقرة الأولى. يأخذك كل رابط  داخل جدول المحتويات إلى عنوان معين من المقال.
يوفر HTML TOC طريقة سريعة للانتقال إلى القسم المطلوب من الصفحة. وعادة ما يتضمن  (العناوين والعناوين الفرعية).

ماهى اضافة TOC Plugin؟

تعد TOC plugin الذي طورته MBT حلاً تلقائيًا للطريقة الشاقة المتمثلة في إنشاء جدول محتويات يدويًا لكل صفحة ويب. تقوم هذه الاضافه تلقائيًا بإنشاء جدول محتويات سهل الاستخدام للمقال الطويل بمدونتك والمتشعب العناوين ليسهل الوصول لكل فقره به. تم برمجتها بأكواد الــ  JavaScript الخفيفة والتى لاتؤثر على سرعة مدونتك نهائيا. يتم بسهولة تتبع جدول المحتويات الذي تم إنشاؤه باستخدام البرنامج المساعد TOC وفهرسته بواسطة روبوتات البحث لجوجل وخلافه.
شاهد كيف أن Google قامت بفهرسة جدول المحتوى ( الروابط للعناوين ) ولم تكتفى بذلك فحسب ، بل أضافت أيضًا علامة “الانتقال إلى” لتحديد أنها رابط ينتقل إلى قسم معين… شاهد الصوره المنقوله

شرح إنشاء جدول المحتويات التلقائي لبلوجر شبيه الووردبرس حصرياً 2019

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

 مميزات TOC Plugin:

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

كيفية تثبيت الإضافه TOC Plugin فى مدونات بلوجر:

تسجيل الدخول في بلوجر> قالب Blogger > Template
النسخ الاحتياطي للقالب الخاص بك
انقر على “Edit HTML
قم بوضع الكود التالي أعلا أو فوق الوسم </head> مباشرة
<script type='text/javascript'> //<![CDATA[ //*************TOC plugin by MyBloggerTricks.com 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>

ملاحظه مهمه:-

علامة العنوان الرئيسية في المدونة هي H2 ولكن إذا كنت تقوم بتحديد علامة العنوان الفرعي في محرر المدونة ثم العلامة الافتراضية ستكون H3. إذا كنت تستخدم علامة العنوان الفرعي كعنوان رئيسي في مشاركات مدونتك، فيرجى استبدال h2 ب h3 ثلاث مرات في الشفرة أعلاه. لن تعمل TOC plugin إذا كانت علامة العنوان غير صحيحة.
قم بالبحث داخل قالب مدونتك عن الوسم ]]></b:skin> ثم أعلاه أو فوقه مباشرة ضع كود css التالى :-
/*####Automatic TOC Plugin by MyBloggerTricks####*/ .mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;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:#FFFFE0; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:#707037;padding:0 0 0 15px;} .mbtTOC button:after{content: "f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

ابحث عن الوسم <data:post.body/> داخل القالب وستجده مره أو مرتين داخل قالب مدونتك استبدله بالتالى :-

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

احفظ ماقمت به

واذا اردت أن تغير فى شكل الوان الخلفيه او الوان الخطوط ماعليك سوى تغيير اكواد الالوان ومسمياتها كالتالى :-
كود اللون #FFFFE0 لتغيير خلفية صندوق المحتوى .
كود اللون #f7f0b8 لتغيير لون اطار الصندوق
كود اللون #707037 لتغيير لون نص كلمة Content.
كود اللون #0080ff لتغيير اللون الذى يظهر حين وضع مؤشر الماوس على كلام الورابط تحت كلمة Content.
لتغيير حجم نص المحتوى يمكنك تغيير الرقم 15px والتحكم به بالزياده او النقصان.
لتغيير حجم كلمة Content يمكنك تغيير الرقم 20px والتحكم به بالزياده أو النقصان.

شرح إنشاء جدول المحتويات التلقائي لبلوجر ،إظهار جدول المحتويات تلقائيًا في منشورات المدونة:-

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

<div class="mbtTOC"> <button onclick="mbtToggle()">Contents</button> <ol id="mbtTOC"></ol> </div>

ومن خلال وضع HTML للمقاله ضع الكود بعد الفقره وقبل العنوان الرئيسى لكى يظهر مابعده ….شاهد الصوره

شرح إنشاء جدول المحتويات التلقائي لبلوجر شبيه الووردبرس حصرياً 2019

الخطوه الثانيه
قم بنسخ الكود التالى وضعه فى آخر صفحة المقال فى وضع HTML كما فى الصوره التاليه

<script>mbtTOC();</script>
شرح إنشاء جدول المحتويات التلقائي لبلوجر شبيه الووردبرس حصرياً 2019

عيوب الاضافه:-

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

تعليق
  1. omar sallam يقول

    لم تعمل معي جيدا رعم اتباعي الخطوات تماما

    1. aldewaghry يقول

      اخى الكريم
      لابد ان تتاكد من العناوين بالمقاله هل هى تحمل الوسم h2ام h3
      بعد تركيب الاضافه والانتهاء منها جرب وضع الكودين الاخيرين بمقالتك فى وضع html ومن ثم اختر عنوان واحد فقط وضع علية الوسم h2وجرب اذا لم تعمل جرب ان تضع علية الوسم h3 وستعمل معك
      انا مجربها وتعمل 100%
      جرب وحاول وانا منتظر ردك

اترك تعليق

يرجي التسجيل لترك تعليقك

شكرا للتعليق

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More