Arab-Publishers Sur FaceBook

إعصار الزوار

إبحث في شبكة الإنترنت


بحث مخصص

كتاب زورو في رياضيات الربح من أدسنس

زورو في رياضيات الربح

دورة تصميم ستايلات بلوجر

دورة تصميم ستايلات بلوجر

أدلة مدونات

اربط موقعك بمدونة الناشرون العرب

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

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

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

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


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


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

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 {
...........
...........
}


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

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

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


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

وكيف أجعل عناوين الأدوات في الوسط بدل اليسار اللي فيها الساعة والأرشيف

الدروس واضحة لكن الأكواد تختلف

جزاكم الله خير


Best Max

الأحد, يناير 31, 2010

يقول...

الاخت مسلمة//
في خصائص sidebar-wrapper
اضيفي السطر التالي، قبل اغلاق الحاضنة:
border: 1px solid #000000;
و غيري اللون الى اللون الذي تريدين

و لجعل عناوين الادوات في الوسط،
ابحثي عن #sidebar-wrapper h2
و في هذه الخاصية، اضيفي السطر التالي:
text-align: center;

و تركيب ستايل من تصميمك ليس بالامر الصعب،
في البداية استعيني بستايل آخر لتتبعي الترتيب،
ثم ادخلي تصاميمك الخاصة.

و بالتوفيق.


أع ـقل مـ ج ـنـونــة

الأربعاء, أبريل 28, 2010

يقول...

الفكرة ممتازة

انا كان نفسي اصمم مدونتي علي مزاجي ومش اتقيد بقالب معين

ولكن بتواجهني لسة مشكلة الاكواد ومعرفة معانيها !!

فماذا افعل ؟


إرسال تعليق