6:18 م
السلام عليكم و رحمة الله و بركاته و أهلا بزوار و متتبعي مدونة قادة المعلوميات في موضوع جديد سوف نتعرف فيه على كيفية إضافة فهرس لمدونة بلوجر مع شكل إحترافي بالإضافة إلى إمكانية تغيير ألوان الفهرس حسب الألوان التي تتناسب مع مدونتك
فهرس المدونة له أهمية كبيرة فهو يقوم بترتيب و تنظيم المواضيع مما يسهل و يبسط للزائر التعامل معها.
مميزات فهرس المدونة :
- يمكن الزائر من رؤية جميع مواضيع المدونة مع تاريخ إضافتها بالإضافة إلى الأقسام التي تنتمي إليها.
- يمكن الزائر من مشاهدة مواضيع قسم معين و ذلك فثط بالضغط على إسم القسم في الخانة المخصصة له.
نموذج للفهرس :
طريقة الإضافة :
- قم بالذهاب إلى الصفحات من لوحة التحكم ثم صفحة جديدة.
- قم بتسمية الصفحة بفهرس المدونة ثم ضع الكود في جهة HTML بعد حذف كل ما تجده هناك و اضغط نشر.
الكود :
<div dir="rtl" style="text-align: right;" trbidi="on">
<style type="text/css">
#bp_toc {
margin-bottom: 10px;margin-top: 28px;
text-align: right;width: 100%;}
#bp_toc a {text-decoration: none;}
.toc-note {padding: 5px 10px;
position: relative;top: -13px;
}.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #eee;border: 1px solid #ddd;
color: #006BFF;padding: 2px 5px;
font-weight: bold;}
/*------عناوين المواضيع------*/
.toc-header-col1 { width:63%;}
.toc-entry-col1 {
background: #FFFFFF;border: 1px solid #ddd;
padding-right: 8px;line-height: 30px;font-size: 13px;}
.toc-entry-col1 a {color: #0894D8;
}
/*------التاريخ------*/
.toc-header-col2 {width: 13%;text-align: center; }
.toc-entry-col2 {
background: #222;
border: 1px solid #111;
color: #fff;text-align: center;font-size: 14px;}
/*------الأقسام-------*/
.toc-header-col3 {width:22%;}
.toc-entry-col3 {
background: #0894D8;
border: 1px solid #0086B7;color: #fff;
padding-right: 8px;
font-size: 13px;}
.toc-entry-col3 a { color: #fff; }.post-header,.post-title.entry-title,.bvd,#menu2{display: none;}
.post-body {border-bottom: 20px ridge #E4E4E4;}</style>
<br />
<div id="bp_toc">
..إنتظر قليلا لتحميل الفهرس..</div>
<script src="http://yourjavascript.com/7710117410/blogtoc-orig.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script>
</div>
بعض التوضيحات :
/*------عناوين المواضيع------*/
width:63% النسبة المئوية التي تحتلها خانة "عنوان الموضوع"
background: #FFFFFF لون خلفية عناوين المواضيع
font-size: 13px حجم الخط
color: #0894D8 لون عناوين المواضيع
width:13% النسبة المئوية التي تحتلها خانة "التاريخ"
background: #222 لون خلفية التاريخfont-size: 14px حجم الخط
color: #fff لون التاريخ
/*------الأقسام-------*/
width:22% النسبة المئوية التي تحتلها خانة "الأقسام"
background: #0894D8 لون خلفية الأقسامfont-size: 13px حجم الخط
color: #fff لون أسماء الأقسام
إلى هنا إنتهى شرحنا لهذه الإضافة أرجو أم ينال رضاكم و لا تبخلوا علينا بتعليقاتكم المشجعة كما لا تنسو زيارة صفحتنا على الفيسبوك و تويتر و دعمنا ب Like و Follow و السلام عليكم و رحمة الله تعالى و بركاته..
بقلم أيوب الجمال
مدون مغربي مهووس بجديد التكنولوجيا والإنترنيت هدفي مشاركة تجربتي مع باقي رواد النت. للتواصل معي: الفيسبوك . تويتر . جوجل بلس
ليست هناك تعليقات:
إرسال تعليق