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

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

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


ربما تكون قد كتبت مقال مدونة من ألفين أو ثلاثة آلاف كلمة ، وإذا لم تقم بي إضافة جدول المحتويات في مدونة بلوجر الخاصة بك ، فستكون تجربة المستخدم الخاصة بك سيئة.

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

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

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

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

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

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

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

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

على سبيل المثال ، عندما تزور ويكيبيديا ، تجد جدول محتويات حول أي موضوع / مقال تقرأه ، صحيح!

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

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

أليس من السهل علينا تصفح المقال والانتقال مباشرة إلى تلك الفقرة أو النقطة المعينة؟

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

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

نعم ، يمكن أن يساعد جدول المحتويات في تحسين محركات البحث أيضًا.

فيما يلي بعض الأسباب التي تجعل تحسين الموقع لمحركات البحث يمكنه اضافة جدول محتويات بلوجر :

1) - عند كتابة محتويات طويلة ، أضف جدول محتويات. يتم تقسيم المحتويات الخاصة بك إلى أقسام فرعية لكل منها جوانب مختلفة حول نفس الموضوع.

لذلك ، مع المقال الأطول ، من المحتمل أن تحتل مقالتك مرتبة أعلى في محركات البحث وتعتبر Google المحتويات الأطول كعامل ترتيب أيضًا.

2) - يزيد من نسبة النقر إلى الظهور لموقعك ، أو CTR ، حيث يعرض Google رابط "الانتقال إلى القسم" الذي تم الزحف إليه من جدول محتويات مقالاتك ويعرض للمستخدمين النتيجة الأكثر صلة.

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

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

الخطوة 1. قم بتسجيل الدخول إلى مدونة Blogger الخاصة بك ، وحدد الموضوع ، وانقر فوق تحرير HTML.

الخطوة 2. ابحث عن علامة </head> والصق الكود الموجود أدناه أعلى العلامة مباشرةً.

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>      
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>   
<script type='text/javascript'>       
//<![CDATA[      
//*************TOC plugin by nur4tech.com      
function nurTOC() {var nurTOC=i=headlength=gethead=0;      
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)      
{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);nurTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("nurTOC").innerHTML += nurTOC;}}function nurToggle() {var nur = document.getElementById('nurTOC');if (nur .style.display === 'none') {nur .style.display = 'block';} else {nur .style.display = 'none';}}      
//]]>       
</script>

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

الخطوة الثالثة. الآن ، ابحث عن علامة]]> </ b: skin> والصق رمز CSS أدناه أعلى العلامة مباشرةً.

.nurTOC{border:5px solid #90949c;box-shadow:1px 1px 0 #ccc; background-color:#f5f6f7; color:#777; line-height:1.4em; margin:30px auto; padding:20px 30px 20px 10px;display: block; width: 80%;}    
.nurTOC ol,.nurTOC ul {margin:0;padding:0;}      
.nurTOC ul {list-style:none;}      
.nurTOC ol li,.nurTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;}      
.nurTOC a{color:#225180;text-decoration:none;}      
.nurTOC a:hover{text-decoration:underline; }     
.nurTOC button{background:none;font-size:28px;   
position:relative; outline:none;cursor:pointer;border:none; color:#666;padding:0 0 0 15px; margin-bottom: 20px;}      
.nurTOC button:after{content: "\2228"; font-family:'cairo';position:relative; right:10px;font-size:14px; bottom:3px;}

الخطوة 4. بعد ذلك ، ابحث عن علامة النص <data: post.body /> واستبدلها بالرمز أدناه.

<div id="post-toc"><data:post.body/></div>

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

الخطوة 5. أخيرًا ، انقر فوق "حفظ" لحفظ إعداداتك.

أتمنى أن تكون قد أضفت جميع الأكواد النصية والرموز بنجاح.

كيفية إظهار جدول المحتويات في منشورات مدونة بلوجر

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

لعرض جدول المحتويات في مقالات المدونة الخاصة بك ، عند كتابة مقال مدونة جديد ، قم بالتبديل إلى وضع HTML والصق الرمز أدناه مباشرةً بعد الفقرة الأولى ، قبل أن يبدأ العنوان الأول ، أو في أي مكان آخر تختاره.

<div class="nurTOC">    
<button onclick="nurToggle()">المحتويات</button>    
<ol id="nurTOC"></ol>    
</div>

إظهار جدول المحتويات


كيفية إظهار جدول المحتويات في منشورات مدونة بلوجر

ملاحظة: يمكنك تغيير كلمة المحتويات بأي كلمات أخرى تريدها ، وإذا كانت العناوين تحتوي بالفعل على أرقام في بداية العناوين ، فاستبدل ol بـ ul.

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

عند الانتهاء من كتابة مقال المدونة الخاص بك بعد إضافة الكود أعلاه.

لذلك ، حان الوقت لتنشيط المكون الإضافي "جدول المحتويات" لإنشاء جدول المحتويات تلقائيًا عند تحميل صفحتك.

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

<script>nurTOC();</script>

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

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

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

انتقل الآن إلى المقالة التي أضفت إليها جدول المحتويات وشاهد النتيجة.

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

الآن عند النقر فوق أي عنوان في الجدول ، سينقلك مباشرةً إليه ، ولكن العنوان سينزل بطريقة غير سلسلة.

لجعل التمرير أكثر سلاسة ، أضف الكود التالي ، ابحث عن العلامة </body> وأضف الكود أعلى العلامة </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>
بعد إضافة هذا الرمز ، ارجع إلى المقال وشاهد كيف يتم تنزيله بطريقة سلسة وجميلة.

أتمنى أن تكون قد أضفت جميع النصوص البرمجية والأكواد وأن تمت إضافة أداة جدول المحتويات لمدونة بلوجر بنجاح.

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



    وضع القراءة :
    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -