الأحد، 17 مايو 2015
لكل موقع
أو مدونة لابد من وجود دليل لمواضيعه و خريطة توضح مساره و خصوصا المواقع التي
تهتم بالشروحات و التي تعتمد تدويناتها على بعضها٬ لذلك فوجود فهرس للموقع أمر
ضروري للتسهيل على زوار المدونة من أجل الاطلاع على مقالات الموقع كاملة.
و الفهرس
من الصفحات الأساسية التي لابد منها لكل موقع أو مدونة كما تحدثنا في تدوينة سابقة
بعنوان : إنشاء صفحات أساسية لابد منها لمدونتك الربحية.
و سنتحدث
اليوم بإذن الله عن كيفية إضافة فهرس لمدونتك. هذه الإضافة مستمدة من مدونة أجنبية
اسمها : Beautiful Beta
سنقدمها لكم اليوم بإذن الله معربة و مطورة مع بيان إمكانية تعديلاتك على ألوانها كيفما يوافق موقعك أو مدونتك.
سنقدمها لكم اليوم بإذن الله معربة و مطورة مع بيان إمكانية تعديلاتك على ألوانها كيفما يوافق موقعك أو مدونتك.
يمكنك
معاينة الإضافة من الرابط التالي :
هيا بنا إلى الجانب العملي :
نستعين
بالله أولا قبل كل شئ.
1-
ادخل على لوحة
تحكم بلوجر الخاصة بمدونتك.
2-
ادخل على " الصفحات
" ثم " صفحة جديدة ".
3-
قم بتحويل طريقة
الكتابة من " تأليف " إلى " HTML ".
4-
قم بإضافة الكود
التالي بعد حذف أي شئ موجود داخل مربع
كتابة الرسائل ثم قم بالحفظ.
<div id="bp_toc">
<script src="https://rawgit.com/Abu-Omar/profit-tech/master/profit-tech-site-map.js" type="text/javascript"></script>
<script src="Your-blog-name.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=999&callback=loadtoc" type="text/javascript"></script>
<style>
#bp_toc {
font-family: Droid Arabic Kufi;
font-size: 14px;
margin-bottom: 10px;
margin-top: 28px;
text-align: right;
width: 100%;
}
#bp_toc a {text-decoration: none;}
.toc-note {
background: #CDCDCD ;
border: 2px solid #ADADAD;
color: #000;
padding: 5px 10px;
position: relative;
right: 2px;
top: -13px;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
font-weight: bold;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #CDCDCD;
border: 1px solid #ADADAD;
color: #000;
padding: 10px;
font-size: 14px;
font-weight: bold;
border-radius: 10px; }
/*عناوين المواضيع */
.toc-header-col1 { width:52%;}
.toc-entry-col1 {
background: #F6F6F6;
text-align: right;
border: 1px solid #CDCDCD;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
padding-right: 8px;
transition: all 1s ease-out 0s;
}
.toc-entry-col1:hover {
background: #E3DAFC;
border-color: #A7A8A8;
transition: all 1s ease-out 0s; }
/*التاريخ*/
.toc-header-col2 {width: 16%;text-align: center; }
.toc-entry-col2 {
background: #000;
border: 1px solid #CDCDCD;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
color: #fff;
text-align: center;
transition: all 1s ease-out 0s;
}
.toc-entry-col2:hover {
background: #fff;
border-color: #CDCDCD;
color: #000;
transition: all 1s ease-out 0s; }
/*الأقسام*/
.toc-header-col3 {width:32%;}
.toc-entry-col3 {
background: #960776;
border: 1px solid #CDCDCD;
text-align: right;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
color: #fff;
padding-right: 8px;
transition: all 1s ease-out 0s;
}
.toc-entry-col3 a {
transition: all 1s ease-out 0s;
color: #fff; }
.toc-entry-col3 a:hover {
color: #ffd600;
transition: all 1s ease-out 0s;
}
.toc-entry-col3:hover {
background: #3D5288;
border-color: #A7A8A8;
transition: all 1s ease-out 0s; }
</style>
</div>
مع مراعاة التالي :
- قم باستبدال " your-blog-name " باسم مدونتك.
- " font-family:Droid Arabic Kufi; " : هو
كود نوع الخط. قم بتغييره بما يناسبك.
- " font-size: 14px; " : هو حجم الخط. قم
بتغييره بما يناسبك.
- " #CDCDCD " : هو لون
خلفية " عدد المواضيع " و " عنوان الموضوع
" و " تاريخ الموضوع " و " أقسام المواضيع
".
- " #ADADAD " : هو لون إطار " عدد المواضيع " و " عنوان الموضوع " و " تاريخ الموضوع " و " أقسام المواضيع ".
- " #000 " : هو لون خط " عدد المواضيع " و " عنوان الموضوع " و " تاريخ الموضوع " و " أقسام المواضيع ".
بالنسبة لـ " عناوين المواضيع " :
- " 52% " : هو عرض جزء " عناوين المواضيع " بالنسبة لعرض الفهرس. قم بتغييره بما يناسبك مع مراعاة أن مجموع عرض " عنوان الموضوع " و " تاريخ الموضوع " و " أقسام المواضيع " يساوي 100%.
- " #F6F6F6 " : هو لون خلفية العناوين.
- " #CDCDCD " : هو لون إطار
العناوين.
- " #E3DAFC " : هو لون خلفية العناوين عند الإشارة بالماوس.
- " #A7A8A8 " : هو لون إطار العناوين عند الإشارة بالماوس.
بالنسبة لـ " تاريخ المواضيع " :
- " 16% " : هو عرض جزء " تاريخ المواضيع " بالنسبة لعرض الفهرس. قم بتغييره بما يناسبك مع مراعاة أن مجموع عرض " عنوان الموضوع " و " تاريخ الموضوع " و " أقسام المواضيع " يساوي 100%.
- " #000 " : هو لون خلفية تاريخ المواضيع.
- " #CDCDCD " : هو لون إطار تاريخ المواضيع.
- " #FFF " : هو لون الخط
لتاريخ المواضيع.
- " #FFF " : هو لون خلفية التاريخ عند الإشارة بالماوس.
- " #CDCDCD " : هو لون إطار التاريخ عند الإشارة بالماوس.
- " #000 " : هو لون الخط لتاريخ المواضيع عند الإشارة بالماوس.
بالنسبة لـ " أقسام المواضيع " :
- " 32% " : هو عرض جزء " أقسام المواضيع " بالنسبة لعرض الفهرس. قم بتغييره بما يناسبك مع مراعاة أن مجموع عرض " عنوان الموضوع " و " تاريخ الموضوع " و " أقسام المواضيع " يساوي 100%.
- " #960776 " : هو لون خلفية الأقسام.
- " #CDCDCD " : هو لون إطار الأقسام.
- " #FFF " : هو لون الخط للأقسام.
- " #FFD600 " : هو لون الخط
للأقسام عند الإشارة بالماوس.
- " #3d5288" : هو لون خلفية الأقسام عند الإشارة بالماوس.
- " #A7A8A8 " : هو لون إطار الأقسام عند الإشارة بالماوس.
و بذلك
تكون قد انتهيت من إعداد فهرس مطور و أنيق لمواضيع مدونتك و قد اجتهدت قدر طاقتي
في تنسيق ألوانه و أنت لك الخيار في تغيير ألوانه بما يناسب ألوان مدونتك حسب
التفصيل في الشرح أعلاه.
و إذا
واجهتك صعوبة - لا قدر الله - في التطبيق٬ فلا تتردد في السؤال عبر التعليقات
الهادفة.
و انتظرونا في التدوينة القادمة بإذن الله تعالى
هناك تعليقان (2):
كم يسعدنا تفاعلكم معنا بتعليقاتكم الهادفة٬ فهي تساعد على إثراء الحوار بالمزيد من الإفادة للجميع و أنا أولكم. لكن يرجى من الجميع مراعاة الآداب العامة و القيم الإسلامية و عدم نشر روابط للإشهار حتى يتم نشر التعليق. كما يمكنكم استخدام ركن الاستفسارات للسؤال عن شئ خارج الموضوع كما يمكنك إضافة كود داخل التعليق بعد تحويله بـمحول الأكواد .
الاشتراك في:
تعليقات الرسالة (Atom)
ردحذفإضافة رائعة حقيقة شكرا لك بالتوفيق
عفواً أخي الحبيب - بارك الله بك - وسررنا بمرورك الطيب.
حذف