, اليوم معنا درس مهم جدا وهوه كيفية إنشاء صفحة فهرس التدوينات بشكل إحترافي , صفحة الفهرس من الإضافات الهامة لمدونات بلوجر هى فهرس يضم عناوين موضوعات ومشاركات المدونة فمن الضرورى إنشاء خريطة تنظم الأقسام وما تضمه من مواضيع لتمكن الزائر من الإطلاع 
على محتوى المدونة بالكامل بطريقة مرتبة ومنظمة , هذه الصفحة تحتوي على محرك بحث حسب الكلمات الدلالية ، البحث حسب التسميات ، والبحث بين احدث المواضيع و مواضيع جديدة ومن اهم ميزاته متجاوب مع جميع الشاشات . صفحة فهرس التدوينات تسهل على الزائر 
معرفة مواضيعك كاملة بضغطة زر واحدة بدل التنقل بين الروابط المعلنة في مدونتك , يمكنكم معاينة صفحة فهرس التدوينات قبل اضافتها في مدونتك , من خلال زر المعاينة 
اسفل , وكي لا نطيل عليكم سوف نبدا بروئية المميزات 
والمعاينة ثم ننتقل الي الشرح .من مميزات صفحة فهرس التدوينات :
- متجاوبة
- تحتوي على محرك بحث متطور
- تعرض المواضيع بشكل جميل
- تعرض المواضيع بالتسمية
- والكثير
اذهب الى >> الصفحات , ثم صفحة جديدة وقم بتسميتها بأي أسم تريدة
ثم اضغط على HTML , ثم احذف ما بداخلها من أكواد , وأضف الكود التالي بداخلها :
الكود
<div dir="rtl" style="text-align: right;" trbidi="on">
<style>
/* Pro7web.com CSS Sitemap */
#table-outer table{width:100%;margin:0;padding:0}
#table-outer input,#table-outer select{padding:4px;font:inherit;border:2px solid #ecf0f1;width:170px;box-sizing:border-box}
#table-outer select{cursor:pointer;outline:none}
#table-outer input:focus{outline:none}
#resultDesc{margin-bottom:10px}
#feedContainer{overflow:hidden;margin-top:20px}
#feedContainer strong{font-size:10px}
#feedContainer,#feedContainer li{padding:0;margin:0;list-style:none}
#feedContainer li{float:right;width:50%;margin-bottom:10px;position:relative;z-index:0}
#feedContainer .inner{padding:8px;margin:0 5px;position:relative;background-color:#fff;border:1px solid #f9f9f9;height:133px}
#feedContainer img{float:right;margin:0 0 0 8px;max-width:100%;border:1px solid #f9f9f9;padding:2px}
#feedContainer .toc-title{max-height:33px;overflow:hidden}
#feedContainer .toc-title:hover{text-decoration:underline}
#feedContainer .news-text{font-size:11px}
#feedNav a,#feedNav span{display:block;text-align:center;color:#fff;text-decoration:none;background-color:#444;padding:5px;width:95%;margin:0 auto;transition:all 0.3s linear}
#feedNav a,#feedNav span:hover{background-color:#333;transition:all 0.3s linear}
#feedContainer .date{display:none;position:absolute;bottom:0;left:0;background-color:transparent;color:#fff;font-size:9px;padding:3px 2px;width:35px}
#feedContainer .date .dd{font-size:9px;line-height:5px;font-weight:bold}
#feedContainer .date span{display:inline-block;line-height:5px;text-align:center;margin-right:5px}
/* libya-web.blogspot.com */
</style>
<div id="table-outer">
<table><tbody>
<tr><td><label>ترتيب المشاركات حسب</label></td><td><select id="orderFeedBy"><option selected="" value="published">مواضيع جديدة</option><option value="updated">آخر تحديث</option></select></td></tr>
<tr><td><label>أقسام </label></td><td><span id="labelSorter"><select disabled=""><option selected="">إنتظر...</option></select></span></td></tr>
<tr><td><label>البحث بواسطة الكلمات الدلالية </label></td><td><form id="postSearcher">
<input type="text" /></form>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<br />
<header id="resultDesc"></header>
<br />
<ul id="feedContainer"></ul>
<div id="feedNav">
إنتظر...</div>
<script src="https://rawgit.com/aseel90/libya-web/master/sitemap1.js" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style>
</div>
قم بنشر الصفحة ومبروووك عليك صفحة فهرس التدوينات بشكل إحترافي
المصدر
0 التعليقات