أقسام المدونة
- أخبار و منوعات
- ادارة المنتديات
- ادارة المواقع Site management
- ادوات و برامج
- البنوك الإلكترونية E-Banks
- التدوين و المدونات Blogger
- الربح من المدونات Blog Money
- المفضلات الجماعية Social Sites
- بيدفرتايزر Bidvertiser
- تحسين نتائج البحث SEO
- تقنيات جلب الزوار Traffic
- تويتر Twitter
- جوجل أدسنس AdSense
- جوجل ادوردز Google Adwords
- دورة تصميم ستايلات بلوجر
- صباح الخير أدسنس
- عروض الاستضافة و الدومينات Domain Names
- فرص للربح من الإنترنت
- قسم أسئلة الزوار Questions
- لقاءات و حوار Publishers Talk
- مواقع تحت الضوء
أرشيف مواضيع المدونة
أدلة مدونات
أضف موقعك إلينا
انسخ هذا الكود و الصقه في موقعك او
مدونتك:
www.adsense-pub.blogspot.com. يتم التشغيل بواسطة Blogger.
الادلة
الدرس 1 : شرح مكونات و عناصر المدونة | دورة تصميم و برمجة ستايلات بلوجر
2:16 م | مرسلة بواسطة
العربي |
اليوم الدرس الاول في دورة تصميم ستايلات بلوجر الاحترافية،، و في هذا الدرس سنتعرف على
مكونات ستايلات بلوجر و نفهم طريقة تنظيم هذا الستايل البسيط.
لذا نسأل الله التوفيق و باسمه نبدأ.
مكونات ستايلات بلوجر:
بلوجر يتكون رأيسيا من العناصر التالية:
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 {
...........
...........
}
الدرس القادم سنقوم بتصميم هيدر جميل للمدونة،، و سنتحدث عن طرق
التحكم في خصائص الهيدر حتى نحصل على نتائج احترافية باذن الله.
لذا ارجو ان تتابعوا و لا تنسى التسجيل في القائمة البريدية حتى يصلك جديد الدورة.
مكونات ستايلات بلوجر و نفهم طريقة تنظيم هذا الستايل البسيط.
لذا نسأل الله التوفيق و باسمه نبدأ.
مكونات ستايلات بلوجر:
بلوجر يتكون رأيسيا من العناصر التالية:
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 {
...........
...........
}
الدرس القادم سنقوم بتصميم هيدر جميل للمدونة،، و سنتحدث عن طرق
التحكم في خصائص الهيدر حتى نحصل على نتائج احترافية باذن الله.
لذا ارجو ان تتابعوا و لا تنسى التسجيل في القائمة البريدية حتى يصلك جديد الدورة.
التسميات:
دورة تصميم ستايلات بلوجر
الاشتراك في:
تعليقات الرسالة (Atom)
1 التعليقات:
8 يوليو 2009 في 3:03 ص
يقول...السلام عليكم
منذ حوالي سنة وأنا أحاول افكك تصاميم المدونات ببلوجر واحاول اتعلم التغيير بالقالب ، شكرا عالشرح القوي واتمنى ان تكمل السلسلة
إرسال تعليق