السلام عليكم
لدينا لكم اليوم كود للفهرسة اوتوماتيكي كما في مدونتي شبكة ابو يوسف
يفيد الكود في فهرسة جميع مواضيع المدونة وتقسيمهم حسب الاقسام
مثال حي : فهرس مدونة شبكة ابو يوسف
يضع كلمة New لكل موضوع جديد
الفهرسة مهمه لجميع المدونات
قم باحداث صفحة جديدة و الباقي تعرفونه
الكود :
لدينا لكم اليوم كود للفهرسة اوتوماتيكي كما في مدونتي شبكة ابو يوسف
يفيد الكود في فهرسة جميع مواضيع المدونة وتقسيمهم حسب الاقسام
مثال حي : فهرس مدونة شبكة ابو يوسف
يضع كلمة New لكل موضوع جديد
الفهرسة مهمه لجميع المدونات
الكود :
<style>
#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 naskh;
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 naskh;
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 12px/droid arabic naskh;
}
#tabbed-toc .panel li a {
color: #000000;
display: block;
font: bold 10px/25px droid arabic naskh;
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/droidarabicnaskh.css' rel='stylesheet' type='text/css'/>
<div id="tabbed-toc"><span class="loading">يرجى الإنتظار ...</span></div>
<script>
var tabbedTOC = {
blogUrl: "http://merimiweb1.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://merimiweb1.blogspot.com برابط مدونتك
تم اعدادا الفهرس باللون الأزرق كلون افتراضي كونه من أكثر الالوان انتشاراً لكن يمكنك تعديل الألوان بإتباع التالي
هذا اللون #004DAC هو لون خلفية التبويبات
هذا #1E78DF هو اللون العام للقالب يفضل أن يكون درجة أفتح من اللون الذي ستختاره للخلفية
وهذا #D5E8FE هو لون خلفية روابط المواضيع وهذا يفضل ان يكون درجه فاتحه جداً من اللون لاذي ستختاره
الرقم 20 هو مقاس شريط التبويبات
والرقم 80 هو مقاس خانة الروابط
ان صغرت أحدهم قم بزيادة الآخر والعكس صحيح المهم أن يكون المجموع الكلي 100
وهذا #F2000C هو لون كلمة جديد
اتمنى ان اكون قد وفقت و الى موضوع اخر
ساهم في نشر الموضوع للفائدة:
شارك الموضوع
شبكةابويوسف
عالم من الثقافة والمعرفة والقصص والعبر الهادفة والخطب و المحاضرات والبرامج و الإضافات و الشروحات و كل ما يفيد ويحافظ على صحتك ومجموعة منتقاة من أضخم وأقوى المواضيع في مجالات متعددة
0 تعليقات
