السلام عليكم زوار كوليكا ويب، الاعزاء معنا اليوم درس جديد و هوا إضافة فهرس لمدونة بلوجر إحترافي، ، اذا كنت صاحب مدونة كبيره ويوجد بها الكثير من المقالات و المواضيع وتريد وضع وفرز جميع مواضيع مدونتك في صفحة واحده لتسهيل على زائر مدونتك التصفح بين مواضيع والمقالات الموجوده على المدونة، وجود فهرس في مدونتك امر اساسي ومهم لذالك احضرت لكم اليوم فهرس جميل وسهل تركيب و يوجد به مميزات عاليه مثل ترتيب المقالات تنازليا وتصاعديا والاجدد اولا... و المزيد .
طريقة التركيب:
1- اذهب الى لوحة تحكم مدونتك وقم بانشاء صفحة جديده باسم " الفهرس " واضف بداخل الصفحة الكود التالي
<div id="bp_toc" style="max-height:1300px;overflow:scroll;overflow-x:auto;">
</div>
<script src="https://cdn.rawgit.com/tarekhesham/Colica-web/master/sitemap-Colica-web.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
/* CSS Full Sitemap colica-web*/
#bp_toc {background:#75CC8E<;color:#fff;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#fff;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#ccc;width:250px;}
.toc-header-col2 {padding:10px;background-color:#ccc;width:75px;}
.toc-header-col3 {padding:10px;background-color:#ccc;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#fff;font-family:'Noto Sans Kufi Arabic', sans-serif!important;font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}
</style>
2- قم بحفظ الصفحة و مبروك عليك الفهرس الاحترافي.</div>
<script src="https://cdn.rawgit.com/tarekhesham/Colica-web/master/sitemap-Colica-web.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
/* CSS Full Sitemap colica-web*/
#bp_toc {background:#75CC8E<;color:#fff;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#fff;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#ccc;width:250px;}
.toc-header-col2 {padding:10px;background-color:#ccc;width:75px;}
.toc-header-col3 {padding:10px;background-color:#ccc;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#fff;font-family:'Noto Sans Kufi Arabic', sans-serif!important;font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}
</style>
ملاحظة : الكود المحدد باللون الاحمر هو خاص بلون خلفية الفهرس ، يمكنك تغيره ان اردت.
يمكنك معرفة كود اللون الذي تريد من >> اكبر مكتبة الوان.
يمكنك معرفة كود اللون الذي تريد من >> اكبر مكتبة الوان.
