+ + + + +
Share/Save/Bookmark

2008-04-18

انشاء خلفية للمدونة


BACKGROUND FOR YOUR BLOG

اصنع خلفية لمدونتك
------------------------------



كل اللى هاتحتاجه هو الصورة اللى انت عايز تعملها خلفية
بعد ماتجهز الصورة ارفعها على google pages creator
او ممكن ببساطه تجيب لينك بتاع اى صورة من اى موقع بس الاحسن انه يكون سريع

دلوقتى تروح جرى لصندوق الاكواد قبل ما اللينك يحمض
dashboard > template > layout > EditHTML
فى صندوق الاكواد هاتلاقى قطعة الكود دى






body {
background:$bgcolor;


ممكن تغير لون الخلفية فقط , وفى الحالة دى هاتضع كود اللون المطلوب
اى لون له كود واسم فى لغة ( اتش تى ام ال ) , علشان تعرف كود اللون اللى انت عايزه ادخل الموضوع ده
لوحة اسماء والوان الاكواد


مثال : لو عايز الخلفية تبقى حمراء هاتحط كود اللون الاحمر
هايبقا المنظر النهائى بالشكل ده






body {
background-color:#B38481;



اما لو عايز تعمل الخلفية عباره عن صورة يبقا لازم تبدل كود اللون بلينك الصورة
وهايبقا المنظر النهائى بالشكل ده






body {
background-image: url(put your image link here);



ضع لينك الصورة ما بين القوسين

_______________________________________

اما لو عايز تعمل صورة خلفية للاطار الجانبى فقط
to make a background photo for the sidebar


فى صندوق الاكواد ابحث عن قطعة الكود الخاصة بالاطار الجانبى و هايكون بالشكل ده او ما يشبهه






#sidebar-wrapper {
background-color:#000000;



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






#sidebar-wrapper {
background-image: url(ضع رابط الصوره هنا بين القوسين);



_____________________


نفس الكلام ممكن نطبقه على الاطار الاساسى
how to modify background of main part of your blog
(الاطار الاساسى هو المكان المخصص للتدوينات)


فى صندوق الاكواد ابحث عن قطعة الكود الخاصة بالاطار الاساسى






#main-wrapper {
background-color:ضع هنا كود اللون;



ممكن تغير اللون بنفس الطريقة
او ممكن تحط صورة






#main-wrapper {
background-image: url(ضع رابط الصوره هنا بين القوسين);



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


تعديلات على الصورة
1 - Repeat background image الصورة المكررة
ممكن تخلى الصورة تكرر نفسها بشكل افقى او بشكل رأسى

عدم تكرار





background-repeat: no-repeat;


تكرار افقى





background-repeat: repeat-x;


تكرار رأسى





background-repeat: repeat-y;



2 - Position background image الوضع المكانى للصورة






background-position: top left;


top center اعلى المنتصف
top right اعلى اليمين
top left اعلى اليسار
center left يسار المنتصف
center center فى المنتصف
center right يمين المنتصف
bottom left قاع اليسار
bottom center قاع المنتصف
bottom right قاع اليمين


3 - Static background image استاتيكية الصورة الخلفية
افتراضيا , عندما تضع صورة فانها تتحرك عندما يتحرك النص امامها
يعنى لما تعمل سكرول للنص هاتلاقى الصورة بتتحرك مع النص لفوق ولتحت ويمين وشمال
ممكن تخلى الصورة ثابته والنص فقط - او اى محتوى فى الصفحة - هو اللى يتحرك
عن طريق وضع القطعة دى







background-attachment: fixed;


لو فيه اى غموض او حد حاسس ان الشرح فيه حاجه ناقصة او غلط ياريت يقول

ولو حد حاسس انه استفاد حاجه من الموضوع ياريت يقول برضو عشان احس انى بعمل حاجه مفيده


C U



الصق لوجو المدونة عندك

اشكال بديلة اخرى من هـنـا

22 اضف تعليق , التعليقات:

Ashraf El Masry said...

ماشاء الله
شغل جميل
وجارى تجربته
ولى طلب لو سمحت
ممكن قوالب للبلوجر على اكتر من عمود لان السايد بار عريض زياده عن اللزوم

شكرا مقدما

Saudi Romantic said...

السلام عليكم

اخي العزيز

شكراً لك

فعلاً مدونه مفيده

ما قدرت اني اتصفح هذي المدونه بدون

ما اشكرك على مجهودك

جزاك الله خير

مستتر وجوباً said...

Thanks alot for this greet job

ضوء said...

ألف شكر ياأستاذ وائل على الشروحات المهمة والواضحة

عم بستفيد كتير :)
يعطيك العافية يارب

بس عندي استسفار بسيط بخصوص النقطة
لما جيت أغيّر على الخلفية بلون أو صورة
كان يمشي الحال ويظهر التغيير إللي بدي إياه

بس ألاقي أن اتجاه القالب تغيّر
يعني مثلاً القائمة الجانبية بدل اكانت على اليسار صارت على اليمين

بصراحة ماحبيت هالشقلبة , كيف فيني اتداركها .. ؟

Wael said...

ضوء

الحل فى الدروس الخاصة بالتعريب
هـــنــا

هـــنــا

هـــنــا

عقل مهوي said...

مجهودك لا يكفيه الشكر ولا المدح

ادعوا الله ان يجزيك خيرا باذن الله

بدرالنيــــل said...

شكرا ياغالى كتير فقد افادتنا الله يباركلك

norahaty said...

دكتور /وائل
شكراًكثيرأ كثيراً
اينعم متاخرة شوية
لكن الشكر واجب لاهله
فمرة تانية ومرات شكرا يادكتور

Shosha Mnvo0osha said...

اشكرك من اعماااااق قلبي

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

يارب تفهم اللي اقصدة وترد علي

وشكرا مرة ثانيه

Wael said...

Shosha Mnvo0osha


للاسف مش فاهم

انما لو قصدك ان الخلفية تملأ الشاشة
فده يستلزم حاجتين

انك تعمليها no-repeat

ويكون حجم الصورة, الطول والعرض يعنى(بالبيكسل) كبير , مطابق للمكان اللى هى خلفيه له

يارب اكون اجبتك

أبو عبيدة المصري said...

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

Wael said...

أبو عبيدة

صغر عرض الصور ببرنامج تحرير صور
او زود عرض السايدبار

أبو عبيدة المصري said...

شكرا كتير علي الشرح الواضح اجميل واهتمام بأسألتنا والرد عليها

محمد على said...

hgt a;v gd;

محمد على said...

اقصد شكرا ليك

Wael said...

شكرا يا ابو عبيدة

وشكرا يا محمد على


:)

صفحات مُلطخّة بحروفي said...

مشكور
لكن انه ليحيني متوهقة
قام ادور الكود ومالقيته عيوني راحت

.. said...

تحياتى القلبيه الى شخصك المحترم استاذ وائل بصراحه من شرحك الاكثر من رائع والسهل جداوالله عملت مدونه مخصوص ولسه بشتغل عليها ودة طبعا من مجهودك وشرحك
البسيط اشكرك من قلبى وجزاك الله كل خير ا

.. said...

ehab

mohamed esmail said...

مشكور على الشرح ودائما نتعلم منك كل جديد

koreaboo arabic said...

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

koreaboo arabic said...

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

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

اضف تعليقك هنا

اضغط على عنوان البوست لتظهر التعليقات