إضافة فهرس بلوجر كن مدون لمدونتك

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

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

معاينــة

وللتركيب حول صندوق الكتابة من وضع تأليف الى وضع HTML

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

<div id="bp_toc">
<script type="text/javascript" src="https://cnmu.googlecode.com/svn/trunk/cnmu-index-map.js"></script> <script src="http://cnmu.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"> </script> <style>
#bp_toc {
  font-family: arial;
  font-size: 14px;
  margin-bottom: 10px;
  margin-top: 28px;
  text-align: right;
  width: 100%;
}
#bp_toc a {text-decoration: none;}
.toc-note {
    background: #ddd ;
    border: 2px solid #BBB;
    padding: 5px 10px;
    position: relative;
    right: 2px;
    top: -13px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    font-weight: bold;
    text-shadow: 4px 4px 4px #515151; }

.toc-header-col1, .toc-header-col2, .toc-header-col3 {
    background: #ddd;
    border: 1px solid #BBB;
    color: #000;
    padding: 2px 5px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 10px; }

/*عناوين المواضيع */
.toc-header-col1 { width:58%;}
.toc-entry-col1 {
    background: #F6F6F6;
    border: 1px solid #ddd;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    padding-right: 8px; }

.toc-entry-col1:hover {
    background: #FDE3E6;
    border-color: #8A8B8B;
    transition: all 1s ease-out 0s; }
/*التاريخ*/
.toc-header-col2 {width: 11%;text-align: center; }
.toc-entry-col2 {
    background: #000;
    border: 1px solid #ddd;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    color: #fff;
    text-align: center; }
/*الأقسام*/
.toc-header-col3 {width:31%;}
.toc-entry-col3 {
    background: #9C0022;
    border: 1px solid #ddd;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    color: #fff;
    padding-right: 8px; }

.toc-entry-col3 a { color: #fff; }

.toc-entry-col3:hover {
    background: #3D5288;
    border-color: #8A8B8B;
    transition: all 1s ease-out 0s; }
 </style> </div>

أول شئ نفعله هو استبدال http://cnmu.blogspot.com برابط مدونتك
بالنسبة للتنسيق لمن يرغب بالتعديل هاذين الكودين هما نوع وحجم الخط يمكنك تغيرهما بما تشاء
font-family: arial;
font-size: 14px;
لكن طبعا كما قلت تكبير الخط قد يزيد من عرض الفهرس فإن لم تكن مساحة الموضوع لديك كبيرة قد يكون الفهرس شكله غير مضبوط

هذا هو #ddd لون خلفية جملة عدد المواضيع
وهذا هو #BBB لون الإطار
نفس الأمر في الثلاث الوان التالية الخلفية #ddd الإطار #BBB وهذا لون الخط #000 ولكنهم يخصون عناوين الأعمدة

بالنسبة لجزء
/*عناوين المواضيع */
اللونين الموجدان بالبداية هما الخلفية والإطار
ولونين النهاية المعلمان بالأزرق نفس الشئ لكن عند تمرير الماوس

جزء
/*التاريخ*/
الثلاث الوان هما الخلفية الإطار ولون الخط

جزء
/*الأقسام*/
الثلاث الوان الاولى الخلفية والإطار والخط
اللون #fff هو لون الروابط
اللونين الملعمان بالأخضر في النهاية هما الخلفية والإطار عند مرور الماوس
ملحوظة أخيرة بخصوص النسب المعلمة باللون الوردي 58% 11% 31%
هذه نسبة كل قسم من مساحة عرض الفهرس يمكنك زيادة حجم قسم او تقليلها بتغيير النسبة
لكن عند زيادة قسم يجب تقليل الآخرين بحيث يكون مجموع النسب كلها 100%

تم بحمد الله
الموضوع منقول
المصدر الأصلي للموضوع
http://cnmu.blogspot.com/

زول تقنية

أخبار الموقع

إضافة فهرس بلوجر كن مدون لمدونتك

ليست هناك تعليقات

آحدث المواضيع

التعليقات

الأعمال الكاملة

المشاركات الشائعة

زول تقنية

أخبار الموقع

إضافة فهرس بلوجر كن مدون لمدونتك

ليست هناك تعليقات

تابعنا عبر الشبكات الاجتماعية

آحدث المواضيع

التعليقات

الأعمال الكاملة

المشاركات الشائعة