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

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

الخط




    مقدمه:-

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

    ما هو جدول المحتويات أو TOC؟

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

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

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


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

     مميزات 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 للمقاله ضع الكود بعد الفقره وقبل العنوان الرئيسى لكى يظهر مابعده ....شاهد الصوره


    الخطوه الثانيه
    قم بنسخ الكود التالى وضعه فى آخر صفحة المقال فى وضع HTML كما فى الصوره التاليه
    <script>mbtTOC();</script>


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

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

    إرسال تعليق

    نموذج الاتصال
    الاسمبريد إلكترونيرسالة