الرئيسية / blogger / إضافة جدول محتويات المقال لمدونتك بلوجر

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

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

 

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

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

 

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

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

طريقة العمل لهذه الاضافة عن طريق كود 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://xxxxx.blogspot.com/2021/12/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>

لا تنسى الاشتراك في القائمة البريدية اعلاه على اليسار ليصلك كل جديد نقوم بنشره

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

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

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *