
فهرس جديد ينضم لإضافات الفهارس السابقة التي أضفناها لكم يتميز هذا الفهرس بانه يعمل بتقنية التبويبات أى يعتبر كل قسم تبويب مستقل بمواضيعه الخاصة ويظهر المواضيع التابعة للقسم عند تنشيط التبويب الخاص بها تم ضبط مظهر الفهرس ليكون سهل التعديل عليه وسيتم شرح طريقة تنسيقه باللون الذي تريده لكن أولا يمكنك معاينة الفهرس من الروابط التالية
كود الفهرس أضفه في صفحة ثابتة بعد تحويل صندوق الكتابة من وضع تأليف الى وضع HTML
احذف أى شئ موجود به ثم اضف الكود
احذف أى شئ موجود به ثم اضف الكود
<style>أول شئ عدل هذا الرابط http://cnmu.blogspot.com برابط مدونتك
/* 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>
تم اعدادا الفهرس باللون الأزرق كلون افتراضي كونه من أكثر الالوان انتشاراً لكن يمكنك تعديل الألوان بإتباع التالي
هذا اللون #004DAC هو لون خلفية التبويبات
هذا #1E78DF هو اللون العام للقالب يفضل أن يكون درجة أفتح من اللون الذي ستختاره للخلفية
وهذا #D5E8FE هو لون خلفية روابط المواضيع وهذا يفضل ان يكون درجه فاتحه جداً من اللون لاذي ستختاره
الرقم 20 هو مقاس شريط التبويبات
والرقم 80 هو مقاس خانة الروابط
ان صغرت أحدهم قم بزيادة الآخر والعكس صحيح المهم أن يكون المجموع الكلي 100
وهذا #F2000C هو لون كلمة جديد
دمتم في امان الله
موضوع رائع دائما متميز اخى ارجو وضع بصمتك بمدونتى
ردحذفأشكرك اخي أحمد على مرورك الكريم
حذفوموفق بإذن الله
تعجز الكلمات عن وصفك أخي عمرو والله أبدعت
ردحذفربي يبارك فيك أخي محمد
حذفبدعمكم نستمر =r
ماشاء الله عليك غايه في الروعه بالتوفيق يالغالي =r
ردحذفسررت بمرورك أخي علاء
حذفودي وتقديري =r
راااااااااااااااااااااااااااااااااااااااااااااائع ومبدع والله عجزت عن استخراجة من قالب اجنبى
ردحذف=q
=s الحمد لله أخي ها هو متاح للجميع
حذفشكراً لمرورك يا طيب
يعطيك الف عافية اخي عمرو فعلا فهرس اكثر من جميل
ردحذفدائما تبدع بمواضيعك
=r
شكراً على ذوقك أخي منير تحياتي لك =r
حذفأزال المؤلف هذا التعليق.
ردحذفنورت الموضوع أخي ياسر
حذفمشكوررررررررررر يغالى تمت الإضافة فى مدونتى
ردحذفg-a3.blogspot.com
اقل كلمة توصفك ... مبدع ما شالله عليك
ردحذفالله يعزك أخي الكريم
حذفشكراً لمرورك يا طيب
السلام عليكم اخيي العزيز
ردحذفعندي استفسار بسيط
كيف اقوم بعمل صفحة كامله خاصة بمدونتي مثل هذه الصفحة
http://cnmu.blogspot.com/p/preview.html?url=http://cnmu-test2.blogspot.com/2013/01/blog-post_8404.html
او بمعني اصح
حذفصفحة بدون اي اضافات فارغة تماما
وعليكم السلام ورحمة الله وبركاته
حذفعمل صفحة فارغة بدون اضافات لا يمكن شرحه لأنه يختلف من قالب لأخر اما نظام صفحة المعاينة نفسه راجعه من هنا
http://cnmu.blogspot.com/2013/02/Redirection-for-Demo-and-Download.html
موضوع جميل وبه الكثير من العمل بارك الله لك ...لكن عندى سؤال :الفهرس يأخذ تلقائيا من اقسام المدونة وانا كنت انوى الغاء هذا القسم لان وضعت بدلا منه اضافة تحت الهيدر تغنى عنة واود الالغاء منعا لتكرار الروابط طبقا لتعليمات seo ما رايك:http://menshawy-b.blogspot.com
ردحذفأخي القسم الذي تلغيه تلقائيا لن يجلبه الفهرس ولا توجد مشكله في الغاءه الامر يعود لك
حذفالسلام عليكم اخيي العزيز
ردحذفعندي استفسار بسيط لا استطيع انتقال الى التسميات .: NOUVELE ONGLET
صفحة فارغة
وعليكم السلام ورحمة الله وبركاته
حذفربما تكون لديك مشكلة في خلاصات المدونة تأكد من الإعدادات اناه في الوصع الكامل
أخي كيفي يمكني أن أضيف اليها تصنيفات مخصصة ليس جميع التصنيفات وشكرا لك
ردحذفلا ينفع هذا الامر اخي فالفهرس معد ليعرض جميع الأقسام ولا ينفع إستثناء احدها
حذفالسلام عليكم
ردحذفيعطيك العافية اخي على الفهرس
انا عندي مجلة على بلوجر
وفي كتاب عملت لكل كاتب صفحة خاصة فيه وبدي نزل مواضع الكاتب بالصفحة الخاصة فيه ممكن اطبق هاد الشي على هاد الفهرس
وعليكم السلام ورحمة الله وبركاته
حذفيمكنك انشاء لكل كاتب تسمية خاصة تضيف لها مواضيعه
ثم استخدم آداة آخر المواضيع من تسمية ذلك الكاتب
مثال للإضافة
http://cnmu.blogspot.com/2013/06/Recent-Posts.html
اما الفهرس ليخصص من قسم معين يحتاج الامر خدمة دعم فني وانا لا اقدم تلك الخدمة عبر المدونة اقدمها فقط مدفوعة عبر خمسات
دعم فني