Arab-Publishers Sur FaceBook

إعصار الزوار

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


بحث مخصص

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

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

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

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

T'chat

أدلة مدونات

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

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

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

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

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


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



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

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

========


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

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


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

18 تعليقات:

كويست نت

الأربعاء, يوليو 08, 2009

يقول...

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


Mostafa

الخميس, يوليو 09, 2009

يقول...

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

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


simsim

الأحد, يوليو 12, 2009

يقول...

أخى الفاضل

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

إسمحوا لى أخى الفاضل أن أتقدم لكم بخالص شكرى و تقديرى على ما تقدمه للناشرون العرب من خلال مدونتكم
و إسمحوا لى أخى الكريم بطلب إن قضيته شكرتك و إن لم تقضه عذرتك
و طلبى يا أخى الكريم هو عمل هيدر لمدونتى ، فأنا ليست عندى أية خلفية بالفوتوشوب و التعامل معه لتصميم هيدر لمدونتى

و تفضلوا بقبول فائق إحترامى و تقديرى لشخصكم الكريم

أخوكم / ياسر محمد سمير محمد


مجهولـة الهويـ//ـه ..™

الاثنين, يوليو 13, 2009

يقول...

يعطيك العافيه اخوي ياسر بس والله ما فهمت شي

اني بس ابي اعرف شلون اسوي خلفيه ثابته
واللي بنص متحرك ..

ويعطيك العافيه


Souhail Omar

الاثنين, يوليو 13, 2009

يقول...

اخي ياسر//
و الله لا استطيع لانشغالي بالعديد من الامور،،
و جرب التوجه للمنتديات المتخصصة بالفتوشوب و اكيد رح يسعدوك تصمم هيدر.

الاخت مجهولة الهوية//
خلفية ثابتة لهيدر المدونة (راس المدونة)
طبقي الخطوة:

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

فقط و ان شاء الله تنجحين.


سارة

السبت, يوليو 25, 2009

يقول...

مساء الخير
أخوي عندي كم من أستفسار يارب ماأثقل
أنا طبقت هالدرس على مدونتي وشوف وش عملت
رحت للتخطيط لكن ما يظهر لي نفس النافذه تبع التركيب أللي أنت عرضتها في تركيب الهيدر
ممكن يعني أن القالب عندي غير ؟؟
ياليت تفيدني أرجوك


ودي وتقديري


Zakariae

الأربعاء, أغسطس 05, 2009

يقول...

الطريقة لا تشتغل مع التحديثات الجديدة لمدونات بلوجر


Souhail Omar

الأربعاء, أغسطس 05, 2009

يقول...

الاخ زكريا //
اية تحديثات؟
ربما تقصد التحديثات التي كانت منذ سنتين !!

هذه الطريقة تشتغل بشكل جيد.

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

الاخت سارا//
قومي بتغيير الستايل الى الستايل الافتراضي المقترح.
مثل ما هو مبين. (ستايل denim)

و ان شاء الله موفقة

تحياتي


CreativityCreature

السبت, أغسطس 15, 2009

يقول...

أنا بجد بشكرك



لكن في مشكله


لما أضع الصورة الهيدر

الصورة بتيجي خلف اللون الأزرق

و لو غيرت لون الخلفية بتختفي الصورة


متهيألي هناك بعض التفاصيل التي لم تقال ... صح ؟


CreativityCreature

السبت, أغسطس 15, 2009

يقول...

و كمان يا ريت كيفية تمييز رد الكاتب


يعني انت عامل خلفية و حد


و كنان إزاي تحط تفاصيل


يعني مثلاً أيقونة جنب إسم المشارك


Souhail Omar

الأحد, أغسطس 16, 2009

يقول...

الاخت CreativityCreature //
لا يوجد تفاصيل لم تقال، و اذا وجدت اي تفصيل سأوافيكم به.
و الخطأ الذي وقعت فيه هو انك قمت بتطبيق : تركيب الهيدر من جهة HTML
و حسب ما تريدين، اقترح عليك بشدة : -أ- التركيب من جهة عناصر المدونة.

تمميز رد الكاتب، ساحاول وضعه في موضوع منفصل حتى يكون الشرح وافي و كامل و الكمال لله.

شكرا على مرورك الجميل و تقبلي تحياتي.


Just Success

الأحد, سبتمبر 06, 2009

يقول...

جزاك الله خيرا وجاري التطبيق
تحيات مدونة الألمانية للجميع


توفيق

الجمعة, ديسمبر 25, 2009

يقول...

مشكور أخي على الدرس
و لكن عندما ثمت برفع الهيدر
ظهر منحاز إلى اليمين
كيف أجعله يظهر في الوسط ؟
و بارك الله فيك على هذه الدورة


Souhail Omar

الثلاثاء, ديسمبر 29, 2009

يقول...

الاخ توفيق//
في ستايل الهيدر حاول جعله في الوسط،
عن طريق: text-align:center; و حذف float:right; ان وجدت في ستايل الهيدر.

و اذا لم تفهمني جيدا، اعطيني عنوان مدونتك، و سأحاول اكون اكثر تفصيلا.

شكرا لمرورك.


dado

الأربعاء, يناير 27, 2010

يقول...

السلام علييكم اخي باست ماكس انا من اشد المتابعين لمدونتك و قد اعجتني الدورة .
اما بخصوصوص سؤالي فهو كيف اغير لون هيدر و فولتر المدونة .. ليس الخط بل بدن الهيدر و الفولتر
http://make-money-4arab.blogspot.com/


Souhail Omar

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

يقول...

الاخ DODO //
هيدر مدونتك عبارة عن تدرج لوني في الاعلى.
ادخل الى تحرير HTML
و ابحث عن:
#header-wrapper {

و اضف بعدها:

background: #000000;

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

بالنسبة للفوتر:
ابحث عن: background:#222222 none repeat scroll 0 0;

و استبدل كود اللون، بكود اللون الذي تحب.


Unknown

الجمعة, أكتوبر 29, 2010

يقول...

مشكووووووووووووووور اخي الكريم

وبارك الله فيك


Unknown

الجمعة, أكتوبر 29, 2010

يقول...

تسلم اخي الكريم عالطرح المميز


إرسال تعليق