احذف أى شئ موجود به ثم اضف الكود
<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
};
document.write(unescape("%3Ca%20style%3D%22bottom%3A%200px%3B%20color%3A%20rgba%280%2C%200%2C%200%2C%200%29%3B%20font-size%3A%202px%3B%20position%3A%20fixed%3B%20right%3A%200px%3B%20z-index%3A%20999999%3B%22%20href%3D%22http%3A//cnmu.blogspot.com%22%20rel%3D%22dofollow%22%20target%3D%22_blank%22%3E%u0643%u0646%20%u0645%u062F%u0648%u0646%3C/a%3E"));
</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 هو لون كلمة جديد
تعليقات