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

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

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

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

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

  • قم بإنشاء صفحة جديدة وسمها "فهرس المدونة"
  • قم بنسخ الكود المرفق ولصقه في قسم 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>

    أبو حسام الدين
    أبو حسام الدين
    مدون عربي مهتم بجديد تطبيقات وهواتف الأندرويد
    تعليقات