Abu Ali
أحدث الأخبار
Loading...

الاكواد الاساسية لبناء قوالب بلوجر وكسب صداقة محركات البحث

السلام عليكم ورحمة الله وبركاته
بعد طول انتظار لباقى دورة تصميم قوالب بلوجر المجانية اليوم بإذن الله سوف اقوم بشرح اول درس عملى من دروس هذه الدورة والتى سوف نقوم بشرح رأس الصفحة الخاصة بالقالب ووضع الأكواد الخاصة بها ووضع عنوان المدونةبشكل مميز وكسب صداقة محركات البحث سيو " Search Engine Optimization ".
مدونة سامكو | شرح الاكواد الاساسية لبناء قوالب بلوجر وكسب صداقة محركات البحث SEO
بسم الله نبدأ
أولا:  أرجو من الجميع ان يركز جيدا فى هذا الدرس لأنه سيكون درس ثابت هتحتاجه فى تصميم أى قالب من قوالببلوجر مثل الدباجة اللى بتتكتب فى اى خطاب.

البداية

1- قم بالرجوع الى هذا الدرس " مقدمة الدورة وشرح لما سنقدمه فيها " وتحميل المتطلبات الخاصة بهذه الدورة والتى حان استخدامها.
2- بعد التحميل قم بفتح برنامج " ++Notepad " وقم بعمل ملف جديد وخلى الاسم " samcoTemplats " ويكون الامتداد " xml " .                                        تابع الصور للتوضيح
مدونة سامكو | شرح الاكواد الاساسية لبناء قوالب بلوجر وكسب صداقة محركات البحث SEO

الخطوة الاولى

رأس الصفحة وأساسيات XML

فى هذا الجزء سوف نقوم بوضع أسياسيات القالب المتعارف عليها وهى عبارة عن عدة وسوم " Tags " وهى تبدأ بـ ">"  وتنتهى بـ " < " وهى :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
</html>
هذه السطور السابقة ثابتة لا تتغير وهى عبارة عن تعريف بنسخة XML والترميز الخاصة باللغة وايضا وسوم لتعريف المتصفحات على مدونتك او صفحتك انها مكتوبة بلغة XHTML ونسختها 1.0

بداية الكود الخاص بالمدونة<html
نهاية الأكواد ونهاية الصفحة</html>
كل الاكواد التى سوف يتم وضعها فى القالب بعد ذلك سيم وضعها بين هذا الوسم
واحب ان اوضح ان هذه القيم والاسطر لا تتغير سوف نحتفظ بها فى اى قالب نقوم بتصميمه 

الخطوة الثانية

<head> <b:include data='blog' name='all-head-content'/>



</head>
قم بوضع هذا القالب قبل نهاية الكود السابق</html>
وايضا هذا الوسم له بداية ونهاية مثل السابق ومثل باقى الاكواد فكل كود يبدأ ببداية ولابد ان يكون له نهاية وهذا الكود يعنى ان الاكواد والجافا و CSS التى توضع بين هذا الوسم سوف تظهر فى جميع الصفحات

الخطوة الثالثة

تعريف عنوان المدونة "Title "

فى هذا الحزء سوف نقوم بوضع الكود الخاص بعنوان المدونة وعنوان المواضيع ايضا
قم بوضع هذا الكود قبل نهاية الكود السابق</head>
<b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.pageTitle/></title>
<b:else/>
<title> <data:blog.title/> | <data:blog.pageName/></title>
</b:if> 
وشرح هذا الكود هو انه فى حال وجودك فى الصفحة الرئيسية للمدونة سيكون العنوان الظاهر هو اسم المدونة
وفى حال تواجدك فى اى صفحة من صفحات الموضوع سيكون العنوان الظاهر هو عنوان المدونة متبوعاً بعنوان الموضوع
وده شرح الكود
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title>عنوان المدونة</title>
<b:else/>
<title>  عنوان المدونة   |  اسم الموضوع او الصفحة </title>
</b:if> 
افهمت ببساطة 
لو اسم مدونتك قالب سامكو يبقى وانت واقف فى الصفحة الرئيسية هيبقى الاسم الظاهر هو " قالب سامكو "
مدونة سامكو | شرح الاكواد الاساسية لبناء قوالب بلوجر وكسب صداقة محركات البحث SEO
ولو انت موجود فى صفحة موضوع دورة تصميم قوالب بلوجر هيبقى الاسم الظاهر هو " قالب سامكو | دورة تصميم قوالب بلوجر "
مدونة سامكو | شرح الاكواد الاساسية لبناء قوالب بلوجر وكسب صداقة محركات البحث SEO

اكيد فى ناس بتسأل ليه كل ده على الجزئية دى ؟
اقولكم ان الجزئية دى مهمة جدا
لأنها بتفيدك فى ارشفة مواضيعك بطريقة كويسة ومرتبة

الخطوة الرابعة

عمل كلمات دلالية " meta keywords " بطريقة أتوماتيكية

