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

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

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

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

فوائد نشر جدول المحتويات في المدونة

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

زيادة جاذبية الزوار / القراء

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

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

المدونات تبدو أكثر جاذبية في محركات البحث

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

معاينة الاضافة

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

قم بالتسجيل الدخول إلى blogger.com باستخدام Gmail الخاص بك.
ادخل إلى قائمة > المظهر > انقر فوق تحرير HTML
بعد ذلك ، ابحث عن الرمز التالي <head/>

والصق الكود فوقع بالضبط فوقه

<style>
/* topic content */
#bwstocLink{color:#1e90ff}
.bwstoc {margin: 10px 0;background:#F0F0F0;border: 1px solid #ddd;}
.bwstoc ol, .bwstoc ul {margin: 0 20px 15px 0;padding: 0;}
.bwstoc ul {list-style: disc;}
.bwstoc ol li, .bwstoc ul li {font-size:15px;font-family:sans-serif;padding: 5px 0 0 10px;margin: 0 5px 0 10px;border-radius: 5px;counter-reset:li;list-style:decimal;color:#e46c3b;}
.bwstoc a {text-decoration: none;}
.bwstoc a:hover {text-decoration: underline;}
.bwstoc .bwstocHeader {font-weight: bold;font-size: 100%;position: relative;outline: none;border: none;padding: 5px 5px 5px 15px;margin: 5px 10px;}
.bwstoc .bwstocHeader a {text-decoration: none;cursor: pointer;}
.bwstoc .bwstocHeader a:hover {text-decoration: underline;}
</style>

ثم بنفس المكان اي فوق وسم <head/> ضع هذا السكربت

<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<!-- Blogger TOC -->
<script type='text/javascript'>
//<![CDATA[
function bwstoc() {
 var bwstoc = i = headinglength = getheading = 0;
 headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length;
 if (headinglength > 0) {
 // Hanya Tampil Jika Ditemukan Minimal 1 Heading
 for (i = 0; i < headinglength; i++) {
 getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;
 var bws_1 = getheading.replace(/[^a-z0-9]/gi," ");
 var bws_2 = bws_1.trim();
 var getHeadUri = bws_2.replace(/\s/g, "_");
 document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);
 bwstoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>";
 document.getElementById("bwstoc").innerHTML += bwstoc;
 }
 } else { document.write("<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }
}
function bwstocShow() {
    var bwstocBtn = document.getElementById('bwstoc');
 var bwstocWrapID = document.getElementById('bwstocwrap');
 var bwstocLink = document.getElementById('bwstocLink');
    if (bwstocBtn.style.display === 'none') {
        bwstocBtn.style.display = 'block';
 bwstocWrapID.style.display = 'block';
 bwstocLink.innerHTML = 'إخفاء';

    } else {
        bwstocBtn.style.display = 'none';
 bwstocWrapID.style.display = 'inline-block';
 bwstocLink.innerHTML = 'إظهار';
    }
}
//]]>
</script>
<noscript><style media='all' type='text/css'>#bwstocwrap,.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>
</b:if>

بعد ذلك قم بالبحث عن الرمز <data:post.body/> احذفه ثم استبدله بالكود الموجود اسفل.

<div id='post-toc'>
<div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>[ <a id='bwstocLink' onclick='bwstocShow()'>إظهار</a> ] المحتوى </div><ul id='bwstoc' style='display:none'/></div>
<data:post.body/>
<script>bwstoc();</script>
</div>

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

<bwstoc style='visibility:hidden'></div>

بالنسبة لرمز <data:post.body/> سوف تجد منه الكثير لذلك ابحث عن الوسم المناسب في الغالب هو التاني او التالث في بعض الاحيان هو الوحيد في القالب اتمنى ان يعجبكم هذا الشرح نلتقي غدا انشالله دمته في رعاية الله الى اللقاء.