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

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

تصميم فوتر مدونة احترافي و نضع فيه اشياء جميلة و تزيد المدونة ابداعا و احترافية.


يمكنك ان تترك فوتر مدونة كما هو و تضع فيه بعض الادوات الجميلة، لكن في هذا الدرس

سنقوم بصنع فوتر بـ 3 خانات مثل ما هو موجود في مدونة الناشرون العرب.


1) صنع فوتر بثلاث خانات:





- اولا خذ نسخة احتياطية من ستايل المدونة حتى نتجنب الكوارث باذن الله،

و اذا كان عندك ادوات في الفوتر انقلها للسايد بار حتى لا تفقدها.


- بعد ذلك:

التخطيط >> تحرير HTML


و ابحث عن الكود التالي:




و اضف فوقه:



السطر الملون هو ستايل خلفية عنوان الادوات التي ستضعها في الفوتر، غير فيه مثلما تشاء.

و قم بالحفظ،، و نحن الان انتهينا من وضع ستايل الخانات الثلاث.


بعد ذلك ابحث عن:



و استبدله بالتالي:




و بعد ذلك قم بالحفظ،،


انتقل الان الى عناصر الصفحة.

و ستجد ان شاء الله ثلاث خانات في الفوتر لتضع فيها ادواتك مثل ما يحلو لك.


2) وضع قائمة وصلات مفيدة للزائر اسفل المدونة:

في اسفل المدونة الالكترون في من الافضل ان يجد الزائر مجموعة وصلات تفيده في

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

لذا سنضع الان مجموعة وصلات جميلة اسفل المدونة.


ادخل الى التخطيط >> عناصر الصفحة

و اضف اداة HTML جديدة في الفوتر.





و ضع فيها الكود التالي:



-) لرؤية مثال حي عن الدرس:مدونة تجارب نووية

-)لتحميل الستايل في هذه المرحلة:من هنــــا


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

و ان شاء نواصل، بارك الله فيكم.

بعد ان انتهينا من طريقة زخرفة و تزيين منطقة المواضيع في المدونة،، اليوم رح ننتقل الى

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


درس اليوم رح يكون بسيط و رح نتكلم عن السايد بار بشكل عام،، و عناصر السايد بار

(عنوان الاداة + محتوى الاداة).

لذا من الافضل ان نبدأ و نتوكل على الله.


*) التحكم بستايل السايد بار بشكل عام:

1) كيف تغير عرض السايد بار:

تحرير HTML

ثم ابحث عن ستايل الغلاف و هو :



و عدل في العرض لتحصل على ما تريد،،


و طبعا راعي في ذلك عرض غلاف المواضيع،، و الا سينزل السايد بار للاسفل لان عرضه كبير.


2) كيف تغير خلفية السايد بار.

في نفس المنطقة:



قم بتغيير لون الخلفية،، او حتى يمكنك اضافة صورة تتكرر في الخلفية،،




3) كيف تضيف حدود للسايد بار:

في نفس المنطقة،،



اضف التالي:



و طبعا غير لون و حجم الحد كما تريد.


*) التحكم في ستايل عنوان الاداة:


1) التحكم في حجم و نوع الخط:

مثال عن النتيجة:



ابحث عن هذه المنطقة:



و اضف بداخلها،، ستايل الخط الذي تريد،،

مثلا:



و احذف هاذي:



حتى لا نقع في تكرير.



2) كيف تغير في خلفية عنوان الاداة:


لو نريد ان نضع خلفية جميلة لعنوان الادوات في السايد بار او تغير لون الخلفية الحالي نتبع ما يلي:

نصمم خلفية جميلة بالفتوشوب او باي برنامج رسم،،

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

السايد بار و ارتفاعها معقول شوية مثلا:

325px × 32px (على سبيل المثال فقط)


و انا طلعي التصميم التالي:



ثم نقوم برفعه و الان لنقم بتركيبه:

تحرير HTML >> وابحث عن الكود التالي:



و احذف التالي حتى لا يتخلبط التصميم:

padding: 4px 5px;

و اضف بداخله:



و طبعا قم بتغيير عنوان الصورة.

و اضغط على حفظ.


*) التحكم في ستايل محتوى الاداة:


1) تغيير الخلفية:

ابحث عن:



و اضف بداخله:



واختر اللون الذي يعجبك.

و اذا اردت وضع صورة كخلفية فلا يوجد اي مشكل،،

ضع الكود التالي بدل الذي في الاعلى:



و قم بالحفظ.