الخطوة دى مفيدة جدا هتفيدنا أننا هنعمل لمدوناتنا طريقة اتوماتيكية لعمل كلمات دلالية تعمل على كسب ثقة محركات البحث لمدونتك وبساطة ان كل كلمة هتكتبها فى اسم الموضوع هتكون وسيلة للبحث للوصول الى موقعك من خلال محركات البحث Google و Bing و  غيرها.
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName + data:blog.title' name='Keywords'/></b:if>
وكده لازم تخلى بالك من ان تكتب اسماء المواضيع بدقة تختار كلماتك بعناية وتخلى بالك جدا من الاخطاء الإملائية.

كده خلصنا الجزء الخاص برأس القالب


قبل ما بندا الجزئية التالية نضع هذا الكود بعد الكود السابق
<b:skin><![CDATA[


]]></b:skin>
وسيتم وضع الخصائص الخاصة بالقالب ومكونات القالب والعناصر الخاصة به بين هذا الكود " وهذه الخصائص تعرف بـ CSS وتم شرحها بشكل مبسط فى هذان الدرسان

وسيكون الكود النهائى حتى هذه النقطة هو كالتالى :-
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><head> <b:include data='blog' name='all-head-content'/>

<b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.pageTitle/></title>
<b:else/>
<title> <data:blog.title/> | <data:blog.pageName/></title>
</b:if><b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName + data:blog.title' name='Keywords'/></b:if><b:skin><![CDATA[







]]></b:skin> </head> </html>

الخطوة الخامسة

تعريف حقوق القالب

النقطة دى مهمة جدا وهى عبارة عن تعريف باسم القالب ونسخته ومصممه ومعربه ان وجد وايضا الروابط الخاصة بهم ودى مهمتا وضع حفظ الحقوق والتعب والمجهود لكل مجتهد
/* -----------------------------------         
Name:     samco
Date:     11 Jun 2011
Desined by: Mohamed Sami
URL : www.samco-b.com
-------------------------------------- */
وده شرح بسيط للتعريف
اسم القالب
Name: samco
تاريخ التصميم
Date: 11 Jun 2011
اسم المصمم
Desined by: Mohamed Sami
الرابط الخاص بالمصمم
ويمكنك ايضا وضع ما تشاء لتعريق القالب الذى قومت بتصميمه
س 1  :  اكيد فى ناس بتسأل ليه ايه فائدة الخطوط والنجمة اللى موجودة بالأحمر ؟
اقولكم السبب
ان الخطوط دى بتخلى الكلام اللى انت كاتبه ده متعرف انه كلام وبس يعنى مش كود ولا CSS مفيدة للقالب لازم يدور عليها المتصفح لكن هى حفظ للحقوق فقط ويراها المتصفح على انها نص فقط

س 2 : طيب هى ممكن تفيدنا فى ايه تانى ؟
اقولكم
انكم ممكن تستخدموها فى عمل فواصل بين الخصائص CSS والمتعلقة بمكونات القالب والتى تم شرحها فى هذا الدرس  نظرة عامة على مكونات قوالب بلوجر
وكده يبقى خلصنا درس اليوم ويبقى ده

الكود النهائي

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><head> <b:include data='blog' name='all-head-content'/>

<b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.pageTitle/></title>
<b:else/>
<title> <data:blog.title/> | <data:blog.pageName/></title>
</b:if><b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName + data:blog.title' name='Keywords'/></b:if><b:skin><![CDATA[
/* -----------------------------------
Name: samco
Date: 11 Jun 2011
Desined by: Mohamed Sami
URL : www.samco-b.com
-------------------------------------- */





]]></b:skin> </head> </html>
قم بحفظ الملف وانتظرونا فى الدرس القادمة لتكملة ما بدأناه
Read more »

تصميم قوالب بلوجر : تصميم هيدر يضم إعلانات أدسنس لمدونات بلوجر

السلام عليكم ورحمة الله وبركاته
اليوم بإذن الله تعالى موعدنا مع درس جديد من دروس دورة تصميم قوالب بلوجر المجانية وهو عبارة عن تصميم عن هيدر احترافى بسيط يضم قسمين فالقسم الاول يضم الجزء الخاص برأس الصفحة والقسم الثانى عبارة عن اداة لإضافة اى اعلانات او اضافات.
مدونة سامكو | دورة تصميم قوالب بلوجر : تصميم هيدر يضم اعلانات ادسنس لمدونات بلوجرفى الدرس السابق قمنا بشرح عمل الهيكل العام للقالب وأيضا قمنا بعمل الخصائص العامة للبادى وأيضا عمل الخصائص العامة للروابط  " يمكنك مراجعة الدرس من هنا " 
تنويه :
1- لابد من التركيز فى هذا الدرس لأننا سنقوم بعمل تجزئة للقالب وستكون هذه الجزئية مكررة
2-  يرجى مراجعة هذه الدروس
     نظرة عامة على مكونات قوالب بلوقر
     شرح أساسيات CSS - الجزء الأول
     شرح أساسيات CSS - الجزء الثانى والاخير

1- الشكل العام للقالب0

مدونة سامكو | دورة تصميم قوالب بلوجر : تصميم هيدر يضم اعلانات ادسنس لمدونات بلوجر

2- تصميم الهيكل الخارجى " samco-body "

وهو عبارة عن الجزء الذى يضم فى طياته كل مكونات القالب والأقسام الجانبية 
1- نجيب الملف اللى عملناه فى الدرس السابق واللى فيه الاكواد السابقة  " من هنا " 
2- انا مش هاكتب الكود السابق كله لكن هاكتب الجزء اللى هاشتغل من بعده وهيكون دايما مميز بلون أحمر 
الكود السابق 
a:active {     
    color:#000000;
    text-decoration: underline;
    }
                                هنا هنحط تعريفات الخصائص       

]]></b:skin> </head> <body>

                            هنا هنحط اكواد التصميم والتقسيم                      
</body> 
</html>
نيجى بقى ونعمل الهيكل نبدأ بعمل التقسيم وبعدين نعمله الخصائص CSS 

كود الهيكل الخارجى

بعد كلمة
<body> 
يتم وضع الكود التالى
<div id='samco-body'>

 </div>
<div>
ده بداية الكود طبعا تختلف التعريفات اللى Div زى ما هنشوف لاحقا ودى بنسميها التاج
id
دى الجزء الخاص بالتعريف
'samco-body'
اسم المعرف " يمكنك تغيره براحتك زى ما تحب" طبعا بنحطه بين قوسين
</div>
دى نهاية الكود
دى مكررة فى أى تعريق اللى بيختلف حاجتين اسم المعرف أو اداة التعريف " id "  
وكده يبقى علمنا التصميم طيب هنسيبه كده طبعا لا لازم نعمله الخصائص بتاعته 

خصائص الهيكل الخارجى " samco-body"

نحط الكود وده ونشرحه واحدة واحدة 
#samco-body { 
    margin: 0 auto;
    overflow: hidden;
    width: 950px;
}
دى الخصائص اللى انا اخترتها للهيكل الخارجى انت تقدر تغيرها زى ما تحب وتعمل معاينة علشان تشوف اختياراتك مثلا تحط خلفية او تكبر او تصغر العرض زى ما بتحب على حسب اختيارك 
ملاحظة هامة : احنا هنا بدأنا الكود بــ  # علشان التاج كان " ID " وفى حال وجود " CLASS" يتم وضع نقطة " . "

وهيكون الشكل النهائى للكود كده

a:active {     
    color:#000000;
    text-decoration: underline;
    }  #samco-body { 
    margin: 0 auto;
    overflow: hidden;
    width: 950px;
}

]]></b:skin> </head> <body>   <div id='samco-body'>


</div>                     
</body> 
</html>

3- تصميم الهيدر "samco-header"

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

المرحلة الاولى : عمل منطقة الهيدر بشكل عام

هنبدأ بكون التقسيم  " يمكنك وضع اسماء المكونات كما ترغب اللى هى باللون الاسود الغامق   " 
الكود 
<div id='samco-header'>
   
</div> 
وزى ما شرحنا قبل كده حطينا بداية الكود وبعدين حطينا اداة التعريف ثم وضعنا اسم المكون او المعرف  ثم أغلقنا الكود وده مهم اوى 
الخصائص CSS
#samco-header {
    background:#335506;
    color: #ffffff;
    height: 150px;
    overflow: hidden;
    padding: 0;
    width: 100%;
  margin-top: 10px;
}
هام
- يتم وضع الخصائص بعد نهاية الخصائص السابقة
- يتم وضع كود التقسيم داخل الكود السابق 'samco-body'
قم بعمل معاينة للقالب وهتلاقى دى النتيجة " طبعا غير فى الخصائص زى ما تحب " 
مدونة سامكو | دورة تصميم قوالب بلوجر : تصميم هيدر يضم اعلانات ادسنس لمدونات بلوجر

المرحلة الثانية : تقسيم الهيدر من الداخل الى قسمين

شغلنا فى المرحلة دى هيكون داخل كود الهيدر السابق عمله وهيتم فيه تقسيم الهيدر الى جزئين واحد يمين والثانى يسار مثل الشكل ده 
مدونة سامكو | دورة تصميم قوالب بلوجر : تصميم هيدر يضم اعلانات ادسنس لمدونات بلوجر  
زى ما عملنا قبل كده بالظبط هنجيب الكود السابق ونبدأ نشتغل عليه 
<div id='samco-header'> <div id='samco-Rightheader'>

</div> <div id='samco-Leftheader'>

