6 مارس 2015

مدون محترف اضافات بلوجر CSS اضافة فهرس احترافي في بلوجر

اضافة فهرس احترافي في بلوجر

كيفية إضافة فهرس يعرض المواضيع في جداول بحيث يعرض عناوين المواضيع و تاريخ الموضوع و الاقسام الخاصة بالموضوع و يمكن تنسيق الفهرس من حيث الالوان

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


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


  1. ادخل لوحة تحكم المدونة
  2. اضغط على قالب
  3. انقر على تحرير HTML

ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
/* CSS Full Sitemap */
#bp_toc {background:#3695DB;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#fff;font-family:Droid Arabic Kufi;font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.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:13px;text-decoration:none;color:#aaa;font-family:Droid Arabic Kufi;font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fff;font-family:Droid Arabic Kufi;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;font-family:Droid Arabic Kufi;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#3695DB;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-left:0.5em;}
td.toc-entry-col2 {background:#fafafa;}

التنسيق


لتغيير اللون الازرق ابحث عن #3695DB
لتغيير الخطوط ابحث Droid Arabic Kufi عن سوف تجد الكود مكرر اكثر من مرة استبدلها كلها

الان نقوم بحفظ القالب ثم نتوجه إلى صفحات ثم انشاء صفحة جديدة ثم ننتقل من وضع تأليف إلى وضع HTML و نقوم بوضع هذا الكود

<div id="bp_toc">
</div>
<script src="https://mudwnp.googlecode.com/svn/trunk/blogtoc.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

<style type="text/css">
#comments {display:none;}
</style>

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

<div id="bp_toc" style="max-height:1300px;overflow:scroll;overflow-x:auto;">
</div>
<script src="https://mudwnp.googlecode.com/svn/trunk/blogtoc.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

<style type="text/css">
#comments {display:none;}
</style>

اي سؤال او استفسار لا تترد بوضعه في تعليق

مواضيع ذات صلة
اضافة فهرس احترافي في بلوجر
4 / 5
بواسطة

هناك 18 تعليقًا :

  1. يسلمووووووووووووووووو..

    ردحذف
    الردود
    1. العفو يا غالي انرت المدونة =r

      حذف
    2. =p p= =pp==pp==pp==pp==pp==pp==pp=p=pp==pp==pp==pp==pp==pp==pp==pp=

      حذف
    3. ممكن شرح طريقة اضافة الخطوط للمدونة جزاك الله خيرا

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

      حذف
  2. أزال المؤلف هذا التعليق.

    ردحذف
    الردود
    1. يجب عليك التعديل على كود الجافاسكريبت وتغيير الكلمات التي بالعربي إلى الاجنبي وإعادة رفعه على المدونة

      حذف
  3. السلام عليكم
    موضوع رائع تم تركيبه
    وتطويره قليلا حتي يتناسب مع مدونتي أتمني الغاء نظرة
    واعطائي رأيك به

    ردحذف
  4. وعليكم السلام
    تم مشاهدته
    اعجبني التطوير وفعلًا هكذا افضل

    ردحذف
  5. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
  6. لم يعمل اخي الكريم الكود مع اني طبقت ما قولته تماما . ارجوا الرد

    ردحذف
    الردود
    1. قم باستبدال الكود في جافا سكريبت
      اتبع هذا الموضوع https://mudwnp.blogspot.com/2016/05/fix.google.code.html

      حذف
  7. غير معرف12 يونيو, 2016

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

    ردحذف
    الردود
    1. أهلًا صديقي
      عند تركيبه سوف تظهر المواضيع بشكل تلقائي
      ولكن تابع مقال حل مشكلة تلف الإضافات في الصفحة الرئيسية حتى يعمل

      حذف
  8. غير معرف13 يونيو, 2016

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

    ردحذف
    الردود
    1. يجب وضع رابط الفهرس في القائمة

      بخصوص شعار مدونتي كان ذلك من خلال برنامج فوتوشوب

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r