2) كيف تضع حدود:

في نفس المنطقة:



قم بوضع كود وضع الحدود:



و غير في شكل الحدود زي ما انت عايز،،

و قم بالحفظ.


*) بونس الدرس:

اضافة اداة جميلة الى السايد بار،،

الان سنقوم باضافة اداة جميلة و هي عبارة عن مجموعة من الوصلات المهمة و التي يجب ان تكون

في كل مدونة احترافية،، و هي:

وصلة الى الصفحة الرئيسية + وصلة اضافة الى المفضلة + وصلة الاشتراك RSS


مثال عن الاداة:




-) قم باضافة اداة HTML جديدة في السايد بار:

و انسخ الكود التالي و الصقه:



و غير ما يجب تغييره،،


-) ملاحظة:

وصلة الاضافة الى المفضلة،، انا متأكد انها تعمل 100% مع اغلب المتصفحات.

لذا لا تقلق اثناء وضعها.


+ لرؤية مثال حي عن الدرس: مدونة تجارب نووية .


+ تحميل الستايل في هذه المرحلة: من هنــــا



ارجو ان يفيدكم درس اليوم و تقبلوا تحياتي.

بعد ان حصلنا على هيدر جميل في الدرس السابق: تصميم هيدر جميل

،، سننتقل الآن الى تعديل ستايل المواضيع.


كل الحكاية و ما فيها اننا سنقوم بتقسيم الموضوع الى الى جزئين،، واحد لتعديل التاريخ و عنوان

الموضوع. و جزء آخر الى تعديل ستايل الموضوع نفسه،، + بونس الدرس.

لذا بدون لف و لا دوران،، سيكون موضوع اليوم طويل شوية.


*) تعديل منطقة غلاف المواضيع :


1) تعديل عرض غلاف المواضيع.


نريد ان نجعل المنطقة التي تظهر فيها المواضيع واسعة قليلا، فنقوم بالتالي:

ادخل الى القالب HTML

و ابحث عن الكود التالي:



و عدّل في خاصية العرض: مثلا

width:500px;


ملاحظة:

يجب مراعاة عرض الغلاف الخارجي و غلاف السايد بار،،

مثلا لو الغلاف الخارجي 10،، سيكون غلاف المواضيع 8 وغلاف السايد بار 2

على سبيل المثال فقط.


2) وضع حدود او نزعها من منطقة غلاف المواضيع

و هاذي سهلة جدا،، لو نريد ان نضع حدود في منطقة غلاف المواضيع.

في نفس المنطقة:

#main-wrapper {


عدل على خاصية:border

مثلا:



========================================


*) تعديل ستايل عنوان و تاريخ الموضوع:-


1) التحكم بحجم و الوان عنوان الموضوع.


نتحكم بها من الخواص التالية:

تعديل ستايل التاريخ:



تعديل ستايل عنوان الموضوع:



و






2) طريقة وضع التاريخ تحت عنوان الموضوع:


مثال عن الطريقة، انظر الصورة:



اذا اردت ان يظهر تاريخ نشر الموضوع تحت العنوان اتبع التالي:


ادخل الى تحرير HTML واضغط على Expand widget (تمديد بالعربية على ما اظن)

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



و بعد ذلك ابحث لنا عن الكود التالي:



و اضف تحته الكود الذي نسخناه في محرر النصوص.

و اضغط على حفظ.


بعد ذلك لنقم بتنسيق الشكل،، ابحث عن خاصية التالية:



و استبدل خاصية ال margin

بهذه القيمة:

margin:.5em 0 1.5em;


ثم ابحث لنا عن :



و اضف بداخلها:

margin-top:1.5em;

و قم بالحفظ.


3) وضع خلفية جميلة لعنوان الموضوع.


اذا اردت ان تضع اطار جميل لعنوان مواضيعك فيمكنك ذلك بكل سهولة

و اتبع الطريقة التالي:

اولا قم بصنع خلفية جميلة،، بقياس مناسب:

510×36 على سبيل المثال فقط

و انا حصلت على هذه الخلفية:



قم برفعها و بعد ذلك...

ابحث لنا عن الكود التالي:



و اضف بداخله الخاصية التالية:



و استبدل العنوان بوصلة الصورة التي صممتها.

ثم اضغط على حفظ.


========================================



*) تعديل ستايل و شكل الموضوع:-

1) التحكم بحجم و لون الخط بداخل الموضوع.


للتحكم بحجم و نوع الخط في مواضيع مدونتك،، ابحث عن التالي في القالب:



و ضع بداخله الخاصية التالي،، على سبيل المثال:


font: bold 16px Arial;


و طبعا اختر ما يعجبك من حجم و نوع.

و لتغيير اللون ضع الخاصية التالي في نفس المنطقة :

color: #854253;

و اختر كود اللون الذي تريد.


2) كيف نضع حدود للموضوع.


اسفل الخاصية السابقة (خارجها)

نضيف خاصية جديدة و هي كالتالي:



و طبعا اختر لون الحدود الذي تريد.


3) كيف نفصل بين المواضيع بخط او بصورة.


هناك طريقتان و انا سأختار اسهلها في نظري:

ادخل على تحرير HTML و قم بتمديد القالب Expand ثم ابحث لنا عن الكود التالي:



و اضف بعده إما:

صورة:



او خط:



و اختر اللون و العرض و المكان الذي تريده.


========================================


*) بونس الدرس:


طريقة وضع اعلانات ادسنس بداخل الموضوع:


و هي طريقة من عبدو باشا ربنا يكرمه و يجازيه كل خير،،

و قمت بالتعديل على بعض الاكواد لتجدها في قالب بلوجر


1- قم بتفعيل : ادسنس داخل المقالات من Edit layout وبعدين دوس edit على المربع الكبير

بتاع مقالات المدونة Blog posts واختر علامة صح بجانب وضع الاعلانات داخل المحتوى ..

وظبط خياراتك.

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

شرح تفاديه في الخطوات القادمة :

2- ادخل على Edit html تحرير و قم بتمديد القالب ، واحفظ قالب المدونة الحالي ... كخطوة احتياطية.

3- ابحث عن الكود :



4- استبدل الكود اعلاه ب :



- ابحث عن :



وضع بعدها :



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




6- احفظ القالب...


========================================


و ها هي نتيجة الدرس: مدونة تجارب نووية .

و يمكنكم تحميل القالب في هذه المرحلة: من هنا


يمكنك ان تقوم باي شيء تريده بقالب مدونتك و لا حدود لما يمكنك عمله سوى خيالك و ابداعك.

في الاخير آسف على طول الموضوع.

اتمنى لكم التوفيق و اي استفسار انا موجود ان شاء الله.

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

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

باسم و نتكول على الله،،


1) التصميم بالفتوشوب:

- نختار ابعاد للهيدر (اللوجو) الذي سنقوم بتصميمه

- نختار الوان جميلة و تتناسب مع موضوع المدونة.

- نقوم بتحضير الصور و الايقونات التي سنستخدمها.

و نبدأ بالرسم و الخربشة،،

و مثلا انا طلع لي الهيدر التالي:



جميل جدا، اليس كذلك؟!

(قولوا ايه علشان مزعلش)


* * بعد ذلك انشئ مدونة تجارب،، و اختر هذا الستايل البسيط التالي،،

لانه سيساعدنا على التصميم خاصة للمبتدئين:




==========

2) تركيب الهيدر في المدونة:


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

ادخل الى مدونتك و الى عناصر المدونة Layout

ثم اضغط تحرير في منطقة الهيدر (رأس الصفحة)



و بعدين تطلعلك خيارات:

حيث يمكنك ان تقوم برفع الهيدر من جهازك او ان تقوم بوضع وصلة له في حالة انك

رفعته على استضافة صور اخرى.

ثم قم بالاختيار اما تكون الصورة فوق عنوان المدونة و الوصف

او تكون تحت المدونة و الوصف.


ثم اضغط على حفظ و ها قد قمت بتركيبه.


===============


-ب- التركيب من جهة تحرير HTML

و هاذي الطريقة جميلة كذلك و خاصة اذا كنت تفهم في ال CSS

اولا ادخل الى تحرير HTML

و ابحث لنا عن الكود التالي:



و هنا ضع خاصية الخلفية مثل:



و استبدل وصلة الصورة بمكان الصورة التي صممتها.


- لون خلفية صورة الهيدر:


اذا كانت صورة الهيدر لديك صغيرة،، فستحتاج الى لون الخلفية + مكان هذه الصورة في الخلفية:


حيث:

#000000 لون خلفية الهيدر

http://www.site.com/image.jpeg مكان صورة الهيدر

no-repeat لا نريد تكرير الصورة في الخلفية

top right مكان الصور: اعلى اليمين


==========


تعديل ستايل عنوان و وصف المدونة:


ابحث لنا عن:



