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

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


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



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

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

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

التعليقات

لا توجد تعليقات حتى الآن، كن أول من يعلق

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة

اقتباس لنزار قباني

هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.

للدخول الى الصفحة اضغط هنا

المشاركات الشائعة

أحدث التعليقات

تم النسخ