إنشاء فهرس مطور




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


من مميزات  الفهرس :
1.متجاوب
2.محرك بحث
3.عرض مواضيع بشكل جميل
4.عرض مواضيع بالتسمية


شرح طريقة التركيب:
1.ضع الاكواد في صفحة جديدة>>تبويب html >> احفظ القالب .

 <div dir="rtl" style="text-align: right;" trbidi="on"><style>
/* libya-web.blogspot.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>

الى هنا انتهى درس اليوم ، اي استفسار يرجى وضعه ف تعليقات .

5 التعليقات

avatar

شكراااااا لك كنت ابحث عن فهرس

avatar

مبدع تم الاضافة اخي مشكوور

avatar

موضوع احترافي اخي

avatar

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

avatar

موضوع رائع ومفيد