اضافة فهرس احترافي في بلوجر

اضافة فهرس احترافي في بلوجر - اليوم درسنا هو عن كيفية إضافة فهرس يعرض المواضيع في جداول بحيث يعرض عناوين المواضيع و تاريخ الموضوع و الاقسام الخاصة بالموضوع و يمكن تنسيق الفهرس من حيث الالوان بكل سهولة يمكنك معاينة الإضافة عبر الزر التالي

المعاينة

طريقة التركيب

1. ادخل لوحة تحكم المدونة
2. اضغط على قالب
3. انقر على تحرير HTML

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

/* CSS Full Sitemap */
#bp_toc {background:#3695DB;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#fff;font-family:Droid Arabic Kufi;font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;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:#aaa;font-family:Droid Arabic Kufi;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:#fff;font-family:Droid Arabic Kufi;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;font-family:Droid Arabic Kufi;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#3695DB;}
#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;}
td.toc-entry-col2 {background:#fafafa;}

التنسيق

لتغيير اللون الازرق ابحث عن #3695DB
لتغيير الخطوط ابحث Droid Arabic Kufi عن سوف تجد الكود مكرر اكثر من مرة استبدلها كلها

الان نقوم بحفظ القالب ثم نتوجه إلى صفحات ثم انشاء صفحة جديدة ثم ننتقل من وضع تأليف إلى وضع HTML و نقوم بوضع هذا الكود

<div id="bp_toc">
</div>
<script src="https://mudwnp.googlecode.com/svn/trunk/blogtoc.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>

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

<div id="bp_toc" style="max-height:1300px;overflow:scroll;overflow-x:auto;">
</div>
<script src="https://mudwnp.googlecode.com/svn/trunk/blogtoc.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>

اي سؤال او استفسار لا تترد بوضعه في تعليق

3/06/2015

مواضيع ذات صلة

اضافة فهرس احترافي في بلوجر

4 / 5

بواسطة مدون محترف

مدون محترف 3/06/2015 18 تعليقات