درس عمل هيدر وفيوتر لمدونة بلوجر

السلام عليكم ورحمة الله وبركاته


طبعاً نعرف جميعنا الطريقة العادية لوضع هيدر في أعلى المدونة وذلك
من تخطيط ثم رأس الصفحة وتستعرضونها من كمبيوتركم وترفعونها
على المدونة صح؟؟


اوكى راح نتعلم اليوم كيف نضعها رابط بكود داخل القالب نفسه

أول شي صممو هيدر أو بنر البعض يقولها بنر
بعد ماصممنا الهيدر راعو المقاسات لازم تعرفو
الطول والعرض للتصميم
بما إناّ بالدورة بدئنا مع بعض إذاً خلو القياس موحد حق العرض
يعني العرض هو عرض التدوينة الي هو

880

أما الطول كيفكم مثل ماتبغو


هذا الهيدر الي صممته لمدونتي:

هذه الصورة بحجم اخر انقر هنا لعرض الصورة بالشكل الصحيح ابعاد الصورة هي 900x200.

نتوجه الأن من تخطيط ثم
تحرير HTML


الأن نبحث عن:

كود:

#header-wrapper {

نضع أسفله هذا الكود:

كود:

background-image: url(هنا رابط الصورة);

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


الأن اعملو معاينة طبعاً البعض الصورة كبيرة والبعض صغيرة
والاطار مو قدها صح؟؟

لازم تعملو تعديل على الطول للصورة اوكى راح تفهمو ابحثو عن:

كود:

#header h1 {

كود:

#header h1 {
  margin:5px 5px 0;
  padding:127px 50px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}

العدد الي باللون الأحمر 127 هو طول البنر الي انا صممته شوفو
انتو طول الصورة الي سويتوها وضعوه بدال الرقم الموجود


اعملو معاينة اذا كل شيء اوكى احفظوه..

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




-----------------------------------------------------------------------------------





لوضع فوتر أي صورة بالأسفل

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

#footer {

راح نلقى الكود كذا:

كود:

#footer {
  width:880px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;

أول شييء غيرو هذا الرقم الي بهذا السطر:

كود:

padding-top:15px;

حسب طول الفوتر الي صممتوه بالفتو شوب أما
العرض موحد 880 حسب دورتنا.


ثم نلصق هذا الكود أسفل كلمة فوتر:

كود:

background:transparent url(نضع هنا رابط الصورة للفوتر) no-repeat scroll center top;

يعني بالنسبة لي صار كذا:

كود:

#footer {
background:transparent url(http://farm3.static.flickr.com/2687/4154260188_67074d5ed9_o.gif) no-repeat scroll center top;
  width:880px;
  clear:both;
  margin:0 auto;
  padding-top:100px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;

نعمل معاينة إذا كل شيء أوكى يصير نعمل حفظ







-----------------------------------------------------------------------------------




الأن باقي نعرف كيف نضع حقوقنا على القالب
في الفوتر بأخر المدونة..


إعملو تحرير لقالب tml إنزلو بأخر القالب
أخر شيء راح تلقو :

كود:

فوقها راح نضع هذا الكود:

كود:

حقوق التصميم
لنظرة عيون

اعملو التعديلات التالية عليه:

حقوق التصميم لنظرة عيون
إكتبو إسمكم أو مدونتكم أو أي موقع تبغوه


#FF99CC
هذا كود اللون غيروه إلى أي لون تبغوه


http://www.d3m-fni.blogspot.com

ضعو بداله رابط موقعكم



ثم اعملو معاينة اذا كل شي تمام اعملو حفظ.. 

ثم اللطش من أحد المنتديات لتعم الفايدة

دمتم/