يعد فهرس المدونة من الأشياء الأساسية التي يجب أن تكون متوفرة في جميع المدونات ويجب أن تكون في صفحة منفصلة ، ويعمل الفهرس على تبسيط وإظهار كافة الموضوعات الموجودة في مدونتك ، مما يسمح لزوار مدونتك بمشاهدة كافة الموضوعات الموجودة في المدونة.
كيفية إنشاء صفحة الفهرسة
غالبًا ما يستخدم الفهرس للبحث عن موضوع ، وقد شاهده الزائر أو قرأه منذ فترة في مدونتك ، لذلك يتم استخدام صفحة الفهرس في البحث داخل المواضيع خاصة إن كانت المدونة بها عدد لا يستهان به من المواضيع، والتي هي أفضل طريقة.
أهمية إنشاء الفهرس
قبل أن نشرح كيفية تثبيت صفحة فهرس بلوجر، دعنا نعرف أولاً فائدة هذا الفهرس لمدونة بلوجر:
- يتيح فهرس الموضوعات ثقة محركات البحث في مدونتك.
- يرتب الموضوعات والمقالات بشكل جذاب ومنتظم.
- يرتب المقالات من الاحدث الى الأقدم.
- يقلل من ارتداد الزائر داخل المواضيع .
إنشاء صفحة الفهرس
- قبل الدخول واستعمال الأكواد، يجب إنشاء صفحة جديدة وإعطائها اسما، مثلا صفحة فهرس المواضيع.
- البحث في الشبكة العنكبوتية عن أكواد نظيفة وانيقة لفهارس الموضوعات.
وضع أكواد الجافاسكريبت
- الدخول الى لوحة التحكم واختر قائمة html ، ثم وضع كود الجافاسكريبت.
- تغيير رابط الموجود في الكود برابط مدونتك.
- يمكن تغيير شكل والوان الكود بتغيير هذه الأرقام.( #FFFFFF / #666 / #222 / #E75139 ).
أكواد html
اكواد html
<div id="bp_toc"> انتظر قليلاً لتحميل الفهرس ...</div>
اكواد CSS
أكواد css #bp_toc { margin-bottom: 10px;margin-top: 28px; text-align: right;width: 100%;} #bp_toc a {text-decoration: none;} .toc-note { padding: 5px 10px; position: relative; top: -13px; } .toc-header-col1, .toc-header-col2, .toc-header-col3 { background: #eee; border: 1px solid #ddd; color: #666; padding: 2px 5px; font-weight: bold;} /*------عناوين المواضيع------*/ .toc-header-col1 { width:58%;} .toc-entry-col1 { background: #FFFFFF; border: 1px solid #ddd; padding-right: 8px; line-height: 30px; font-size: 14px;} .toc-entry-col1 a { color: #E75139;} /*------التاريخ------*/ .toc-header-col2 {width: 11%;text-align: center; } .toc-entry-col2 { background: #222;border: 1px solid #111; color: #fff; text-align: center;font-size: 14px;} /*------الأقسام-------*/ .toc-header-col3 {width:31%;} .toc-entry-col3 {background: #E75139; border: 1px solid #B43A27 color: #fff; padding-right: 8px; font-size: 14px;} .toc-entry-col3 a { color: #fff; } .post-header,.post-title.entry-title,.bvd,#menu2 {display: none;} .post-body {border-bottom: 20px ridge #E4E4E4;}
اكواد javascript
اكواد js
<script src="https://cdn.rawgit.com/techandinv/index/master/Arabic.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script>
معاينة الفهرس
ملاحظة
- لا تنسى تغيير الرابط برابط مدونتك.
- الكود من موقع abduallah0