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

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

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

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

يمكنك إضافة
جدول محتويات إلى مقالات ويب طويلة جدًا لتسهيل قراءتها على مستخدمي الإنترنت.
إذا كان موضوع مدونتك سهل القراءة لمستخدمي الإنترنت ، فهذا مفيد لموقع
الويب.

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

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

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

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

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

1- توجه إلى المظهر على منصة بلوجر، إضغط تعديل HTML 

2- قم بنسخ كود CSS و ضعه فوق ]]></b:skin>
مباشرة 

3- قم بنسخ كود JavaScript وضعه فوق الوسم المغلق
</body> مباشرة 

4- قبل حفظ المظهر لا تسنى التعديل في متغييرات 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 تحديد المسافة التي يجب أن تتركها عند الذهاب إلى أي

  عنوان ، وهنا نعني المسافة بين العنوان وعنوان الصفحة الذي يظهر ، وهو مفيد في

  حالة العناوين الثابتة على الموقع ، حيث يمكنك استخدام Hieght تحدد قيمة ارتفاع

  الرأس قيمة المتغير لمنع الرأس من الظهور فوق عنوان آلية الرأس.
يمثل

  متغير TocSpeed ​​الوقت الذي يستغرقه الوصول إلى أي عنوان ، ويمكنك تحديد قيمته

  بالمللي ثانية.
يسمح لك متغير TocHidden ، إذا كان صحيحًا ، بإخفاء

  العناوين في جدول المحتويات حتى يتم الضغط على زر العرض.
يحدد متغير

  TocHeader علامة الرأس التي يتم الحصول عليها من المحتوى. يمكنك إضافة المزيد ،

  لكن ضع فاصلات بينها.
يشير المتغير headersDiv إلى العنصر الذي يحتوي

  على محتوى السمة ، حيث يجب إضافة Class أو Id إلى هذا العنصر في قيمة هذا المتغير

  ، إذا كانت فئة ، نضيف نقطة أمامها. في حالة معرف نضع # قبله.


شارك هذا الموضوع:
فيس بوك
X
معجب بهذه:
إعجاب تحميل...


	
مرتبط