</div> </div> 
برضة زى ما عملنا فى الاول بنفس الطريقة عملت الكود الخاص بالجزء اليومين وبعد لما خلصت وقفلت الكود بدأت وعلمت الجزء اليسار بنفس الطريقة وقفلت الكود وكل ده كان داخل الكود السابق اللى باللون الاحمر 
نشوف الخصائص CSS
فى الجزء ده لازم نخلى بالنا من حاجة مهمة وهى بكل بساطة اننا بنرتب صندوقين صغيرين داخل صندوق كبير يعنى لازم نخلى بالنا ان مثلا واحد لازم يجى يمين والتانى يسار ويكون بينهم وبين بعض مسافة ويكون برضة فى مسافة بينها وبين جدران الصندوق الكبير      " طبعا كل واحد وميوله واختياراته " 
#samco-Rightheader {
    float: right;
    margin: 25px 10px 10px;
    text-align: right;
    width: 400px;
}

 #samco-Leftheader {
float: left;
margin: 50px 10px 10px 30px;
width: 468px;
}
وكده يبقى عملنا الجدران للغرف اللى فى البيت وبما اننا خلصنا غرفة يبقى نفرشها بقى والفرش هيتعمل كده 

المرحلة الثالثة : انشاء الجزء الخاص باضافة الادوات فى الهيدر

الجزء ده هام جدا لأنه اول ارتباط معانا بعناصر وأدوات الصفحة وفى الجزء ده اللى هنعمله فى الجزء الخاص بالقسم اليمين هو نفسه اللى هنعمله فى القسم الشمال وده الشكل اللى عاوزين نوصل ليه
مدونة سامكو | دورة تصميم قوالب بلوجر : تصميم هيدر يضم اعلانات ادسنس لمدونات بلوجرالجزء الخاص باضافة الاداة بنسميه Section زى اللى شرحناه قبل كده فى التعريف والتقسيم لكن مع اختلاف بسيط شوفوا معاى
<b:section  id='Rightheader' showaddelement='yes'>

</b:section>
<b:section>
ده بداية الكود واسمه بيدل عليه انه هيعمل لنا اداة موجوة فى عناصر الصفحة
id='Rightheader'
دى الجزء الخاص بالتعريف وانت بتختار براحتك الاسم
showaddelement='yes'
دى الجديدة هنا ومعناها انك عاوز تشوف كلمة " اضافة اداة " شوف الصورة السابقة
</b:section>
دى نهاية الكود " زى ما بنقفل اى كود مفس الكلمة الاولى مع اضافة الشرطة المايلة
يارب يكون الدرس لحد كده سهل والشرح مستوفى كويس
والكود ده طبعا هيكون داخل الكود الخاص بالقسم اليمين اللى عملناه سابقا  " راجع المرحلة الثانية "
وهيكون الشكل الخاص بالكود هو لحد المرحلة دى بعد اضافة اداة القسم الشمال بمثل الطريقة هو
<div id='samco-header'> <div id='samco-Rightheader'>   <b:section  id='Rightheader' showaddelement='yes'>

</b:section>
</div> <div id='samco-Leftheader'> <b:section  id='Leftheader' showaddelement='yes'>

</b:section>
</div> </div> 
قم بحفظ القالب وانتقل الى تبويب عناصر الصفحة وانتقل معنا للمرحلة القادمة

المرحلة الرابعة : اضافة أدوات الهيدر

بعد الدخول الى تبويب عناصر الصفحة أو التخطيط قم باضافة أداة " رأس الصفحة " فى القسم اليمين   
مدونة سامكو | دورة تصميم قوالب بلوجر : تصميم هيدر يضم اعلانات ادسنس لمدونات بلوجر  ثم قم باضافة " أداة أدسنس " فى القسم الشمال وتكون مقاس " 60 * 468 "
مدونة سامكو | دورة تصميم قوالب بلوجر : تصميم هيدر يضم اعلانات ادسنس لمدونات بلوجر
وهيكون الشكل النهائى كده
مدونة سامكو | دورة تصميم قوالب بلوجر : تصميم هيدر يضم اعلانات ادسنس لمدونات بلوجرنيجى بقى للخطوة الاخيرة واللى هى خاصة بالخصائص وتظبيط الشكل والالوان

المرحلة الاخيرة : عمل خصائص الهيدر والاضافات

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

نبدأ بالجزء اليمين وده اللى هو فيه عنوان المدونة ووصف المدونة الخاصة بك


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

#Rightheader {
    padding: 10px;
    overflow: hidden;
}

 #Rightheader h1 {
    color: #ffffff;
    font-family: tahoma,Helvetica,;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 5px;
}#Rightheader h1 a:hover  {
   color: #E5E5E5;
    text-decoration: none;
} 
#Rightheader .description {
    color: #E5E5E5;
    font-size: 15px;
    margin-top: 0;
    padding-right: 10px;
} 
هنا احنا مش عملنا شئ عبقرى لكن احنا جيبنا شوية حاجات من اللى اخدناه فى الدروس السابقة وركبناها على الجزء اللى بنشتغل عليه        ازاى ؟                                     يمكنك معاينة القالب من هنا
نبدأ بالكود الاول وهو تعريف خصائص القسم اليمين اللى عملناه وهو زى اللى فات بالظبط
ثم بعد ذلك نخش على الجزء الداخلى الخاص بالأداة اللى احنا حطيناها

