إنشاء صفحة فهرس التدوينات بشكل إحترافي

السلام عليكم .... �� , اليوم معنا درس مهم جدا وهوه كيفية إنشاء صفحة فهرس التدوينات بشكل إحترافي , صفحة الفهرس من الإضافات الهامة لمدونات بلوجر هى فهرس يضم عناوين موضوعات ومشاركات المدونة فمن الضرورى إنشاء خريطة تنظم الأقسام وما تضمه من مواضيع لتمكن الزائر من الإطلاع �� على محتوى المدونة بالكامل بطريقة مرتبة ومنظمة , هذه الصفحة تحتوي على محرك بحث حسب الكلمات الدلالية ، البحث حسب التسميات ، والبحث بين احدث المواضيع و مواضيع جديدة ومن اهم ميزاته متجاوب مع جميع الشاشات . صفحة فهرس التدوينات تسهل على الزائر �� معرفة مواضيعك كاملة بضغطة زر واحدة بدل التنقل بين الروابط المعلنة في مدونتك , يمكنكم معاينة صفحة فهرس التدوينات قبل اضافتها في مدونتك , من خلال زر المعاينة �� اسفل , وكي لا نطيل عليكم سوف نبدا بروئية المميزات ⭐والمعاينة ثم ننتقل الي الشرح .


من مميزات صفحة فهرس التدوينات :
  • متجاوبة
  • تحتوي على محرك بحث متطور
  • تعرض المواضيع بشكل جميل
  • تعرض المواضيع بالتسمية
  • والكثير



شرح طريقة التركيب
اذهب الى >> الصفحات , ثم صفحة جديدة وقم بتسميتها بأي أسم تريدة
ثم اضغط على 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>

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

لا تنسا ان تكن من أعضاء المدونة من هنا , إذا واجهتك اي مشكلة لا تترد فى ترك تعليق

إرسال تعليق