و ابدأ في تغيير القيم الى القيمة التي تريد

مثلا الخط:



قم بتغيير قيمة 100% الى قيمة تريدها او استعمل وحدة البكسل اذا اردت.


- و الآن الى وصف المدونة:

ابحث عن:



و ابدأ في التعديل على راحتك و زي ما انت عايز.


تعديل عرض و ارتفاع الهيدر:


في خصائص الهيدر،،



قم بتغييرها الى ما يناسبك.


و الآن انظروا النتيجة التي حصلت عليها:

قبل:



بعد:



قد تكون بشعة قليلا،، لأنني صنعتها في عجلة من امري، و انا واثق ان لديكم تصاميم و الوان افضل.

=======


خصائص CSS التي عدلت عليها في هذا الدرس:

#outer-wrapper

#header-wrapper

#header

h1.title

h1.title a, h1.title a:visited

#header .description



انظروا المثال الذي حصلت عليه:- مدونة تجارب نووية

و يمكنك تحميل الستايل في هذه المرحلة من الدورة: من هنا

========


هذه هي اهم الاشياء،، و هناك المزيد من الخصائص لا يمكننا ذكرها كلها.

و اذا كان لديك سؤال او اضافة،، فتفضل و ان شاء الله سأجيبك.


و ادعوا لي الله التوفيق لاكمال الدورة.

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

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

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


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


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

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

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

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

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

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

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

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



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

ان شاء الله.

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


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

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

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

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


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


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

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

انظر الصورة:

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




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




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


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

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



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


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

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

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


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




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



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


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

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

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


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




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



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


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

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


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




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



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

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

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

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

و ذلك بناءا على طلب الكثير من الاشخاص ممن يريدون تعلم تصميم هذا النوع من الستايلات.


ستكون الدورة خفيفة باذن الله و بسيطة جدا،،

و اعتمدت في تقديمها على عدة مصادر و خبرتي القليلة جدا.

و نبدأها اليوم بأول موضوع.


متطبات تصميم ستايلات بلوجر:


1) مدونة تجارب:



قم بانشاء مدونة جديدة في حسابك في بلوجر،، حتى نستخدمها في تصميم الستايلات،

و ذلك حتى نتجنب العبث و الخطأ في مدونتك نفسها.

و عندما ننتهي سننقل الستايل الى مدونتك.


========


2) برنامج رسم و تصميم:




سنحتاج الى برنامج رسم مثل الفتوشوب، او اي برنامج رسم آخر تجيد استخدامه،

و ذلك لنستعمله في تصيم اللوجو و الازرار و الخلفيات.




-أ- خطوط مجانية :



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

خطوط اجنبية: موقع Dafont

خطوط عربية: موقع Arfonts

ستجد الكثير من الخطوط الجميلة في هذين الموقعين.



-ب-مساحة لرفع صور التصميم:




نحتاج الى استضافة صور التصميم

لذا استعمل احد افضل مواقع تحميل الصور في الانترنت .



-ج- ايقونات و صور:




لنضيف لمسات جميلة لديكور المدونة نحتاج ايقونات و صور نستعملها في الستايل.

لذا ها هي قائمة بمواقع يمكنك ان تجد بها صور و ايقونات:

* ستوك اكستشينج : يجب ان تسجل في الموقع حتى تستطيع تحميل الصور و هو جميل جدا.

* فليكر: موقع مشهور و جميل و يوجد به العديد من الصور الرائعة.



========


3) محرر نصوص جيد :



و ذلك لتسهيل تحرير الاكواد،، و اي محرر نصوص سيكون مناسب،،

الا انني انصحك بشدة باستعمال: Notepad++




========


4) متصفح جيد:


مثل الفايرفوكس، او/و انترنت اكسبلورر،، و احرص على ان تكون النسخة اخر تحديث،

حتى نرى كيف تظهر المدونة عبر عدة متصفحات.


========


5) ان يكون عندك خلفية و لو بسيطة بالاشياء التالية:


أ- لغة HTML و اذا انت لا تعرفها جيدا فتفضل بزيارة دورة HTML عند الاخ بيبو.

ب- استخدام CSS و يمكنك اخذ دورة خفيفة من هنا: دورة CSS


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

و من فضلكم كل واحد يجيب الادوات دي معاه،،

علشان انا مش رح اسمح باستلاف الادوات داخل الدورة. !


لذا ارجو ان تكونوا في استعداد لبدء الدورة، و ان شاء الله تستفيدون، و يا ريت

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