أ – عنوان المدونة :
احنا عندنا عنوان المدون اللى هو " تصميم مدونة سامكو " اتوماتيك تلاقيه متعرف بالتاج" H1 " ودى بتعرفها بالخبرة
وده هو الكود اللى اضافته الاداة بتاع رأس الصفحة   " الجزء الذى يخص عنوان المدونة "
<h1 class='title' style='background: transparent; border-width: 0px'>
  <b:include name='title'/>
</h1> 
فى الحالة دى بتعرف CSS الخاصة به ازاى
H1+مسافة+#Rightheader
تاج العنوان+مسافة+تعريف المكون
وباقى الخصائص انتم بقى عارفينها واللى محتاج معلومات عنها يرجع للدروس السابقة
هى حاجات بسيطة ( خلفية + خط + لون + مسافات + حجم الخط ).
الكود الثانى المكتوب باللون الازرق ده اضافة من عندى انا ركبته علشان اعرفك ان ده رابط وممكن ازود عليه ان لما احرك عليه الماوس يتغير فى الخصائص بتاعته فأضافت الى الكود خاصة A:HOVER
وبنفس الطريقة السابقة
a:hover+H1+مسافة+#Rightheader

ممكن تزود خصائص وتركبها بنفس الطريقة وتعمل معاينة وتجرب ولو فى شئ لا تترد فى ترك تعليق
ب – وصف المدونة :
نيجى للجزء الثانى وهو وصف المدونة " تصميم هيدر لدورة قوالب بلوجر  "
بنفس الطريقة هنركب الكود ده لكن مع اختلاف انه تابع للهيدر ليس معرف بتاج لحاله وبالتى يكون تعريفه
.description
+مسافة+#Rightheader
يعنى اضافنا قبل كلمة التعريف " description " نقطة ثم نقوم بكتابة الخصائص كما نريد

كده نكون خلصنا القسم اليمين وتمام التمام   " قم بالحفظ وعمل المعاينة وشوف رأيك ايه "

نيجى للجزء الشمال هو مش هيختلف كتير

الجزء ده احنا حاطين فيه اعلان ادسنس حاجة بسيطة يعنى شغلها بسيط لكن فيها جديد عن الجزء اليمين
نشوف الاكواد
#Leftheader {
    overflow: hidden;
}

 #Leftheader .widget {
    float: left;
    padding: 0 10px 0 0;
    width: 468px; 
    text-align: center;
}a
نبدأ بالكود الاول وهو تعريف خصائص القسم الشمال اللى عملناه وهو زى اللى فات بالظبط
ثم بعد ذلك نخش على الجزء الداخلى الخاص بالأداة اللى احنا حطيناها
الجزء الخاص بــ  " widget "
التاج ده هتلاقيه مكرر معاك فى اماكن كتير جدا كل لما تيجى تضيف اداة هتلاقى الكود ده ظاهر تحت " section "
وطريقته زى اللى فاتت وهى   description
.widget
+
مسافة
+
#Rightheader
وبرضه تضيف الخصائص اللى انت عاوزها
وبكده اقدر اقول مبروك عليك الهيدر الجديد
مدونة سامكو | دورة تصميم قوالب بلوجر : تصميم هيدر يضم اعلانات ادسنس لمدونات بلوجر
Read more »

الدرس الثانى : شرح أساسيات CSS الجزء الأول

السلام عليكم ورحمة الله وبركاته 
فى الدرس السابق قومنا بشرح مكونات قوالب بلوجر الاساسية بشكل عام واليوم بإذن الله موعدنا مع الدرس الثانى مندورة تصميم قوالب بلوجر المجانية وهو عبارة عن ملخص وعرض سريع عن CSS وكيف يمكن الاستفادة منها فى دروسنا القادمة فى هذه الدورة .
مدونة سامكو | الدرس الثانى : شرح أساسيات CSS الجزء الأول

ما هى CSS ?


 هى عبارة عن اختصار الى Cascading Style Sheets والتى تعنى صفحات الانماط المتتالية وهى التى تجعلك تتحكم فى تصميمك وفى الشكل الذى يظهر به فى النهاية ويجب قبل معرفتها أن تكون على دراية ولو بسيطة عن Html لكن لا تقلق كل شيء سيتم شرحة بطريقة سهلة وبسيطة.

