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

اضافة جدول محتويات الموضوع فى بلوجر - مرحبا بكم متابعي روتكس، فى هذا الموضوع سنشارك معكم اداة جديدة تستخدم فى الانتقال السريع بين محتويات الموضوع، وهذه الاداة تسمى روابط الانتقال السريع او جدول المحتويات والذى يحتوى على اقسام عناوين الموضوع، الاستخدام سهل للغاية باستخدام معرفات HTML، لمشاهدة الاداة بالتفصيل وكيف تعمل من صندوق المعاينة بالسايدبار.

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

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

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

1. اذهب الى لوحة التحكم > القالب > تحرير HTML

2. ابحث عن ]]></b:skin> ، وضع الكود التالي فوقه

/* Table of Contents (TOC) */
#btn-cm{border:1px solid #dadada;border-radius:5px;background-color:#f9f9f9}
#btn_toc{font-weight:700;cursor:pointer;margin:10px}
#btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}
#btn_toc svg{vertical-align:middle}
#toc li{cursor:pointer}
#toc{display:grid}
.back_toc{cursor:pointer;text-align:left}
:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}

3. احفظ القالب.

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

4. بعد ذلك توجه الى احد المشاركات التى تريد تركيب جدول المحتويات بها.

5. تأكد من انك فى تبويبة HTML وليس تأليف

6. قم بنسخ الكود التالى، ثم الصقه بعد الفقرة الاولى او يمكنك وضعه فى المكان الذى تريده وتخصيصه بنفسك.

<div id="btn-cm">
<div id="btn_toc" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">محتويات <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="toc">
<ol>
<li><a href="#toc_1" title="عنوان الفقرة 1">عنوان الفقرة 1</a></li>
<li><a href="#toc_2" title="عنوان الفقرة 2">عنوان الفقرة 2</a></li>
<li><a href="#toc_3" title="عنوان الفقرة 3">عنوان الفقرة 3</a></li>
<li><a href="#toc_4" title="عنوان الفقرة 4">عنوان الفقرة 4</a></li>
<li><a href="#toc_5" title="عنوان الفقرة 5">عنوان الفقرة 5</a></li>
</ol>
</div>
</div>

ملاحظة :

- أضف عنوان URL للمشاركة الخاص بك مثل https://rotkx.blogspot.com/2018/06/table-of-contents-widget.html #toc_1 وهكذا.
- يمكنك أيضًا الإضافة حتى #toc_6 وما إلى ذلك.

9. ثم أضف id="toc_1" الى اكواد عناوين الفقرات. على سبيل المثال :

<h3>عنوان فرعي 1</ h3> إلى <h3 id="toc_1">عنوان فرعي 1</ h3>
<h3>عنوان فرعي 2</ h3> إلى <h3 id="toc_2">عنوان فرعي 2</ h3>
<h3>عنوان فرعي 3</ h3> إلى <h3 id="toc_3">عنوان فرعي 3</ h3>
<h3>عنوان فرعي 4</ h3> إلى <h3 id="toc_4">عنوان فرعي 4</ h3>
<h3>عنوان فرعي 5</ h3> إلى <h3 id="toc_5">عنوان فرعي 5</ h3>

تطبق الاكواد السابقة على H1، H2، H3، H4، H5، H6.

استخدم id="toc_1" و بعدها id="toc_2" و التالى id="toc_3" ويتبع

استخدام كود التمرير المرن فى هذه الاداة

ضع الكود التالى فوق </body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>

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

معاينة مباشرة

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