إبحث في شبكة الإنترنت
بحث مخصص
كتاب زورو في رياضيات الربح من أدسنس
دورة تصميم ستايلات بلوجر
الدرس الماضي شفنا مكونات مدونة بلوجر و من اين يمكننا التعديل على ستايلها بكل سهولة.
و اليوم رح نتعلم صنع هيدر جميل و احترافي في مدونات بلوجر،،
باسم و نتكول على الله،،
1) التصميم بالفتوشوب:
- نختار ابعاد للهيدر (اللوجو) الذي سنقوم بتصميمه
- نختار الوان جميلة و تتناسب مع موضوع المدونة.
- نقوم بتحضير الصور و الايقونات التي سنستخدمها.
و نبدأ بالرسم و الخربشة،،
و مثلا انا طلع لي الهيدر التالي:
جميل جدا، اليس كذلك؟!
(قولوا ايه علشان مزعلش)
* * بعد ذلك انشئ مدونة تجارب،، و اختر هذا الستايل البسيط التالي،،
لانه سيساعدنا على التصميم خاصة للمبتدئين:
==========
2) تركيب الهيدر في المدونة:
-أ- التركيب من جهة عناصر المدونة:
ادخل الى مدونتك و الى عناصر المدونة Layout
ثم اضغط تحرير في منطقة الهيدر (رأس الصفحة)
و بعدين تطلعلك خيارات:
حيث يمكنك ان تقوم برفع الهيدر من جهازك او ان تقوم بوضع وصلة له في حالة انك
رفعته على استضافة صور اخرى.
ثم قم بالاختيار اما تكون الصورة فوق عنوان المدونة و الوصف
او تكون تحت المدونة و الوصف.
ثم اضغط على حفظ و ها قد قمت بتركيبه.
===============
-ب- التركيب من جهة تحرير HTML
و هاذي الطريقة جميلة كذلك و خاصة اذا كنت تفهم في ال CSS
اولا ادخل الى تحرير HTML
و ابحث لنا عن الكود التالي:
#header-wrapper {
و هنا ضع خاصية الخلفية مثل:
background: url(http://yourstite.com/image.jpeg) ;
و استبدل وصلة الصورة بمكان الصورة التي صممتها.
- لون خلفية صورة الهيدر:
اذا كانت صورة الهيدر لديك صغيرة،، فستحتاج الى لون الخلفية + مكان هذه الصورة في الخلفية:
background: #000000 url(http://www.site.com/image.jpeg) no-repeat top right;
حيث:
#000000 لون خلفية الهيدر
http://www.site.com/image.jpeg مكان صورة الهيدر
no-repeat لا نريد تكرير الصورة في الخلفية
top right مكان الصور: اعلى اليمين
==========
تعديل ستايل عنوان و وصف المدونة:
ابحث لنا عن:
#header h1 {
و ابدأ في تغيير القيم الى القيمة التي تريد
مثلا الخط:
font: 100% Arial;
قم بتغيير قيمة 100% الى قيمة تريدها او استعمل وحدة البكسل اذا اردت.
- و الآن الى وصف المدونة:
ابحث عن:
.descriptionwrapper {
و ابدأ في التعديل على راحتك و زي ما انت عايز.
تعديل عرض و ارتفاع الهيدر:
في خصائص الهيدر،،
width: 960px;
height:210px;
قم بتغييرها الى ما يناسبك.
و الآن انظروا النتيجة التي حصلت عليها:
قبل:
بعد:
قد تكون بشعة قليلا،، لأنني صنعتها في عجلة من امري، و انا واثق ان لديكم تصاميم و الوان افضل.
=======
خصائص CSS التي عدلت عليها في هذا الدرس:
#outer-wrapper
#header-wrapper
#header
h1.title
h1.title a, h1.title a:visited
#header .description
انظروا المثال الذي حصلت عليه:- مدونة تجارب نووية
و يمكنك تحميل الستايل في هذه المرحلة من الدورة: من هنا
========
هذه هي اهم الاشياء،، و هناك المزيد من الخصائص لا يمكننا ذكرها كلها.
و اذا كان لديك سؤال او اضافة،، فتفضل و ان شاء الله سأجيبك.
و ادعوا لي الله التوفيق لاكمال الدورة.
و اليوم رح نتعلم صنع هيدر جميل و احترافي في مدونات بلوجر،،
باسم و نتكول على الله،،
1) التصميم بالفتوشوب:
- نختار ابعاد للهيدر (اللوجو) الذي سنقوم بتصميمه
- نختار الوان جميلة و تتناسب مع موضوع المدونة.
- نقوم بتحضير الصور و الايقونات التي سنستخدمها.
و نبدأ بالرسم و الخربشة،،
و مثلا انا طلع لي الهيدر التالي:
جميل جدا، اليس كذلك؟!
(قولوا ايه علشان مزعلش)
* * بعد ذلك انشئ مدونة تجارب،، و اختر هذا الستايل البسيط التالي،،
لانه سيساعدنا على التصميم خاصة للمبتدئين:
==========
2) تركيب الهيدر في المدونة:
-أ- التركيب من جهة عناصر المدونة:
ادخل الى مدونتك و الى عناصر المدونة Layout
ثم اضغط تحرير في منطقة الهيدر (رأس الصفحة)
و بعدين تطلعلك خيارات:
حيث يمكنك ان تقوم برفع الهيدر من جهازك او ان تقوم بوضع وصلة له في حالة انك
رفعته على استضافة صور اخرى.
ثم قم بالاختيار اما تكون الصورة فوق عنوان المدونة و الوصف
او تكون تحت المدونة و الوصف.
ثم اضغط على حفظ و ها قد قمت بتركيبه.
===============
-ب- التركيب من جهة تحرير HTML
و هاذي الطريقة جميلة كذلك و خاصة اذا كنت تفهم في ال CSS
اولا ادخل الى تحرير HTML
و ابحث لنا عن الكود التالي:
#header-wrapper {
و هنا ضع خاصية الخلفية مثل:
background: url(http://yourstite.com/image.jpeg) ;
و استبدل وصلة الصورة بمكان الصورة التي صممتها.
- لون خلفية صورة الهيدر:
اذا كانت صورة الهيدر لديك صغيرة،، فستحتاج الى لون الخلفية + مكان هذه الصورة في الخلفية:
background: #000000 url(http://www.site.com/image.jpeg) no-repeat top right;
حيث:
#000000 لون خلفية الهيدر
http://www.site.com/image.jpeg مكان صورة الهيدر
no-repeat لا نريد تكرير الصورة في الخلفية
top right مكان الصور: اعلى اليمين
==========
تعديل ستايل عنوان و وصف المدونة:
ابحث لنا عن:
#header h1 {
و ابدأ في تغيير القيم الى القيمة التي تريد
مثلا الخط:
font: 100% Arial;
قم بتغيير قيمة 100% الى قيمة تريدها او استعمل وحدة البكسل اذا اردت.
- و الآن الى وصف المدونة:
ابحث عن:
.descriptionwrapper {
و ابدأ في التعديل على راحتك و زي ما انت عايز.
تعديل عرض و ارتفاع الهيدر:
في خصائص الهيدر،،
width: 960px;
height:210px;
قم بتغييرها الى ما يناسبك.
و الآن انظروا النتيجة التي حصلت عليها:
قبل:
بعد:
قد تكون بشعة قليلا،، لأنني صنعتها في عجلة من امري، و انا واثق ان لديكم تصاميم و الوان افضل.
=======
خصائص CSS التي عدلت عليها في هذا الدرس:
#outer-wrapper
#header-wrapper
#header
h1.title
h1.title a, h1.title a:visited
#header .description
انظروا المثال الذي حصلت عليه:- مدونة تجارب نووية
و يمكنك تحميل الستايل في هذه المرحلة من الدورة: من هنا
========
هذه هي اهم الاشياء،، و هناك المزيد من الخصائص لا يمكننا ذكرها كلها.
و اذا كان لديك سؤال او اضافة،، فتفضل و ان شاء الله سأجيبك.
و ادعوا لي الله التوفيق لاكمال الدورة.
التسميات
الاشتراك في:
تعليقات الرسالة (Atom)
18 تعليقات:
الأربعاء, يوليو 08, 2009
يقول...بالفعل هذه الطريقة بالتعليم جيدة
بارك الله بيك واتمنى ان تكمل سلسلة الشرح
الخميس, يوليو 09, 2009
يقول...السلام عليكم و رحمة الله و بركاته.
أخى العزيز أمتنى لك بكل الشكر و العرفان على طرحك لهذا الموضوع الرائع و أنا كنت فى أمس الحاجة لمعرفة طريقة صنع ستايل المدونة،و أتمنى من الله أن يوفقك فى أكمال الدورة.
شكرا جزيلا.
الأحد, يوليو 12, 2009
يقول...أخى الفاضل
السلام عليكم و رحمة الله و بركاته
إسمحوا لى أخى الفاضل أن أتقدم لكم بخالص شكرى و تقديرى على ما تقدمه للناشرون العرب من خلال مدونتكم
و إسمحوا لى أخى الكريم بطلب إن قضيته شكرتك و إن لم تقضه عذرتك
و طلبى يا أخى الكريم هو عمل هيدر لمدونتى ، فأنا ليست عندى أية خلفية بالفوتوشوب و التعامل معه لتصميم هيدر لمدونتى
و تفضلوا بقبول فائق إحترامى و تقديرى لشخصكم الكريم
أخوكم / ياسر محمد سمير محمد
الاثنين, يوليو 13, 2009
يقول...يعطيك العافيه اخوي ياسر بس والله ما فهمت شي
اني بس ابي اعرف شلون اسوي خلفيه ثابته
واللي بنص متحرك ..
ويعطيك العافيه
الاثنين, يوليو 13, 2009
يقول...اخي ياسر//
و الله لا استطيع لانشغالي بالعديد من الامور،،
و جرب التوجه للمنتديات المتخصصة بالفتوشوب و اكيد رح يسعدوك تصمم هيدر.
الاخت مجهولة الهوية//
خلفية ثابتة لهيدر المدونة (راس المدونة)
طبقي الخطوة:
2) تركيب الهيدر في المدونة:
-أ- التركيب من جهة عناصر المدونة
فقط و ان شاء الله تنجحين.
السبت, يوليو 25, 2009
يقول...مساء الخير
أخوي عندي كم من أستفسار يارب ماأثقل
أنا طبقت هالدرس على مدونتي وشوف وش عملت
رحت للتخطيط لكن ما يظهر لي نفس النافذه تبع التركيب أللي أنت عرضتها في تركيب الهيدر
ممكن يعني أن القالب عندي غير ؟؟
ياليت تفيدني أرجوك
ودي وتقديري
الأربعاء, أغسطس 05, 2009
يقول...الطريقة لا تشتغل مع التحديثات الجديدة لمدونات بلوجر
الأربعاء, أغسطس 05, 2009
يقول...الاخ زكريا //
اية تحديثات؟
ربما تقصد التحديثات التي كانت منذ سنتين !!
هذه الطريقة تشتغل بشكل جيد.
و يا ريت لو تضع مشكلتك بالتدقيق، حتى نساعدك.
فانا لم افهم اش شيء من تعليقك.
الاخت سارا//
قومي بتغيير الستايل الى الستايل الافتراضي المقترح.
مثل ما هو مبين. (ستايل denim)
و ان شاء الله موفقة
تحياتي
السبت, أغسطس 15, 2009
يقول...أنا بجد بشكرك
لكن في مشكله
لما أضع الصورة الهيدر
الصورة بتيجي خلف اللون الأزرق
و لو غيرت لون الخلفية بتختفي الصورة
متهيألي هناك بعض التفاصيل التي لم تقال ... صح ؟
السبت, أغسطس 15, 2009
يقول...و كمان يا ريت كيفية تمييز رد الكاتب
يعني انت عامل خلفية و حد
و كنان إزاي تحط تفاصيل
يعني مثلاً أيقونة جنب إسم المشارك
الأحد, أغسطس 16, 2009
يقول...الاخت CreativityCreature //
لا يوجد تفاصيل لم تقال، و اذا وجدت اي تفصيل سأوافيكم به.
و الخطأ الذي وقعت فيه هو انك قمت بتطبيق : تركيب الهيدر من جهة HTML
و حسب ما تريدين، اقترح عليك بشدة : -أ- التركيب من جهة عناصر المدونة.
تمميز رد الكاتب، ساحاول وضعه في موضوع منفصل حتى يكون الشرح وافي و كامل و الكمال لله.
شكرا على مرورك الجميل و تقبلي تحياتي.
الأحد, سبتمبر 06, 2009
يقول...جزاك الله خيرا وجاري التطبيق
تحيات مدونة الألمانية للجميع
الجمعة, ديسمبر 25, 2009
يقول...مشكور أخي على الدرس
و لكن عندما ثمت برفع الهيدر
ظهر منحاز إلى اليمين
كيف أجعله يظهر في الوسط ؟
و بارك الله فيك على هذه الدورة
الثلاثاء, ديسمبر 29, 2009
يقول...الاخ توفيق//
في ستايل الهيدر حاول جعله في الوسط،
عن طريق: text-align:center; و حذف float:right; ان وجدت في ستايل الهيدر.
و اذا لم تفهمني جيدا، اعطيني عنوان مدونتك، و سأحاول اكون اكثر تفصيلا.
شكرا لمرورك.
الأربعاء, يناير 27, 2010
يقول...السلام علييكم اخي باست ماكس انا من اشد المتابعين لمدونتك و قد اعجتني الدورة .
اما بخصوصوص سؤالي فهو كيف اغير لون هيدر و فولتر المدونة .. ليس الخط بل بدن الهيدر و الفولتر
http://make-money-4arab.blogspot.com/
الأحد, يناير 31, 2010
يقول...الاخ DODO //
هيدر مدونتك عبارة عن تدرج لوني في الاعلى.
ادخل الى تحرير HTML
و ابحث عن:
#header-wrapper {
و اضف بعدها:
background: #000000;
و غير كود اللون كما تحب.
بالنسبة للفوتر:
ابحث عن: background:#222222 none repeat scroll 0 0;
و استبدل كود اللون، بكود اللون الذي تحب.
الجمعة, أكتوبر 29, 2010
يقول...مشكووووووووووووووور اخي الكريم
وبارك الله فيك
الجمعة, أكتوبر 29, 2010
يقول...تسلم اخي الكريم عالطرح المميز
إرسال تعليق