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

أبو حسام الدين

اخر تحديث :

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

مميزات كود فهرس المدونة

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

طريقة التركيب

قم بإنشاء صفحة جديدة وسمها "فهرس المدونة"
قم بنسخ الكود المرفق ولصقه في قسم HTML للصفحة التي قمت بإنشائها
قم بإستبدال الرابط الملون بالأزرق برابط موقعك

نشر المشاركة ومن المستحسن تثبيتها في الجزء المخصص لصفحات الموقع أو المدونة

     <style type="text/css">
    #bp_toc {
      border: 0px solid #000000; 
      background: #ffffff;
      padding: 5px;
      width:300px;
      margin-top:10px;
    }
    .toc-header-col1, .toc-header-col2, .toc-header-col3 {
     text-align: center;
     background: #E6E6E6;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: inset 2px 2px 5px 5px #CCCCCC;
            
            box-shadow: inset 2px 2px 5px 5px #CCCCCC;
      color: #000000;
      padding-left: 2px;
      width:150px;
    }
    .toc-header-col2 {
      width:75px;
    }
    .toc-header-col3 {
      width:100px;
    }
    .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
      font-size:80%;
      text-decoration:none;
    }
    .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
      font-size:70%;
      text-decoration:underline;
    }
    .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
      padding-left: 5px;
      font-size:70%;
    border: 2px solid white !important;
    -webkit-border-radius: 10px;
    border-radius: 10px;
     background: #F6F6F6;
     white-space:nowrap;
    }
    </style>
    <br />
    <div id="bp_toc">
    ..إنتظر قليلا لتحميل الفهرس..</div>
    <script src="https://cdn.rawgit.com/mouradiyat/mouradiyat/f0d62498/TOC.js" type="text/javascript"></script>
    <script src="http://www.Yourwebsite.com/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script></div>
    <a href="http://www.ju3ba.com/" rel="dofollow" target="_blank"><span style="color: #999999;"><span style="font-size: xx-small;">get this widget</span></span></a>&nbsp;
    </div>