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

    يوجد العديد من الإضافات والعوامل التي تؤثر بشكل جيد علو مدونتك او سيو موقعك الالكتروني، ومن اهم هذه العوامل تحسين جودة المقال المقدم للقارئ والمحركات البحث المتعددة.

وعندما تقدم مقال خالي من الأخطاء و تم تنسيقها بشكل جيد كلما زادت فرصت تصدره بحركات البحث المتعددة. 

احد هذه الإضافات التي تساعد بتنسيق جيد للمقال إضافة جدول المحتويات (Table of contents) وهي اضافة تسهل على  القارئ معرفة محتوى المقال وتساعد في تحسين سيو مدونتك.

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

(toc) #title=(جدول المحتويات)

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

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

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

يؤدي جدول المحتويات المضاف على الموضوع على تحسين سيو موقعك الويب على الإنترنت مما يساعد على تحسين محركات البحث

أيضا يساعد مستخدم الإنترنت او قارئ الموضوع على معرفة اساس المقال وعلى ماذا يحتوي وما هي العناوين الفرعية للمقال.

ويساعد القارئ على التنقل بحرية وبسهوله في الموضوع ومعرفة ما يريده تحديدا من منشور المدونة، مما يؤدي إلى سهولة فهم محتوى المقالة

هل جدول المحتويات صديق لسيو مدونتك؟

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

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

التنقل بين العناوين المختلفة داخل المنشور بكل سهولة

امكانية تخصيص شكل جدول المحتويات كتحديد المسافة بين العناوين واخفغء وإظهار جدول المحتويات

وهي إضافة متجاوبة للوضع الليلي للقوالب التي تستخدم الوضع الليلي

كيفية إضافة جدل المحتويات على بلوجر

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

تركيب جدول المحتويات

توجه إلى موقع بلوجر بعد ذلك اضغط المظهر، ثم اضغط على تعديل HTML

قم بنسخ كود CSS و ضعه فوق  ]]></b:skin>

.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}
 (code-box).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}

الان نقوم بالبحث عن </body>

ونضع فوقة كود 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>(code-box)

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

الان انتهى شرح اضافة جدول المحتويات في بلوجر ولنا لقاء اخر في اضافات بلوجر بمواضيع اخرى