الدرس 1 : شرح مكونات و عناصر المدونة | دورة تصميم و برمجة ستايلات بلوجر

اليوم الدرس الاول في دورة تصميم ستايلات بلوجر الاحترافية،، و في هذا الدرس سنتعرف على

مكونات ستايلات بلوجر و نفهم طريقة تنظيم هذا الستايل البسيط.

لذا نسأل الله التوفيق و باسمه نبدأ.


مكونات ستايلات بلوجر:


بلوجر يتكون رأيسيا من العناصر التالية:

1) الغلاف الخارجي

2) هيدر المدونة

3) الغلاف الداخلي

4) غلاف مواضيع المدونة

5) غلاف السايد بار

6) غلاف الفوتر

(اضغط على الصورة للتكبير)



طبعا هذه هي العناصر الاساسية و المهمة، و هناك عناصر اضافية رح نتعرف عليها في الايام المقبلة

ان شاء الله.

و الان لندخل في تفاصيل هذه المكونات:


1) الغلاف الخارجي:

و هو الذي يحيط بكل المدونة من الخارج و هو اول العناصر،،

و يمكننا من التحكم في عرض المدونة.

و لتتحكم بخصائصه كالعرض و الحدود،، فان خاصية css المتحكمة بها هي:

#outer-wrapper {
......
.......
}

حيث يمكنك تحديد العرض و نوع الخط المستخدم الخ.


2) هيدر المدونة

هيدر المدونة هو اعلى مكان في المدونة و يضم عنوان و وصف مدونتك،،

انظر الصورة:

(اضغط على الصورة للتكبير)




الخصائص المسؤولة عن التحكم في ستايل الهيدر هي:

/* Header
----------------------------------------------- */
#header-wrapper {
...........
.....
..........

}


#header {
...........
.....
..........
}

h1.title {
...........
.....
..........

}

h1.title a, h1.title a:visited {
...........
.....
..........
}

#header .description {
...........
.....
..........
}

3) الغلاف الداخلي


و يضم : غلاف مواضيع المدونة + غلاف السايد بار.

خصائص CSS المسؤولة عن التحكم به:

#content-wrapper {
.......
......
.......
}

4) غلاف مواضيع المدونة:


و هو المكان الذي تظهر به مواضيع مدونتك،، و يضم

مكان تاريخ نشر التدوينة + عنوان الموضوع + فوتر الموضوع و التعليقات.

و يمكننا كذلك وضع بداخله (اعلى او اسفله) ادوات.


(اضغط على الصورة للتكبير)




و هناك الكثير من الخصائص التي تتحكم في ستايل هذه المنطقة و هي:

#main-wrapper {
.........
.........
}

/* Posts
----------------------------------------------- */
.date-header {
......
......
}

.post {
......
......
}
.post-title {
......
......
}

.post-title a, .post-title a:visited, .post-title strong {
......
......
}

.post div {
......
......}

.post-footer {
......
......
}

.post-footer .span {
......
......
}

.post img {
......
......
}

.post blockquote {
......
......
}

.post blockquote p {
......
......
}

/* Comments
----------------------------------------------- */
#comments h4 {
......
......}

#comments h4 strong {
......
......
}

#comments-block {
......
......}

#comments-block dt {
......
......
}

#comments-block dd {
......
......
}

#comments-block dd.comment-footer {
......
......}

#comments-block dd p {
......
......
}

.deleted-comment {
......
......}

5) غلاف السايد بار:


و هو المكان الذي نضع فيه الادوات مثل،، محرك البحث و ارشيف المدونة،

مثل ما هو موجود على يسار مدونة الناشرون العرب.

و يتكون من عنوان الاداة و مكونات الاداة التي وضعناها.


(اضغط على الصورة للتكبير)




خصائص css المتحكمة فيه:

#sidebar-wrapper {
.............
..........
}

/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
.............
..........}

.sidebar ul {
.............
..........}

.sidebar li {
.............
..........
}

.sidebar {
.............
..........
}

.sidebar .widget {
.............
..........
}

.sidebar .widget-content {
.............
..........
}

6) غلاف الفوتر:


و هو المكان اقصى الجنوب في مدونتك،،

و يحتوي على ادوات مثله مثل السايد بار، انظر الصورة.


(اضغط على الصورة للتكبير)




- خصائص css الخاصة به هي:

#footer {
...........
...........
}

#footer .widget {
...........
...........
}

الدرس القادم سنقوم بتصميم هيدر جميل للمدونة،، و سنتحدث عن طرق

التحكم في خصائص الهيدر حتى نحصل على نتائج احترافية باذن الله.

لذا ارجو ان تتابعوا و لا تنسى التسجيل في القائمة البريدية حتى يصلك جديد الدورة.