إبحث في شبكة الإنترنت
بحث مخصص
كتاب زورو في رياضيات الربح من أدسنس
دورة تصميم ستايلات بلوجر
اليوم الدرس الاول في دورة تصميم ستايلات بلوجر الاحترافية،، و في هذا الدرس سنتعرف على
مكونات ستايلات بلوجر و نفهم طريقة تنظيم هذا الستايل البسيط.
لذا نسأل الله التوفيق و باسمه نبدأ.
مكونات ستايلات بلوجر:
بلوجر يتكون رأيسيا من العناصر التالية:
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)
7 تعليقات:
الأربعاء, يوليو 08, 2009
يقول...السلام عليكم
منذ حوالي سنة وأنا أحاول افكك تصاميم المدونات ببلوجر واحاول اتعلم التغيير بالقالب ، شكرا عالشرح القوي واتمنى ان تكمل السلسلة
الاثنين, سبتمبر 07, 2009
يقول...رآآآآآئــــــع ..
لاحرمت الاجر يارب .. =)
الأربعاء, يناير 20, 2010
يقول...السلام عليكم
جزاكم الله خيرا
طيب أنا لو حابة أصمم مدونتي بستايلي الخاص هل يمكنني أن أعمل ذلك بالفوتشوب يعني أصمم على راحتي في الفوتشوب لو نعك ما هي الخطوة التالية أتمنى ان تفيدونني
بارك الله في مجهودكم.. وكتب لكم الأجر
الجمعة, يناير 22, 2010
يقول...أنا عملت تأطير للغلاف الداخلي للمدونة كيف أضبط اللون يطلع رمادي وما وجدت كود لكي أبدله ؟
هذا هو الكود
#content-wrapper {
width: 1060px;
margin: 0 auto;
padding: 0 0 15px;
text-align: $startSide;
background-color: $mainBgColor;
border: 5px solid $borderColor;
border-top: 2;
الجمعة, يناير 22, 2010
يقول...كيف ممكن أني أعمل تأطير لسايد بار من خلال هذا الكود
#sidebar-wrapper {
margin-$endSide: 35px;
width: 300px;
float: $endSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
/* Headings
وكيف أجعل عناوين الأدوات في الوسط بدل اليسار اللي فيها الساعة والأرشيف
الدروس واضحة لكن الأكواد تختلف
جزاكم الله خير
الأحد, يناير 31, 2010
يقول...الاخت مسلمة//
في خصائص sidebar-wrapper
اضيفي السطر التالي، قبل اغلاق الحاضنة:
border: 1px solid #000000;
و غيري اللون الى اللون الذي تريدين
و لجعل عناوين الادوات في الوسط،
ابحثي عن #sidebar-wrapper h2
و في هذه الخاصية، اضيفي السطر التالي:
text-align: center;
و تركيب ستايل من تصميمك ليس بالامر الصعب،
في البداية استعيني بستايل آخر لتتبعي الترتيب،
ثم ادخلي تصاميمك الخاصة.
و بالتوفيق.
الأربعاء, أبريل 28, 2010
يقول...الفكرة ممتازة
انا كان نفسي اصمم مدونتي علي مزاجي ومش اتقيد بقالب معين
ولكن بتواجهني لسة مشكلة الاكواد ومعرفة معانيها !!
فماذا افعل ؟
إرسال تعليق