إضافة فهرس جميل للمدونة

السلام عليكم ورحمة الله تعالى وبركاته

في هذا الدرس سوف أقدم لكم إضافة مهمة للمدونة و المتمثلة في صفحة "الفهرس"

فصفحة الفهرس مهمة جدا للمدونة حيث تسهل على الزائر الوصول إلى جميع مواضيع المدونة بدون عناء وفي مرة واحدة

بدون إطالة نمر إلى الشرح

أولا إذهب من لوحة التحكم في بلوجر إلى >>الصفحات>>صفحة جديدة>>ثم إضغط على "HTML"

بعدها قم بلصق هذا الكود

<style> /* CSS Sitemap ar1web */ #bp_toc {background:transparent;width:100%;color:#999;margin-top:10px;margin:0 auto;padding:5px;} .toc-header-col1 {padding:10px!important;line-height:15px;background-color:#e74c3c;width:250px;transition:all 0.3s ease-in-out;} .toc-header-col2 {padding:10px!important;line-height:15px;background-color:#6cd9dd;width:75px;transition:all 0.3s ease-in-out;} .toc-header-col3 {padding:10px!important;line-height:15px;background-color:#44cc9a;width:125px;transition:all 0.3s ease-in-out;} .toc-header-col1:hover, .toc-header-col2:hover, .toc-header-col3:hover {opacity:0.9;} .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:15px;text-transform: lowercase;text-decoration:none;color:#fff;font-family:Electrolize,ge_ss_tvbold;font-weight:400;letter-spacing:0.5px;} .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { text-decoration:none;} .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {padding:10px;font-size:89%;;transition:all 0.3s ease-in-out;} .toc-entry-col1:hover, .toc-entry-col2:hover, .toc-entry-col3:hover {background:#fff;} .toc-entry-col1:nth-child(odd), .toc-entry-col2:nth-child(odd), .toc-entry-col3:nth-child(odd) {padding:10px;font-size:89%;} .toc-entry-col1:nth-child(even), .toc-entry-col2:nth-child(even), .toc-entry-col3:nth-child(even) {padding:10px;font-size:89%;} .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{text-decoration:none;color:#666;transition:all 0.3s ease-in-out;} .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#f6af54;} span.toc-note {padding:10px;margin:10px 0;display:inline-block;background:#fff; color:#666;} #bp_toc table {width:100%;margin:0 auto;border-collapse:collapse;border-spacing:0;border-color: transparent;} #bp_toc tr:nth-child(even) {background:#fafafa} #bp_toc tr:nth-child(odd) {background:#eee} </style> <div id="bp_toc"> جاري تحميل الفهرس....</div> <script src="https://ar1web-com.googlecode.com/svn/Hm/ihussam-sitemap.js" type="text/javasc

إلى هنا نكون قد وصلنا إلى نهاية الدرس 

دمتم في رعاية الله.