اضافة فهرس داخلي للموضوع على شكل روابط تنقل سريعة

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

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

طريقة عمل الأداة

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

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

هكذا تبدو الأداة:

فهي تتكون من عنصرين فقط:

1. العنوان الرئيسي.
2. روابط التنقل.

اضافة الأداة لمدونتك

لاستعمال هذه الأداة على مدونة بلوجر الخاصة بك، اتبع الخطوات التالية:
1. تأكد من وجود هذا الكود على مدونتك:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'/>

إذا لم يكن موجود، قم باضافته فوق وسم <head/>

2. قم بالبحث عن الكود التالي داخل قالب المدونة: <data:post.body/>

3. أضف هذا الكود فوقه مباشرة:

<style>
#tocDiv {
width: 50%;
margin: 15px auto;
display: block;
float: left;
position: relative;
}

#tocList {
padding: 18px 25px 17px 30px;
border: 1px solid #ddd;
margin: 0;
}

.post-body h4 {
display: inline-block;
background: #fff;
padding: 0 15px;
margin: 0;
position: absolute;
top: -16px;
right: 40px;
font-size: 17px;
font-weight: 700;
z-index: 1;
}

#tocList ul {
padding: 0;
margin: 0;
}

#tocList a {
font-size: 15px;
padding: 0;
margin: 0;
}
</style>

<div id='tocDiv'>
<h4>يحتوي هذا الموضوع على:</h4>
<ul id='tocList'>
</ul>
</div>
<script>
$(document).ready(function() {

});
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$(tocList).empty();

var prevH2Item = null;
var prevH2List = null;

var index = 0;
$(".post-body h2").each(function() {

//insert an anchor to jump to, from the TOC link.
var anchor = "<a name='" + index + "'></a>";
$(this).before(anchor);
var li = "<li><a href='#" + index + "'>" + $(this).text() + "</a></li>";
if( $(this).is("h2") ){
prevH2List = $("<ul></ul>");
prevH2Item = $(li);
prevH2Item.append(prevH2List);
prevH2Item.appendTo("#tocList");
} else {
prevH2List.append(li);
}
index++;
});

});
//]]>
</script>

الأداة تم تعويمها لليسار، لجعلها الى اليمين قم بتعديل الكود المحدد بالأحمر أعلاه  بتغيير left  ب right.

وشاهد الفيديو التالي لمعرفة كيفبة اضافتها للمدونة: