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

مقدمة

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

طريقة تركيب الاضافة

ملاحظة : لا تنسى أخذ نسخة احتياطية للقالب

1. قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر blogger
2. إنتقل للمدونة >> ثم إلى المظهر >> ثم إضغط على تحرير  Edit HTML 
3. إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
4. بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب

قم بالبحث عن هذا الوسم

]]></b:skin> اضغط للتحديد

فوقه أي قبله قم بوضع css.كود

      
/*####Automatic TOC adeltalyanitech####*/          
.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;}
     

قم بإجراء تغييرات الألوان هذه إذا كنت تريد

• لتغيير لون خلفية مربع TOC ، قم بتحرير #FFFFE0
• لتغيير لون حدود مربع جدول المحتويات ، قم بتحرير #f7f0b8
• لتغيير لون خط نص جدول المحتويات ، قم بتحرير #707037
• لتغيير لون رابط الربط ، قم بتحرير #0080ff
• لتغيير حجم خط روابط العناوين، قم بتغيير 15px
• لتغيير حجم خط نص جدول المحتويات ، قم بتغيير 20px

الخطوة الثانية

قم بالبحث عن هذا الوسم

</head> اضغط للتحديد

فوقه أي قبله قم بوضع js.كود

<script type='text/javascript'>              
//<![CDATA[           
//******TOC plugin            
function mbtTOC() {var mbtTOC=i=headlength=gethead=0;           
headlength = document.getElementById("post-toc").getElementsByTagName("h3").length;for (i = 0; i < headlength; i++)           
{gethead = document.getElementById("post-toc").getElementsByTagName("h3")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h3")[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>

الخطوة الثالثة

ابحث عن <data: post.body/> اضغط للتحديد

واستبدله بالرمز أدناه:

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

ملاحظة: سوف تجد اثنين أو أكثر من التكرارات لهذا الرمز ، لذلك استبدل كل الوسوم بالرمز أعلاه. لن يعمل TOC Plugin إذا استبدلت <data: post.body/> مرة واحدة فقط.
الآن قم بحفظ القالب والانتقال الى المشاركات وكتابة موضوع جديد

الخطوة الرابعة

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

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

• 
  مدونة تقني

  بهذا ينتهي الدرس، أي إستفسار أترك تعليق في الأسفل أو إتصل بنا وإنشاء الله سنكون في عونكم.