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

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

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


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



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

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

========


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

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


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