اضافة فهرس التدوينات بشكل احترافى جدا

اضافة فهرس التدوينات بشكل احترافى جدا 

بسم الل هارحمن الرحيم

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

المعاينة

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

اضافة الفهرس الى مدونتك

قم بالذهاب الى الصفحات و من ثم انشاء صفحة جديدة و قم بسميتها " فهرس التدوينات " و بعد ذلك قم بالذهاب الى وضع ال HTML و قم بلصق هذا الكود به و فى الأخير قم بنشر الصفحة و سوف تجد النتيجة ان شاء الله.

<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#bp_toc {
margin-bottom: 10px;margin-top: 28px;
text-align: right;width: 100%;}
#bp_toc a {text-decoration: none;}
.toc-note {padding: 5px 10px;
position: relative;top: -13px;
}.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #eee;border: 1px solid #ddd;
color: #006BFF;padding: 2px 5px;
font-weight: bold;}
.toc-header-col1 { width:50%;}
.toc-entry-col1 {
background: #FFFFFF;border: 1px solid #ddd;
padding-right: 8px;line-height: 30px;font-size: 14px;}
.toc-entry-col1 a {color: #018EC5;
}
.toc-header-col2 {width: 11%;text-align: center; }
.toc-entry-col2 {
background: #222;
border: 1px solid #111;
color: #fff;text-align: center;font-size: 14px;}
.toc-header-col3 {width:39%;}
.toc-entry-col3 {
background: #018EC5;
border: 1px solid #0086B7;color: #fff;
padding-right: 8px;
font-size: 14px;}
.toc-entry-col3 a { color: #fff; }.post-header,.post-title.entry-title,.bvd,#menu2{display: none;}
.post-body {border-bottom: 20px ridge #E4E4E4;}</style>
<div id="bp_toc">
..إنتظر قليلا لتحميل الفهرس..</div>
<script src="http://yourjavascript.com/7710117410/blogtoc-orig.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script>
</div>

لا تقم بتغيير أى شئ فى الكود فهو يعمل أتوماتيكيا دون تدخل و اذا أردت تغيير الألوان فبالطبع يمكنكم عن طريق التغيير فى أكواد ال CSS  الخاص بالفهرس.

.

.

.

.

و فى الختام أتمنى أنتظر دعما منكم لمدونة سملرات المعلوماتية عن طريق كتابة تعليقات فى المواضيع و متابعتنا على الفيس بوك عبرالرابط التالى ( صفحة سمارت للمعلوميات على الفيس بوك ).