إنشاء صفحة فهرس المدونة - Summary

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

 كيفية إنشاء صفحة الفهرسة

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

إنشاء صفحة فهرس المدونة

أهمية إنشاء الفهرس

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

إنشاء صفحة الفهرس

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

 وضع أكواد الجافاسكريبت

- الدخول الى لوحة التحكم واختر قائمة 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>

معاينة الفهرس

--  يمكن معاينة فهرس المواضيع من هنا  معاينة الرابط

ملاحظة
  1. لا تنسى تغيير الرابط برابط مدونتك.
  2. الكود من موقع abduallah0

إرسال تعليق

أحدث أقدم