وكتبسيط لشرح CSS 


 تخيل انك تبنى بيت وقمت بتجهيز كل ما يلزم  للبيت من طوب ورمل وأسمنت وخشب وأسلاك ولمبات ودهانات وغيره وقومت بعمل كل التجهيزات المطلوبة  ( وهذه تعتبر الأكواد التى وضعتها HTML فى قوالب بلوجر او فى تصميم الموقع)                    هل ظهر شكل البيت بالمظهر المطلوب ؟                  بالتأكيد لا. 

 مدونة سامكو | الدرس الثانى : شرح أساسيات CSS الجزء الأول

 هنا يأتى دور CSS وهو الفنى والمهنى الذى يقوم بترتيب كل ما سبق تجهيزه للبيت ( على البناء ان يقوم بتقسيم البيت من خلال الطوب والاسمنت )( وعلى الكهربائى ان يقوم بتنوير البيت ) ( وعلى مهندس الديكور أن يقوم يتزين البيت ) هكذا فى النهاية نصل بالبيت الى الشكل المرغوب به ( هى نفسها الوظيفة التى تقوم بها CSS فى قوالب بلوجر وتصميم المواقع ) تقوم بترتيب كل المكونات التى تم شرحها بشكل عام فى الدرس السابق ( من هنا ). 

 مدونة سامكو | الدرس الثانى : شرح أساسيات CSS الجزء الأول

بعض أساسيات CSS الهامة التى سنستخدمها باستمرار


 قبل البدء احب أن أوضح شيئا هاما جدا أنه عند إضافة أى مكون من مكونات قوالب بلوجر يكون له تعريف خاص به مثل الهيدر “ Header “  ويتم تعريفه عن طريق إما  ID أو  Class  والفرق بينها كالتالى :- 
