14 أبريل 2015

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

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

اضافة فهرس التبويبات المنسدلة بالوان مختلفة و طريقة احترافية

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


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


  1. ادخل إلى لوحة تحكم المدونة
  2. انتقل إلى الصفحات >> قم بإنشاء صفحة جديدة
  3. انتقل من وضع تأليق إلى وضع HTML
  4. قم بنسخ الكود التالي داخل الصفحة

<div dir="ltr" style="text-align:right;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content {background-color: #fff;color: #444;font-family: Droid Arabic Kufi,Sans-serif;font-size: 13px;font-weight: 400;overflow: hidden;border-radius: 4px;box-shadow: 0 0 20px rgba(0,0,0,.1);}
.table-of-content .toc-header {text-align: right;color: #444;font-family: droid arabic kufi;font-weight: 400;font-size: 14px;background-color: #fff;margin: 0;padding: 15px;overflow: hidden;cursor: pointer;border-bottom: 1px solid #ccc;transition: initial;}
.table-of-content .toc-header:hover {background-color: #fdfdfd;}
.table-of-content .toc-header:before {content: '';width: 0;height: 0;position: relative;float:left;top: 10px;left: 10px;border: 5px solid transparent;border-color: #aaa transparent transparent;transition: all .3s ease;}
.table-of-content .toc-header.active {color: #fc4f3f;}
.table-of-content h3.toc-header.active:before {border-color: #666 transparent transparent;top: 5px;-webkit-transform: rotate(-180deg);-moz-transform: rotate(-180deg);-ms-transform: rotate(-180deg);-o-transform: rotate(-180deg);transform: rotate(-180deg);}
.table-of-content .loading {display: block;padding: 15px;text-decoration: blink;}
.table-of-content ol {margin: 0;padding: 0;list-style: none;transition: initial;}
.table-of-content li {line-height: normal!important;margin: 0!important;padding: 8px 15px 8px 8px!important;white-space: nowrap;text-align: right;overflow: hidden;background: #444359!important;transition: initial;}
.table-of-content a {color: #d9d9d9;text-decoration: none;transition: initial;}
.table-of-content a:visited {color: #a2a2a9;transition: initial;}
.table-of-content a:hover,.table-of-content a:visited:hover {color: #ffc937;text-decoration: none;transition: initial;}
.post ol li:before {display: none;}
</style>
<div class="table-of-content" id="table-of-content">
<span class="loading">... انتظر</span></div>
<script>
var toc_config = {
    url: 'http://newz-b.blogspot.com/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:left;border-radius:3px;margin-top: -24px;">جديد</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};
</script>
<script src="https://mudwnp.googlecode.com/svn/trunk/tea.js"></script>
</div>

- و اخيرا انقر فوق حفظ الصفحة
- الان يمكن معاينة الفهرس الاول عبر زر المعاينة التالي




و هناك قوالب بلوجر احيانا تكون الوانها داكنة لذلك يوجد نسخة ثانية من الفهرس بالوان داكنة لإضافته نقوم بنفس الخطوات السابقة و لكن مع تبديل الكود السابق بالكود التالي
<div dir="ltr" style="text-align:right;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content {background-color: #222;color: #ddd;font-family: Droid Arabic Kufi,Sans-serif;font-size: 13px;font-weight: 400;overflow: hidden;border-radius: 4px;box-shadow: 0 0 10px rgba(0,0,0,.1);}
.table-of-content .toc-header {text-align: right;color: #fff;font-family: inherit;font-weight: 400;font-size: 14px;background-color: #333;margin: 0;padding: 15px;overflow: hidden;cursor: pointer;border-top: 1px solid #444;border-bottom: 1px solid #222;transition: initial;}
.table-of-content .toc-header:hover {background-color: #3a3a3a;}
.table-of-content .toc-header:before {content: '';width: 0;height: 0;position: relative;float:left;top: 10px;right: 10px;border: 5px solid transparent;border-color: #aaa transparent transparent;transition: all .3s ease;}
.table-of-content .toc-header.active {background: #3a3a3a;color: #fff;}
.table-of-content .toc-header.active:before {border-color: #fff transparent transparent;top: 5px;-webkit-transform: rotate(-180deg);-moz-transform: rotate(-180deg);-ms-transform: rotate(-180deg);-o-transform: rotate(-180deg);transform: rotate(-180deg);}
.table-of-content .loading {display: block;padding: 15px;text-decoration: blink;}
.table-of-content ol {margin: 0;padding: 0;list-style: none;transition: initial;}
.table-of-content li {line-height: normal!important;margin: 0!important;padding: 8px 15px 8px 8px!important;white-space: nowrap;text-align: right;overflow: hidden;background: #222!important;transition: initial;}
.table-of-content a {color: #aaa;text-decoration: none;font-size: 86%;transition: initial;}
.table-of-content a:visited {color: #666;transition: initial;}
.table-of-content a:hover,.table-of-content a:visited:hover {color: #fff;text-decoration: none;transition: initial;}
.post ol li:before {display: none;}
</style>
<div class="table-of-content" id="table-of-content">
<span class="loading">... انتظر</span></div>
<script>
var toc_config = {
    url: 'http://newz-b.blogspot.com/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:left;border-radius:3px;margin-top: -24px;">جديد</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};
</script>
<script src="https://mudwnp.googlecode.com/svn/trunk/tea.js"></script>
</div>



 اهم الإعدادات


استبدل url: 'http://newz-b.blogspot.com/' برابط مدونتك

اي سؤال او استفسار لا تترد بوضع تعليق
مواضيع ذات صلة
اضافة فهرس التبويبات المنسدلة
4 / 5
بواسطة

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

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

    ردحذف
    الردود
    1. نعم اخي تنفع في جميع مدونات بلوجر

      حذف
  2. استفدت منكـ كثير يعطيكـ العافيه وان شالله ع طول معاكـ ..

    ردحذف
    الردود
    1. شكرا لك اخي الكريم و إن شاء الله تستفيد اكثر و اكون عند حسن ظنكون =r

      حذف
  3. شكرا لك اخي الكريم
    ولكن مافائدة الفهرس في الموقع على مستوى ترتيب جوجل؟

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

      حذف
  4. شكرا للاضافة ولكن تم التجربة برابط مدونتي وبيظهرلي كده
    كلمة انتظر ولا يظهر شيء اخر
    http://wazaef4youth.blogspot.com/p/blog-page_6.html
    تم تجربة الكود بدون تعديل المدونة اشتغل تمام
    ايه المشكلة ؟

    ردحذف
    الردود
    1. اهلا اخي صاصا
      لم يعمل في مدونتك لأن معرف المواضيع عندك يأخذ h2 و من اجل ان يعمل يجب تغييرها إلى h3 و لكن جرب الاتي
      لو لديك خبرة في هذه الامور في الكود يوجد كود جافا هذا هو https://mudwnp.googlecode.com/svn/trunk/tea.js
      انسخ الرابط و ضعه في المتصفح سوف تفتح لك صفحة فيها اكواد انسخ هذه الاكواد في المفكرة و ابحث عن h3 سوف تجدها مكررة و استبدلها بـ h2
      بعضا احفظ الملق بنفس الاسم و الامتداد و ارفعه على جوجل درايف او دروبوكس و استبدلها بالموجودة فوق في الكود و سوف يعمل معك

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

      حذف
    3. اهلا اخي الكريم
      صراحة هذا الفهرس بعد التجربة هناك مدونات لا يعمل عليها و لم اعرف السبب
      و لكن إن شاء الله اقوم بوضع شروحات عن اضافة فهرس في بلوجر بشكل احترافي

      حذف
  5. السلام عليكم أخي منير
    ممكن كيفية تغير عناصر kbd لتصبح مثل هذا الشكل http://im83.gulfup.com/SvF0Dn.png

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

      kbd {display:inline-block;border:1px solid #c4cbd5;border-radius:3px;padding:0.1em 0.5em;margin:0.2em;background-color:#fdfdfd;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;transition:all 0.6s;direction: ltr;font: 13px arial;}
      kbd:hover {background-color:#fff;border-color:#e74c3c;color:#e74c3c;}


      فوق

      ]]></b:skin>

      وبتمنى عند السؤال عن اي شيء يكون على اول موضوع في المدونة

      حذف
    2. شرف لي ان اكون اول معلق في المدونة r=

      حذف
    3. شكرا لك اخي و الشرف لنا ان تعلق في مدونتنا

      حذف
  6. روووعه يااخى شكراً ع الفهرس الاكثر من رائع

    ردحذف

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