اضف الى موقعك جدول المواضيع بشكل جديد و بسيط و متجاوب على منصة بلوجر

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

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

لتثبيث هذه الاضافة كل ماعليك هو ان تضع هذا الكود css فوق وسم </head> و اضغط على حفظ انتهينا من تخصيص القالب الان لنذهب الى التدوينة.

<style type='text/css'>
/* CSS Table of Contents */
#light-toc{background:#f5f5f5;border-radius:3px;padding:10px 20px}
#toc_list{font-weight:700;cursor:pointer;margin:10px 0}
#toc_list:focus,#toc li:focus,.back_tocontent:focus{outline:none}
#toc_list svg{vertical-align:middle}
#toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em}
#toc ol li:before{left:-2em}
#toc li a{color:#222}
#toc li a:hover{color:#1e90ff}
#toc{display:grid}
.back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s}
.back_tocontent:hover{background:#2d3436;color:#fff}
:target::before{content:'';display:block;height:40px;margin-top:-40px;visibility:hidden}
</style>

اذهب الى المشاركات ثم مشاركة جديدة و حول من وضع تأليف الى وضع html و ضع الكود الذي سوف تجده في الاسفل
الان سوف تجد خمسة عناوين في الاول يمكنك حذف سطر او يمكنك زيادته فالامر عائد عليكع عنداضافة سطر اضافي يجب ان تضع له رقم محدد في الكود يوجد من رقم 1 الى رقم 5 يمكنك اضافة الارقام 6 7 8 9.

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

الان عند وضع كود html في المشاركة سوف تجد لكل سطر لذيه معرف خاص و هو toc_1 و toc_2 و toc_3 و toc_4 و toc_5 سوف تجد نفس هذه المعرفات موجودة على اسفل الكود.
اذن في السطر الاول ضع عنوان الفقرة و اذهب الى نفس المعرف اضف نفس عنوان الفقرة و اضف النص الذي تريد كتابته ، ثم كرر نفس العملية في السطر التاني اي معرف toc_2 ضع به عنوان الفقرة ثم اذهب الى نفس المعرف و ضع نفس عنوان الفقرة و نص الدي تريد كتابته.

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

تحميل الملف