الفهرس المبوب بألوانك المفضلة

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

الفهرس عندما يعرض في صفحة كاملة 

الفهرس عندما يعرض في صفحة بمقاس صغير

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

<style>
/* cnmu.blogspot.com style Tabbed Layout TOC */

#tabbed-toc {
  background-color: #004DAC;
  border: 5px solid #1E78DF;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  color: #333333;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

#tabbed-toc .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 12px/normal Droid Arabic Kufi;
  color:white;
}

#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}

#tabbed-toc .toc-tabs {
  width:20%;
  float:right;
}

#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 12px/30px Droid Arabic Kufi;
  height:30px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#fff;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
}

#tabbed-toc .toc-tabs li a:hover {
  background-color:#1E78DF;
  color:#fff;
}

#tabbed-toc .toc-tabs li a.active-tab {
  background-color: #1E78DF;
  box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.5);
  color: #FFFFFF;
  margin: 0 -1px 0 0;
  position: relative;
  z-index: 5;
}

#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
  width:80%;
  float:left;
  background-color:white;
  border-right:5px solid #1E78DF;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

#tabbed-toc .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}

#tabbed-toc .panel {
  position:relative;
  z-index:5;
  font:normal normal 10px/normal Droid Arabic Kufi;
}

#tabbed-toc .panel li a {
  color: #000000;
  display: block;
  font: bold 10px/25px Droid Arabic Kufi;
  height: 25px;
  outline: medium none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-decoration: none;
}

#tabbed-toc .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#666;
  float:left;
}

#tabbed-toc .panel li .summary {
  display:block;
  padding:10px 12px 10px;
  font-style:italic;
  border-bottom:4px solid #275827;
  overflow:hidden;
}

#tabbed-toc .panel li .summary img.thumbnail {
  float:right;
  display:block;
  margin:0 8px 0 0;
  padding:4px 4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
}

#tabbed-toc .panel li:nth-child(even) {
  background-color:#D5E8FE;
}

#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
  background-color:#333;
  color:white;
  outline:none;
}

#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
  background-color:#222;
}

@media (max-width:700px) {
  #tabbed-toc {
    border:2px solid #333;
  }
  #tabbed-toc .toc-tabs,
  #tabbed-toc .toc-content {
    overflow:hidden;
    width:auto;
    float:none;
    display:block;
  }
  #tabbed-toc .toc-tabs li {
    display:inline;
    float:right;
  }
  #tabbed-toc .toc-tabs li a,
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:#1E78DF;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
  }
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
  }
  #tabbed-toc .toc-content {
    border:none;
  }
  #tabbed-toc .divider-layer,
  #tabbed-toc .panel li time {
    display:none;
  }
}
</style>
<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>
<div id="tabbed-toc"><span class="loading">يرجى الإنتظار ...</span></div>
<script>
var tabbedTOC = {
    blogUrl: "http://cnmu.blogspot.com", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "جديد!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:#F2000C;'>جديد!</em>" // HTML for the "New!" text
};

</script>
<script src="https://cnmu.googlecode.com/svn/trunk/2014/tabbed-toc.js"></script>

أول شئ عدل هذا الرابط http://cnmu.blogspot.com  برابط مدونتك
تم اعدادا الفهرس باللون الأزرق كلون افتراضي كونه من أكثر الالوان انتشاراً لكن يمكنك تعديل الألوان بإتباع التالي
هذا اللون #004DAC هو لون خلفية التبويبات
هذا #1E78DF هو اللون العام للقالب يفضل أن يكون درجة أفتح من اللون الذي ستختاره للخلفية
وهذا #D5E8FE هو لون خلفية روابط المواضيع وهذا يفضل ان يكون درجه فاتحه جداً من اللون لاذي ستختاره
الرقم 20 هو مقاس شريط التبويبات
والرقم 80 هو مقاس خانة الروابط
ان صغرت أحدهم قم بزيادة الآخر والعكس صحيح المهم أن يكون المجموع الكلي 100
وهذا #F2000C هو لون كلمة جديد
دمتم في امان الله