فهرس كن بلوجر الأحترافي

فهرس كن بلوجر الأحترافي - فهرس مطور أحترافي ينقسم الي ثلاثة أقسام قسم لعرض عناوين المواضيع مع أمكانية اظهار المواضيع من الأحدث الي الاقدم وكذلك العكس كما يضم قسمان قسم تاريخ نشر الموضوع و قسم لأقسام المواضيع بشكل منسق و أحترافي ويتم تركيب الفهرس عبر صفحة ثابتة كما يمكنكم تخصيص الفهرس أكثر وذلك عبر أكواد css كل ماتحتاجه هو خبرة قليلة في هذه الاكواد

معاينة

طريقة تركيب الفهرس

ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه

/* الفهرس */
#bp_toc {
color:#666;
margin:0 auto;
padding:5px;
}
span.toc-note {
display: none;
}
.toc-header-col1 {
padding:10px;
background-color:#f5f5f5;
border-top: 4px solid #0081E4;
text-align: center;
}
.toc-header-col1 a {
color: #000;
}
.toc-header-col2 {
padding:10px;
background-color:#f5f5f5;
border-top: 4px solid #0081E4;
text-align: center;
}
.toc-header-col2 a {
color: #000;
}
.toc-header-col3 {
padding:10px;
background-color:#f5f5f5;
border-top: 4px solid #0081E4;
text-align: center;
}
.toc-header-col3 a {
color: #000;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
background:#fff;
padding:5px;
padding-left:10px;
font-size:89%
}
#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-left:0.5em;
}
.toc-entry-col1 {
font-family:Droid Arabic Naskh,cursive;
font-size:13px;
background: #000;
color: #0081E4;
}
.toc-entry-col1 a {
color: #fff;
}
.toc-entry-col1:hover {
background:#0081E4;
color:#fff;
border-radius: 4px;
}
td.toc-entry-col2{
background:#0081E4;
color: #fff;
text-align: center;
font-family: tahoma;
}
.toc-entry-col3 {
font-family:Droid Arabic Naskh,cursive;
font-size:13px;
background: #000;
text-align: center;
}
.toc-entry-col3 a {
color: #fff;
}
.toc-entry-col3:hover {
background:#0081E4;
color:#fff;
border-radius: 4px;
}

الآن نقوم بحفظ القالب ثم نتوجه الي صفحات ثم انشاء صفحة جديدة 

ننتقل من وضع تأليف الى وضع HTML

ثم احذف كل ما بداخله واضف الكود التالي

<div id="bp_toc">

</div>

<script src="https://cdn.rawgit.com/cnblogger/cn3u/master/index.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

<style type="text/css">

#comments {display:none;}

</style>

لديك اي سؤال أو استفسار حول الموضوع ضعه في تعليق

شارك المقالة عبر:

إقرأ أيضا