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

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

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

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

<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/' برابط مدونتك

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

201