إضافة جدول المحتويات تلقائيًّا داخل مواضيع مدونة بلوجر

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

يعتبر شريط التنقل "Table of Contents" لا غني عنه كونه يساعد زوار موقعك للتنقل بسلاسة داخل المقال. حيث يعتبر إشارة مرجعية لفقرات محددة، فقط تخيل... إذا كان الكتاب لا يحتوي على فهرس، فهل من السهل على القارئ أن يجد موضوع معين يود قراءته ؟.

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

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

مميزات جدول المحتويات

ننصح باستخدام إضافة جدول المحتويات في مدونتك علي بلوجر ليس فقط لأنه يسمح للقارئ بالعثور على المعلومات والتنقل في المستند بحرية لكن هناك العديد من الميزات التي سنتعرف عليها في السطور الآتية:

• يعطي القراء لمحة عامة عن المقال.
• تنقل سلس وسريع عند الضغط علي العنوان.
• أيقونة للإشارة إلى الفقرة التي سيتم قراءتها.
• تصميم خفيف وراقي متجاوب تماما.
• زر إظهار/إخفاء محتوي الجدول.
• يعمل علي جميع قوالب بلوجر.

خطوات اضافة جدول المحتويات

1. قم بالدخول إلى لوحة تحكم بلوجر. 
2. اذهب إلى المظهر على، إضغط تعديل HTML.
3. قم بنسخ كود CSS واضافتة فوق ]]></b:skin>.
4. قم بنسخ كود JavaScript وضعه أعلي </body>.

قبل حفظ المظهر لا تسنى التعديل في متغييرات JavaScript المشار إليها في الشرح بالاسفل بما يناسبك

أكواد CSS جدول المحتويات.

.mhtoc *{box-sizing: border-box;}.mhtoc .mtochead,.mhtoc .mtoclist{display:flex;padding:8px 10px}
.mhtoc .mtoclist ul,.mhtoc .mtoclist ul li{padding:0;margin:0;background-color:transparent}@font-face{font-family:toc-font;src:url('https://cdn.jsdelivr.net/gh/hamianemohssine/7amian/font-icons/tableofcontenticons.woff2')}
.mhtoc{display:block;width:100%;height:auto;text-align:right;direction:rtl;overflow:hidden;border-radius:3px;user-select:none;background-color:#cccccc20;border:1px solid #aaaaaa60;margin:0 0 10px}
.mhtoc .mtochead{flex-direction:row;justify-content:space-between;align-items:center;width:100%;border-bottom:1px solid #aaaaaa60;cursor:pointer}
.mhtoc .mtochead:after{content:"إخفاء";transition:transform .3s ease-out;padding:0 10px;border:1px solid #aaaaaa50;border-radius:3px}
.mhtoc .mtocon{border:none}
.mhtoc .mtocon:after{content:"إظهار"}
.mhtoc .mtoctitle{display:flex;flex-direction:row;align-items:center;column-gap:6px;line-height:0}
.mhtoc .mtoctitle:before{content:"\f0cb";font-family:toc-font}.mhtoc .mtoclist ul{counter-reset:section;list-style-type:none}.mhtoc .mtoclist ul li{list-style:none;line-height:1.8}.mhtoc .mtoclist ul li:before{counter-increment:section;content:counters(section, ".") ".";margin:0 0 0 5px}.mhtoc .mtoclist ul li>ul{margin:0 30px 0 0}.mhtoc .mtoclist a{text-decoration:none;color:inherit}@keyframes ichara{0%,100%{transform:translateY(0) scaleX(1)}25%{transform:translateY(10px) scaleX(.5)}50%{transform:translateY(-10px) scaleX(1)}}
.tocmatch:after{display:inline-block;content:"\e800";font-family:toc-font;animation:.5s linear infinite ichara;margin:0 10px}

أكواد JavaScript جدول المحتويات.

<script>
//<![CDATA[
!function(){
	var TocMarginTop = 75;
	var TocSpeed = 800;
	var TocHidden = false;
	var Tocheader = "h1,h2,h3,h4";
    var headersDiv = ".post-body";
$("#Blog1 "+ headersDiv).each(function(){var t=$("<div class='mhtoc'><div class='mtochead'><div class='mtoctitle'>جدول المحتويات</div></div><div class='mtoclist'></div></div>"),a=$(this),i=a.find(Tocheader);if(i.length){var d=$("<ul></ul>");for(let e=0;e<i.length;e++){var l=i[e];d.append("<li data-head='"+$(l).prop("tagName").substring(1,2)+"' ><a href='#xxtoc"+e+"'>"+$(l).text()+"</a></li>"),$(l).attr("id","xxtoc"+e)}var n=d.find("li");for(let o=0;o<n.length-1;o++){var s=n.eq(o),c=n.eq(o+1);if(s.data("head")<c.data("head")){s.append("<ul class='inside'></ul>");for(var f=o+1;f<n.length;f++){var h=n.eq(f);s.data("head")<h.data("head")&&s.find("ul").append($(h))}}}t.find(".mtoclist").append(d),t.find(".mtochead").click(function(){var a=$(this);t.find(".mtoclist").slideToggle(300,"swing",function(){a.toggleClass("mtocon")})}),t.find(".mtoclist a").each(function(){var t=$(this);t.click(function(a){a.preventDefault();var i=$(t.attr("href")),d=i.offset().top;$("html,body").animate({scrollTop:d-TocMarginTop},TocSpeed,"swing"),i.addClass("tocmatch"),setTimeout(function(){i.removeClass("tocmatch")},4e3)})}),t.find(".mtoclist ul li"),TocHidden&&(t.find(".mtoclist").css("display","none"),t.find(".mtochead").addClass("mtocon")),a.prepend(t)}});
}()
//]]>
</script>

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

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

قيمة المتغير: TocMarginTop تسمح لك بتحديد المسافة التي يجب تركها عند التوجه للعنوان، ونقصد هنا المسافة بين العنوان ورأس الصفحة الظاهر وهي مفيدة في حالة وجود Header ثابت في مدونتك. يمكنك تحديد قيمة المتغير بقيمة ارتفاع Hieght Header لتفادي ظهور Header فوق العنوان الذي تم التوجه إليه.

قيمة المتغير: TocSpeed قيمة الوقت المستغرق للتوجه الى اي عنوان ويمكنك تحديد القيمة بالميلي ثانية.

قيمة المتغير: TocHidden إذا كانت قيمته true فهو يسمح لك بإخفاء العناوين في جدول المحتويات حتى يتم الضغط على زر إظهار.

قيمة المتغير: TocHeader يفيد وسوم العناوين التي سيتم استهدافها للجلب من داخل المحتوى يمكنك إضافة المزيد لكن ضع بينها فواصل.

قيمة المتغير: headersDiv تشير إلى العنصر الذي يحتوي على محتوى الموضوع حيث يجب إضافة Class او Id هذا العنصر في قيمة هذا المتغير وفي حالة كانت class نضع قبلها نقطة . وفي حالة كانت Id نضع قبلها #.

المصدر:
مدونة حميان

لا يدعم هذا الموقع انتهاك حقوق الطبع والنشر. نحن نحترم جهود كل مدون ونشارك فقط المحتوى المتاح مجاناً عبر الإنترنت | إذا وجدت مواد محمية بحقوق الطبع والنشر موجودة على موقعنا وتريد إزالتها فأتصل بنا لإزالتها في غضون 24 ساعة