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

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

جدول المحتويات ، هو جدول يتم وضعه لفهرسة عناوين المقالة ليتم فهرسة هذه العناوين لمعرفة محتوى المقالة ولتسمح للزائر بالتنقل بسهولة بين عناوين المقالة

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

الفائدة الفعلية لجدول المحتويات هو التنسيق ، تنسيق المقال هو عامل اساسي من عوامل السيو مما يساعد في ظهور المقالة بمحركات البحث 

مما يتألف جدول المحتويات ؟

يتألف جدول المحتويات من اربعة أكواد وهي كود CSS ويوضع في وسم  skin في قالب بلوجر ، والكود الثاني هو عبارة عن سكربت يسمح بي التنقل بين العناوين بي دينامكية ويوضع هذا الكود فوق وسم body الموجود اسفل القالب 

اما الكود الثالث يوضع في المقالة وفي هذا الكود يتم وضع عناوين المقالة ورابط المقالة لكل عنوان ،  والكود الرابع يوضع في وسم h2 لكل عنوان وضع في الكود الثالث وسنتعلم بالفديو كيفية تركيب هذه الاضافة 

مشاكل كود المحتويات 

الكثير من الاشخاص لا يعرف كيفية وضع هذه  الاضافة والسبب ان كود  السكريبت عبارة عن كودين الكود الاول هو كود google Ajax وهو كود من سطر واحد  ، وهو كود موجود بكل قالب وعند وضع الاضافة يصبح الكود موجود مرتين  يجب حذف واحد من هذه  الاكواد  بحال واجهت مشاكل مع الاضافة 

</b:skin> 

كود CSS

/* Table of Contents (TOC) */

#btn-cm{border:1px solid #dadada;border-radius:5px;background-color:#f9f9f9}

#btn_toc{font-weight:700;cursor:pointer;margin:10px}

#btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}

#btn_toc svg{vertical-align:middle}

#toc li{cursor:pointer}

#toc{display:grid}

.back_toc{cursor:pointer;text-align:left}

:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}  

</body>

كود جافا سكربت

بحال واجهت مشكلة بالقالب احذف اول سطر باللون الاحمر

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

// Add smooth scrolling to all links

$("a").on('click', function(event) {

// Make sure this.hash has a value before overriding default behavior

if (this.hash !== "") {

// Prevent default anchor click behavior

event.preventDefault();

// Store hash

var hash = this.hash;

// Using jQuery's animate() method to add smooth page scroll

// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area

$('html, body').animate({

scrollTop: $(hash).offset().top

}, 800, function(){

// Add hash (#) to URL when done scrolling (default click behavior)

window.location.hash = hash;

});

} // End if

});

});

</script>

كود جدول المحتويات داخل الموضوع

<div id="btn-cm">

<div id="btn_toc" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0"> محتوى المقالة<svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>

<div id="toc">

<ol>

<li><a href="#toc_1" title="عنوان الفقرة 1">عنوان الفقرة 1</a></li>

<li><a href="#toc_2" title="عنوان الفقرة 2">عنوان الفقرة 2</a></li>

<li><a href="#toc_3" title="عنوان الفقرة 3">عنوان الفقرة 3</a></li>

<li><a href="#toc_4" title="عنوان الفقرة 4">عنوان الفقرة 4</a></li>

<li><a href="#toc_5" title="عنوان الفقرة 5">عنوان الفقرة 5</a></li>

</ol>

</div>

</div> 

كود العناوين داخل الموصوع

id="toc_1"

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