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

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

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

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

قبل البدء بالشرح

لماذا جدول المحتويات مهم لمدونات بلوجر

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

فوائد الحصول على جدول محتويات بلوجر

سهولة التنقل: -

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

جيد لـ سيو SEO: -

إذا كانت لديك مواضيع مدونة منظمة ، فهناك احتمال أن تضيف Google قفزة تلقائيًا للربط في مقتطف SERP الخاص بك مثل هذا.

تنظيم مشاركة المدونة الخاصة بك: -

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

التركيب

أولا

من لوحة تحكم المدونه اختر المظهر ثم تعديل أتش تى ام ال كما بالصوره

ثانيا

الان ابحث عن </body> والصق كود جدول المحتويات التالي قبلها مباشرتا كما بالصوره

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

<script type='text/javascript'>  
 var ToC =  
  "<nav role='navigation' class='table-of-contents'>" +  
   "<h2>التنقل السريع جدول المحتويات</h2>" +  
   "<ul>";  
 var newLine, el, title, link;  
 $("article h3").each(function() {  
  el = $(this);  
  title = el.text();  
  link = "#" + el.attr("id");  
  newLine =  
   "<li>" +  
    "<a href='" + link + "'>" +  
     title +  
    "</a>" +  
   "</li>";  
  ToC += newLine;  
 });  
 ToC +=  
   "</ul>" +  
  "</nav>";  
 $(".all-questions").prepend(ToC);  
 </script> 

ثالثا

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

<div dir="ltr" style="text-align: left;" trbidi="on">


اضف بعده

<article>
<div class="all-questions">

وفى نهايه كود HTML
ستجد انه ينتهى ب </div>
اضف قبلها
<article></div>

صوره توضيحيه

رابعا

ابحث فى القالب عن
]]></b:skin>

كود سى اس اس

body {  
  background: #eee;  
  padding: 20px;  
 }  
 article {  
  max-width: 50em;  
  background: white;  
  padding: 2em;  
  margin: 1em auto;  
 }  
 .table-of-contents {  
  float: right;  
  width: 40%;  
  background: #eee;  
  font-size: 0.8em;  
  padding: 1em 2em;  
  margin: 0 0 0.5em 0.5em;  
 }  
 .table-of-contents ul {  
  padding: 0;  
 }  
 .table-of-contents li {  
  margin: 0 0 0.25em 0;  
 }  
 .table-of-contents a {  
  text-decoration: none;  
 }  
 .table-of-contents a:hover,  
 .table-of-contents a:active {  
  text-decoration: underline;  
 }  
 h3:target {  
  animation: highlight 1s ease;  
 }  
 @keyframes highlight {  
  from { background: yellow; }  
  to { background: white; }  
 }  

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

HashtagsTech

هاشتاج التقنيه قوالب واضافات بلوجر وجديد الاخبار التقنيه

Facebook

Twitter

Instagram

شارك هذا الموضوع