*   CLASS    يمكن استخدام الاسم المعرف به اكثر من مرة فى القالب . 
*      ID       يمكن استخدامه مرة واحدة فقط فى القالب . 
وعند تعريفهم بواسطة CSS
- CLASS    يتم وضع علامة (. ) قبل الاسم المعرف به 
-    ID        يتم وضع علامة ( # ) قبل الاسم المعرف به

المكونات الخاصة بــ CSS

 

selector { 
property : value ;
}
- SLECTOR عبارة عن التعريف التى تم وضعه فى الاكواد عند بدء تكوين البنية الاساسية للقالب. 
- PROPERTY عبارة عن الخصائص التى تحب ان يكون عليها القالب من الخط والخلفية والالوان وغيرها. 
- VALUE هى عبارة عن القيمة الخاصة بالخصائص ( مثال الخط& : 20 واللون : أحمر والخلفية : اسود ) 
- {       }    هى عبارة عن الاقواس الخاصة ببداية تعريف الخصائص ونهايتها .

بعض الاساسيات الهامة فى تصميم  blogger templates

 

1- الخطوط وما يلزمها “ Font “

.Header {
    font-family: tahoma , Times New Roman, Arial;
    font-size:30px;
    font-weight:bold;
    color: #FFFFFF;
    font-style: italic;
}

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

- نوع الخط “ font-family “


 نوع الخط ويمكنك اختيار ما تشاء من الخطوط ووضعها بحسب الترتيب لانه سيختار الأول فالثانى فسيختار Tohoma وان لم يجده سيختار Times New Roman وهكذا . 
مثال :
مدونة سامكو | الدرس الثانى : شرح أساسيات CSS الجزء الأول

- حجم الخط “ font-size “


 حجم الخط يمكنك اختيار ما تشاء كل ما عليك هو تغير الرقم 30 إلى ما تريد ويجد الكثير من القياسات منها 
(pt , % , em ) إلا أننى افضل التعامل مع px.
مثال :

 مدونة سامكو | الدرس الثانى : شرح أساسيات CSS الجزء الأول

- سماكة الخط “ font-weight “


 سماكة الخط يمكنك الاختيار من 
- Normal      عادى                                               -    Bold         تخين 
مثال :
مدونة سامكو | الدرس الثانى : شرح أساسيات CSS الجزء الأول

- لون الخط “ color “


 لون الخط ويمكنك اختيار ما تريد من الالوان ووضع الرقم الكودى الخاص بالألون ويوجد العديد من البرامج التى تدعم تناسق الالوان وايضا تمدك بالاكواد الخاصة بها سيتم وضعها فى الدروس التالية ان شاء الله. 
مثال :
مدونة سامكو | الدرس الثانى : شرح أساسيات CSS الجزء الأول


- طراز الخط “ font-style “


 سماكة الخط يمكنك الاختيار من 
- Normal      عادى                                              -  italic          مائل 
مثال :
مدونة سامكو | الدرس الثانى : شرح أساسيات CSS الجزء الأول

مثال عام على الخطوط وما يلزمها “ Font “


Read more »

الدرس الثالث : شرح أساسيات CSS الجزء الثانى والاخير

السلام عليكم ورحمة الله وبركاته
فى الدرس السابق من دورة تصميم قوالب بلوجر المجانية قمنا بشرح الجزء الأول من أساسيات CSS والذى تناولنا فيه ( الخطوط وما يلزمها “ Font “ ) وفى هذا الدرس بإذن الله سأقوم بتناول باقى الأساسيات الهامة.
CSS2
أساسيات CSS الهامة:

1- الخطوط وما يلزمها “ Font “

تم شرحه فى الدرس السابق ( يمكنك مراجعته من هنا ).

2- النصوص والفقرات “ Text “

أى كل ما يمكن استخدامه لتنسيق الكتابة والنصوص لكى تظهر بشكل جيد
H1 { text-indent: 20px; text-align: right; text-decoration: underline; letter-spacing: 6px; text-transform: capitalize; }
أ- text-indent  وهى عبارة عن المسافة البادئة التى تسخدم فى بداية الفقرة لتضيف شكل جمالى.
ب- text-align  وهى تعنى محاذاة النص ويمكنك التبديل بين (محاذاة يمين Right - محاذاة يسار  Left – محاذاة فى الوسط Center – محاذاة من اليمين واليسار justify ).
جـ- text-decoration وهى تسخدم فى زخرفة النص واضافة تأثيرات عليه ويمكن التبديل بين ( وضع خط تحت النص underline – وضع خط فوق النص overline – وضع خط فى منتصف النص line-through ).
د- letter-spacing وهى تعنى المسافة بين الحروف فى الكلمة وتستخدم فى العناوين او الفقرات .
هـ- text-transform وهذه الخاصية تنفعنا فى التعامل مع النصوص المكتوبة باللغة الانجليزية لانها تقوم بتغير الحروف من صغير الى كبير أو العكس بشكل تلقائى ويمكنك التبديل كما ترغب بين قيمها .
- ( جعل اول حرف كبير  capitalize  - مثال :  samco  سوف تصبح Samco ).
- ( جعل النص كله صغير  lowercase - مثال :  SAMCO سوف تصبح samco  ).
- ( جعل النص كله كبير  uppercase - مثال :  samco  سوف تصبح SAMCO ).
- ( عدم اظهار اى تأثيرات     none    ).

3- الروابط “ Links “

وهى عبارة عن تنسيق الراوبط الخاصة بك فى مدونتك
a:link {
color:#000000;
}
a:visited {
color:#666666;
}
a:hover {
color:#222222;
}
a:active {
color:#050505;
}

أ- a:link  وهى تخص الرابط الموجود بمدونتك
وليكن انك تحب ان يكون لون الروابط الخاصة بك أن يكون لون ازرق ( تقوم باستبدل اللون اللى بالازرف ووضع الذى تريد )            مثال : الرابط هنا
ب- a:visited وهى تخص الروابط التى قام الزائر بزيارتها
بشكل مبسط عندما يقوم الزائر الخاص بمدونتك بزيارة رابط ما سوف يجد ان لون هذا الرابط مختلف عن الروابط الاخرى التى لم يقم بزيارتها وليكن انك تريدها ان تكون باللون الاحمر ( قم باستبدال اللون الاحمر باللون الذى تريد )                   مثال : الرابط هنا   
جـ- a:hover وهذه الخاصية مرتبطة بمرور الماوس على الرابط اى كان تم زيارته ام
لا أى عندما تقوم بتحريك الماوس على الرابط سوف تقوم هذه الخاصية بالعمل وليكن انك تريد انه عند تحريك الماوس أن يكون شكل الرابط باللون الاحمر بدلا من الازرق  ( تقوم باستبدل اللون اللى بالازرف ووضع الذى تريد )                    مثال : الرابط هنا  
د- a:active وهى تخص الرابط الذى تتواجد عليه فى حينها
أى عندما تقوم بعمل روابط لمواضيع مدونتك على الاعمدة الجانبية للمدونة للتسهيل على الزوار لتصفحها وعند الدخول على رابط موضوع معين سترى ان رابط هذه الموضوع تغير الى لون اخر مثلا  ( كل ما عليك ان تقوم بتغير اللون الأخضر إلى ما تحب )
تنويه هام جدا :
- يمكنك استخدام الدروس السابقة واللاحقة ان شاء الله فى هذه النقطة أى يمكنك تغير الالوان والخطوط والمحاذاة والخلفية وكل ما تريد أن يكون عليه المظهر فى كل حال.
- كما يمكنك ايضا استخدام الخصائص السابقة مع كل مكون من مكونات قوالب بلوجر على حدى ( بشكل مبسط يعنى يمكن استخدام هذه الخصائص لروابط عناوين المواضيع فقط واستخدام خصائص اخرى لروابط القوام الجانبية وذلك سيتم معرفته ان شاء الله فى الدروس القادمة مع دراسة كل مكون ).

4- خاصية “ Padding “ وخاصية “ Margin “

الخاصيتين يتشابها فى كل الصفات والشرح الا نقطة واحد فقط وهى أن Padding تستخدم فى التحكم فى عنصر ما من الدخل أما Margin فهى تستخدم فى التحكم فى عنصر ما لكن من الخارج .
.sidebar {
margin-top: 50px;
margin-right: 40px;
margin-bottom: 30px;
margin-left: 20px;
}

 .sidebar {
padding-top: 50px;
padding-right: 40px;
padding-bottom: 30px;
padding-left: 20px;
}

الشرح على الخاصيتين
تعنى Top اى المحاذاة من الاعلى  و Right من اليمين و Left من اليسار و Bottom من الاسفل
ويمكن تجميع الكل بشكل افضل كالتالى ويمكنك التغير بها بسهولة حسب الوصف
.sidebar {
margin: 50px 40px 30px 20px;
margin: Top Right Left Bottom;
}
.sidebar {
padding: 50px 40px 30px 20px;
padding: Top Right Left Bottom;
}

5- خاصية “ Float “ وخاصية “ Width “ وخاصية “ Hieght “

كل منهم يعبر عن شئ خاص به
#header {
float:right;
width: 100px;
width: 90%;
hright:50px
}

