اضافة جدول محتويات التدوينة لمدونات بلوجر اهلا وسهلا بكم زوار مدونة بلوجر ماستر اليوم نقدم لكم اضافة لمدونات بلوجر وهي اضافة جدول المحتويات للموضوع ، وهذه الاضافة شبيه الي حد ما الي الاضافة المستخدمه في الموسوعه الحره ويكبيديا.
تعتبر هذه الاضافة اضافة مهمه من عدة نواحي فهي مفيدة للزائر في حال كان الموضوع طويل ويبحث عن جزء معين في المقاله ، فمن اضافة جدول المحتويات للمقاله يمكن للزائر التنقل الي الجزء المراد البحث عنه ، وايضا تعتبر اضافة مهمه لدي محرك البحث قوقل فيتم عرض هذه الاقسام اسفل عنوان التدوينة بحيث تجذب الزائر وتعطيه شعور الثقه في مقالتك.
و بشكل عام تستخدم اداة جدول المحتويات بشكل عام فى مدونات الووردبريس، ولكن ماذا لو هذه المرة تم استخدامها على بلوجر لإنشاء جدول محتويات الموضوع، ربما سوف يكون اكثر جاذبية.
طريقة العمل لهذه الاضافة عن طريق كود Html وكود css وايضا كود JavaScript للتنقل داخل المحتوى.
اضافة جدول محتويات التدوينة لمدونات بلوجر
1. اذهب الى لوحة التحكم > القالب > تحرير HTML
2. ابحث عن ]]></b:skin> ، وضع الكود التالي فوقه .
#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://kitchen-codes.blogspot.com/2020/03/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(){
$("a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
});
</script>
تعليقات: 0