كيفية اضافة فهرس كن مدون مطور لبلوجر

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

وللتركيب حول صندوق الكتابة من وضع تأليف الى وضع HTML

ثم احذف كل ما بداخله واضف الكود التالي

<div id="bp_toc">
<script type="text/javascript" src="https://cnmu.googlecode.com/svn/trunk/cnmu-index-map.js"></script>
<script src="http://cnmu.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"> </script>
<style>
#bp_toc {
font-family: arial;
font-size: 14px;
margin-bottom: 10px;
margin-top: 28px;
text-align: right;
width: 100%;
}
#bp_toc a {text-decoration: none;}
.toc-note {
    background: #ddd ;
    border: 2px solid #BBB;
    padding: 5px 10px;
    position: relative;
    right: 2px;
    top: -13px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    font-weight: bold;
    text-shadow: 4px 4px 4px #515151; }

.toc-header-col1, .toc-header-col2, .toc-header-col3 {
    background: #ddd;
    border: 1px solid #BBB;
    color: #000;
    padding: 2px 5px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 10px; }

/*عناوين المواضيع */
.toc-header-col1 { width:58%;}
.toc-entry-col1 {
    background: #F6F6F6;
    border: 1px solid #ddd;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    padding-right: 8px; }

.toc-entry-col1:hover {
    background: #FDE3E6;
    border-color: #8A8B8B;
    transition: all 1s ease-out 0s; }
/*التاريخ*/
.toc-header-col2 {width: 11%;text-align: center; }
.toc-entry-col2 {
    background: #000;
    border: 1px solid #ddd;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    color: #fff;
    text-align: center; }
/*الأقسام*/
.toc-header-col3 {width:31%;}
.toc-entry-col3 {
    background: #9C0022;
    border: 1px solid #ddd;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    color: #fff;
    padding-right: 8px; }

.toc-entry-col3 a { color: #fff; }

.toc-entry-col3:hover {
    background: #3D5288;
    border-color: #8A8B8B;
    transition: all 1s ease-out 0s; }
</style>
</div>

أول شئ نفعله هو استبدال http://cnmu.blogspot.com برابط مدونتك
بالنسبة للتنسيق لمن يرغب بالتعديل هاذين الكودين هما نوع وحجم الخط يمكنك تغيرهما بما تشاء
font-family: arial;
font-size: 14px;
لكن طبعا كما قلت تكبير الخط قد يزيد من عرض الفهرس فإن لم تكن مساحة الموضوع لديك كبيرة قد يكون الفهرس شكله غير مضبوط

هذا هو #ddd لون خلفية جملة عدد المواضيع
وهذا هو #BBB لون الإطار
نفس الأمر في الثلاث الوان التالية الخلفية #ddd الإطار #BBB وهذا لون الخط #000 ولكنهم يخصون عناوين الأعمدة

بالنسبة لجزء
/*عناوين المواضيع */
اللونين الموجدان بالبداية هما الخلفية والإطار
ولونين النهاية المعلمان بالأزرق نفس الشئ لكن عند تمرير الماوس

جزء
/*التاريخ*/
الثلاث الوان هما الخلفية الإطار ولون الخط

جزء
/*الأقسام*/
الثلاث الوان الاولى الخلفية والإطار والخط
اللون #fff هو لون الروابط
اللونين الملعمان بالأخضر في النهاية هما الخلفية والإطار عند مرور الماوس
ملحوظة أخيرة بخصوص النسب المعلمة باللون الوردي 58% 11% 31%
هذه نسبة كل قسم من مساحة عرض الفهرس يمكنك زيادة حجم قسم او تقليلها بتغيير النسبة
لكن عند زيادة قسم يجب تقليل الآخرين بحيث يكون مجموع النسب كلها 100%

تم بحمد الله