أ-  float وهى عبارة عن المحاذاة لاى عنصر تريد وضعه فى القالب يمينا او يسارا ( محاذاة يمين Right – محاذاة يسار Left – من غير محاذاة None ).
ب- Width وهى تعنى العرض الخاص بالعنصر سواء كانت قيمة او نسبة
جـ height وهى تعبر عن الارتفاع الخاص بالعنصر المطلوب .
مثال : هنقوم بعمل هيدر جميل ( العرض : 450 بيكسل و الارتفاع : 90 بيكسل والمحاذاة مرة يمين )
header

6- خاصية “ Clear “

هذه الخاصية هامة جدا جدا جدا
#footer {
Clear:both;
}
حيث يتم من خلال هذه الخاصية تعويم العنصر اى ترتيبه جمبا الى جنب مع عنصر اخر فكيف يمكن التعامل مع هذه الخاصية لانها سوف نستفيد منها فى الفصل بين المكونات الخاصة بالقالب سواء كان هيدر ثم يتبعه الوسط ثم الفوتير
ويتم التبديل بين ( اليمين Right  -- اليسار Left – كلاهما Both )
شرح مبسط :
عند عمل القالب والبدء بعمل الهيدر والانتهاء منه والبدء بعمل الجزء الوسطى اى جزء الارسال ما هى الخاصية التى تفرق بينها لا تتبعه فى الخصائص والمكونات وتجعله يعمل ويظهر بشكل متتالى.
هذه هى الخصاصية والتى سوف نستخدم على الاكثر Both حتى يتم التخلى عن الكل سواء يمينا او يسارا حيث يظهر القالب بشكل متتالى ( الهيدر ثم الجزء الوسطى ).

7- الخلفية “ Background “

الخلفية اى كانت سواء خلفية عنصر معين او القالب بأكلمه إما ان تكون ( لون او صورة أو كلاهما معا )
Body { background-color: #FFFFFF; background-image: url(" رابط الصورة المراد وضعها"); background-repeat: no-repeat; background-attachment: scroll; background-position: left top; }

أ- background-color هنا تكون الخلفية عبارة عن لون يمكنك تغيره كما ترغب.
ب- background-image هنا تكون الخلفية عبارة عن صورة او نقش يمكن تغيره من خلال وضع الصورة التى ترغب .
جـ- background-repeat تستخدم فى حالة انك وضعت صورة صغيرة او نقش صغير وتريد تكراره مثلا ليملئ الخلفية باكملها او انك لا تريد ان يتم التكرار من اساسه ويمكنك التبديل بين :
-  repeat-x وتعنى ان الصورة سوف تتكرر بشكل افقى فقط
- repeat-y وتعنى ان الصورة سوف تتكرر بشكل رأسى فقط
- repeat وتعنى ان الصورة سوف يتم تكرارها بشكل افقى ورأسى فى نفس الوقت.
- no-repeat   وتعنى عدم تكرار الصورة افقيا او رأسياً.
د- background-attachment وهى تعنى ان تكون الخلفية ثابتة او متحركة وتكون هذه الخاصية واضحة بشكل كبير فى الصور حيث ان اردت صورة ثابتة ستكون الخلفية ثابتة وباقى المكونات متحركة عن استخدام شريط التمرير مثلا ويمكنك التبديل بين
- scroll وتعنى ان الصورة سوف تتحرك عن تحرك الصفحة ومكونات القالب .
- fixed وتعنى ان الصورة ستكون ثابتة وبافى المكونات سوف تتحرك وتظل الخلفية موجودة وظاهرة.
هـ- background-position وهى تعنى مكان وضع الصورة ومحاذاتها يمينا او يسار او اعلى او اسفل لتركيبها بشكل دقيق. ويتم ترتيبها  بين Right و Left وكذلك يتم الترتيب بين Top و Bottom أو يمكن استخدام المقاسات بالبيكسل مثلا او النسبة
ويتم تلخيص السابق كالتالى ويؤدى نفس الخصائص المفردة
Body {
background: #FFFFFF url("رابط الصورة المراد وضعها ") no-repeat fixed right bottom;
}
تنويه : سيتم دراسة كل ما سبق شرحه بالتفصيل عن احتياجنا اليه فى الدروس المقبلة باذن الله تعالى
Read more »
الاشتراك في: الرسائل (Atom)
تصميم وبرمجة : عبدالالاه ازويتن