اضافة فهرس احترافي في بلوجر
اضافة فهرس احترافي في بلوجر - اليوم درسنا هو عن كيفية إضافة فهرس يعرض المواضيع في جداول بحيث يعرض عناوين المواضيع و تاريخ الموضوع و الاقسام الخاصة بالموضوع و يمكن تنسيق الفهرس من حيث الالوان بكل سهولة يمكنك معاينة الإضافة عبر الزر التالي
طريقة التركيب
- ادخل لوحة تحكم المدونة
- اضغط على قالب
- انقر على تحرير 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&max-results=9999&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&max-results=9999&callback=loadtoc" type="text/javascript"></script>
<style type="text/css">
#comments {display:none;}
</style>
اي سؤال او استفسار لا تترد بوضعه في تعليق
osama
: من , اهتمامي وحبي لتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحة وواضبة على ما أحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته ,لدي إهتمامات اخرى منها الرياضة ، ألعاب الفيديو ، والتصميم بحد ذاته ومدونة ويب نايت تعبر عما أهواه .
.jpg)
