السلام عليكم متابعي مدونة سمور الكرام ... اليوم نقدم لكم اكبر مجموعة احترافية لتصاميم فهارس مدونات بلوجر وطريقة تركيبها بكل بساطة .. وكلنا نعلم ان فهرس المدونة مهم جداا للزائر وذلك لانه يسهل عملية التنقل بين مواضيع المدونة فلابد ان تحتوي كل مدونة على فهرس ..
* نتوجه الى لوحة التحكم >> الصفحات >> صفحة جديدة
* ثم نجعل محرر الرسائل على وضع html
* ونلصق احد الاكواد التالية بحسب الرغبة
<div dir="rtl" style="text-align: right;" trbidi="on">
<style>
#tocTable {
border:2px solid white;
font:normal normal 11px/normal Verdana,Taho<div dir="rtl" style="text-align: right;" trbidi="on">
<style>
#tocTable {
border:2px solid white;
font:normal normal 11px/normal Verdana,Tahoma,Arial,Sans-Serif;
color:#333;
border-collapse:collapse;
text-align:right;
margin:0 0 5px;
}
#tocTable th,
#tocTable td {
border:1px solid white;
background-color:#fafafa;
padding:10px 15px;
}
#tocTable th {
background-color:#5d5d5d;
font-weight:bold;
color:white;
text-shadow:0 1px 0 rgba(0,0,0,.3);
}
#th-1 {
width:60%;
background-color:#5A930D;
}
#th-2,#th-3 {width:20%}
#tocTable td.toc-header-col-1,
#tocTable td.toc-header-col-2 {
padding:0 !important;
background-color:#2372A7;
}
#tocTable td.toc-header-col-3 {background-color:#D7DEF0}
#tocTable a {
display:block;
text-decoration:none;
color:white;
padding:10px 15px;
background:none;
}
#tocTable td.toc-header-col-1:hover,
#tocTable td.toc-header-col-2:hover {
background-color:#174B6F;
-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
-moz-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
box-shadow:inset 0 0 3px rgba(0,0,0,.4);
}
#tocSort {
display:block;
width:220px;
font:normal bold 12px/normal Verdana,Tahoma,Arial,Sans-Serif;
color:#333;
cursor:pointer;
border:none;
outline:none;
background-color:#eee;
margin:0 0 2px 0;
padding:5px;
}
</style>
<script>
var theTotalPosts = 9999, // Tentukan jumlah maksimal posting
theOptions = "ترتيب حسب...", //عنوان الاختيار الاول
theSortPosts = "ترتيب حسب الحروف الهجائية", // عنوان الاختيار الثاني
theSortLabels = "ترتيب حسب التسمية", // عنوان الاختيار الثالث
theTitles = "عنوان التدوينة", // Header tabel 1
theLabels = "تسمية التدوينة", // Header tabel 2
theDates = "تاريخ النشر", // Header tabel 3
theBlankLabels = "غير مصنف", // Label kosong
theSiteUrl = "http://st-tek.blogspot.com"; // هنا تضع رابط مدونتك بدل رابط مدونتي
</script>
<script src="https://googledrive.com/host/0BxhNxbe6o2QjcTJUcVVQb3FlRlU"></script></div>
</script>
<script src="https://googledrive.com/host/0BxhNxbe6o2QjcTJUcVVQb3FlRlU"></script></div>
<a style="font-size: 6px;float:left;text-decoration:none;color: #616469;" href="http://st-tek-.blogspot.com">
Widget by hsam ahmed</a></div>
<style>
#tocTable {
border:2px solid white;
font:normal normal 11px/normal Verdana,Taho<div dir="rtl" style="text-align: right;" trbidi="on">
<style>
#tocTable {
border:2px solid white;
font:normal normal 11px/normal Verdana,Tahoma,Arial,Sans-Serif;
color:#333;
border-collapse:collapse;
text-align:right;
margin:0 0 5px;
}
#tocTable th,
#tocTable td {
border:1px solid white;
background-color:#fafafa;
padding:10px 15px;
}
#tocTable th {
background-color:#5d5d5d;
font-weight:bold;
color:white;
text-shadow:0 1px 0 rgba(0,0,0,.3);
}
#th-1 {
width:60%;
background-color:#5A930D;
}
#th-2,#th-3 {width:20%}
#tocTable td.toc-header-col-1,
#tocTable td.toc-header-col-2 {
padding:0 !important;
background-color:#2372A7;
}
#tocTable td.toc-header-col-3 {background-color:#D7DEF0}
#tocTable a {
display:block;
text-decoration:none;
color:white;
padding:10px 15px;
background:none;
}
#tocTable td.toc-header-col-1:hover,
#tocTable td.toc-header-col-2:hover {
background-color:#174B6F;
-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
-moz-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
box-shadow:inset 0 0 3px rgba(0,0,0,.4);
}
#tocSort {
display:block;
width:220px;
font:normal bold 12px/normal Verdana,Tahoma,Arial,Sans-Serif;
color:#333;
cursor:pointer;
border:none;
outline:none;
background-color:#eee;
margin:0 0 2px 0;
padding:5px;
}
</style>
<script>
var theTotalPosts = 9999, // Tentukan jumlah maksimal posting
theOptions = "ترتيب حسب...", //عنوان الاختيار الاول
theSortPosts = "ترتيب حسب الحروف الهجائية", // عنوان الاختيار الثاني
theSortLabels = "ترتيب حسب التسمية", // عنوان الاختيار الثالث
theTitles = "عنوان التدوينة", // Header tabel 1
theLabels = "تسمية التدوينة", // Header tabel 2
theDates = "تاريخ النشر", // Header tabel 3
theBlankLabels = "غير مصنف", // Label kosong
theSiteUrl = "http://st-tek.blogspot.com"; // هنا تضع رابط مدونتك بدل رابط مدونتي
</script>
<script src="https://googledrive.com/host/0BxhNxbe6o2QjcTJUcVVQb3FlRlU"></script></div>
</script>
<script src="https://googledrive.com/host/0BxhNxbe6o2QjcTJUcVVQb3FlRlU"></script></div>
<a style="font-size: 6px;float:left;text-decoration:none;color: #616469;" href="http://st-tek-.blogspot.com">
Widget by hsam ahmed</a></div>
* يجب ان تغيير الرابط باللون الاحمر الى مدونتك
التصميم الثاني
<div dir="rtl" style="text-align: right;" trbidi="on">
<br /></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="http://dte-project.googlecode.com/svn/trunk/accordion-toc-skin.css" rel="stylesheet"></link>
<br />
<div class="table-of-content" id="table-of-content">
<span class="loading">يحمل...</span></div>
<div class="credit-link">
<script>
var toc_config = {
url: 'http://st-tek.blogspot.com', // هنا تضع رابط مدونتك بدل رابط مدونتي
containerId: 'table-of-content',
showNew: 10,
newText: ' - <strong style="font-weight:bold;font-style:italic;color:red;">جديد</strong>',
sortAlphabetically: {
thePanel: true,
theList: true
},
maxResults: 9999,
activePanel: 1,
slideSpeed: {
down: 400,
up: 400
},
slideEasing: {
down: null,
up: null
},
slideCallback: {
down: function() {},
up: function() {}
},
clickCallback: function() {},
jsonCallback: '_toc',
delayLoading: 0
};
</script>
<script src="https://googledrive.com/host/0BxhNxbe6o2QjMUctanBZU3BRSkE"></script></div>
<a style="font-size: 6px;float:left;text-decoration:none;color: #616469;" href="http://st-tek-.blogspot.com">
Widget by hsam ahmed</a></div>
<br /></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="http://dte-project.googlecode.com/svn/trunk/accordion-toc-skin.css" rel="stylesheet"></link>
<br />
<div class="table-of-content" id="table-of-content">
<span class="loading">يحمل...</span></div>
<div class="credit-link">
<script>
var toc_config = {
url: 'http://st-tek.blogspot.com', // هنا تضع رابط مدونتك بدل رابط مدونتي
containerId: 'table-of-content',
showNew: 10,
newText: ' - <strong style="font-weight:bold;font-style:italic;color:red;">جديد</strong>',
sortAlphabetically: {
thePanel: true,
theList: true
},
maxResults: 9999,
activePanel: 1,
slideSpeed: {
down: 400,
up: 400
},
slideEasing: {
down: null,
up: null
},
slideCallback: {
down: function() {},
up: function() {}
},
clickCallback: function() {},
jsonCallback: '_toc',
delayLoading: 0
};
</script>
<script src="https://googledrive.com/host/0BxhNxbe6o2QjMUctanBZU3BRSkE"></script></div>
<a style="font-size: 6px;float:left;text-decoration:none;color: #616469;" href="http://st-tek-.blogspot.com">
Widget by hsam ahmed</a></div>
* يجب ان تغيير الرابط باللون الاحمر الى مدونتك
التصميم الثالث
<link rel="stylesheet" href="https://googledrive.com/host/0BxhNxbe6o2Qjb0VNNEJudWRZcGc"/>
<div dir="ltr" style="text-align: right;" trbidi="on">
<div id="tabbed-toc">
<span class="loading">انتظر تحميل الارشيف</span></div>
<br />
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "http://st-tek.blogspot.com/", // استبدل رابط مدونتك بدل من رابط مدونتي
containerId: "tabbed-toc",
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // ضع `true` لاضهار التاريخ بدل من false
showSummaries: true, // ضع false لاظهار ملخص التدوينة بدل من true
numChars: 200, //عدد احرف الملخص
showThumbnails: true, // ضع false لاخفاء صورة الموضوع بدل من true
thumbSize: 40, // حجم صورة الموضوع
noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
monthNames: [ // Array of month names
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
newTabLink: true, // فتح الرابط في صفحة جديدة?
maxResults: 99999, //العدد الاقصى للمواضيع في الفهرس
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:red;'>جديد</em>" // HTML for the "جديد" text
};
</script>
<script src="https://googledrive.com/host/0B2H3MJwpj5ZVNkJwaVF3SEV4cjg/tabbed-toc.js" type="text/javascript"></script>
</div>
<a style="font-size: 6px;float:left;text-decoration:none;color: #616469;" href="http://st-tek-.blogspot.com">
Widget by hsam ahmed</a></div>
<div dir="ltr" style="text-align: right;" trbidi="on">
<div id="tabbed-toc">
<span class="loading">انتظر تحميل الارشيف</span></div>
<br />
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "http://st-tek.blogspot.com/", // استبدل رابط مدونتك بدل من رابط مدونتي
containerId: "tabbed-toc",
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // ضع `true` لاضهار التاريخ بدل من false
showSummaries: true, // ضع false لاظهار ملخص التدوينة بدل من true
numChars: 200, //عدد احرف الملخص
showThumbnails: true, // ضع false لاخفاء صورة الموضوع بدل من true
thumbSize: 40, // حجم صورة الموضوع
noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
monthNames: [ // Array of month names
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
newTabLink: true, // فتح الرابط في صفحة جديدة?
maxResults: 99999, //العدد الاقصى للمواضيع في الفهرس
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:red;'>جديد</em>" // HTML for the "جديد" text
};
</script>
<script src="https://googledrive.com/host/0B2H3MJwpj5ZVNkJwaVF3SEV4cjg/tabbed-toc.js" type="text/javascript"></script>
</div>
<a style="font-size: 6px;float:left;text-decoration:none;color: #616469;" href="http://st-tek-.blogspot.com">
Widget by hsam ahmed</a></div>
* يجب ان تغيير الرابط باللون الاحمر الى مدونتك
وفي الاخير دمتم في حفظ الله ورعايته
الإبتساماتإخفاء