الرئيسية 
المسلسلات التركية 
مباريات اليوم 
أخبار سامكو 
1:22 ص
السلام عليكم ورحمة الله وبركاته
بداية اقدم خالص الاعتذار على التأخير فى تكملة الدروس الخاصة بدورة تصميم قوالب بلوحر المجانية لضيق الوقت وانشغالى الشديد بالعمل الخاص بى وان شاء الله سيتم تدعيم الدروس فى الفترة القادمة .
فى الدرس السابق قومنا بشرح الأكواد الأساسية لبناء قوالب بلوجر وكسب صداقة محركات البحث SEO وان شاء الله بتصميم الهيكل العام للقالب ( Body )
فى الدرس السابق وصلنا لعمل العمل التالى :-
<!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 == "index"'>
<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>
1- إنشاء الهيكل العام لقالب بلوجر " samco "
قبل البدء فى هذا الدرس يرجى مراجعة الدروس السابقة
احنا فى الدرس السابق علمنا ايه ؟
عملنا رأس القالب وعملنا الميتا تاج وجهزنا المكان اللى هنحص فيه CSS يبقى لسه باقى ايه ؟
باقى الجزء اللى هنحط فيه الهيكل بتاع القالب اللى هو ( الهيدر + الفوتر + منطقة القوالب + السايدبار ) .
| نروح عند | </head> | وبعدها مباشرة نحط الكود التالى |
المنطقة دى خاصة بالأكواد الخاصة ببناء القالب
</body>
كده نقدر نقول اننا بدأنا الشغل الجامد اوى
يالا بسم الله نبدأ " نشوف الكود الكامل للقالب لحد الحين متبوعا بالشرح داخل الأكواد
<!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 == "index"'>
<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>
<body>
المنطقة دى خاصة بالأكواد الخاصة ببناء القالب
</body>
</html>
عمل الخصائص الخاصة بالبادى " Body " اللى هو جسم القالب الخارجى
قبل البدء فى هذا الجزء يرجى مراجعة الدروس التالية :-
1- شرح أساسيات CSS الجزء الأول
2- شرح أساسيات CSS الجزء الثانى والاخير
خصائص " Body "
background: #747373; ده لون الخلفية بمكنك تغيره كما تريد
color: #000000; لون الكتابة بشكل عام فى القالب
font-family: Tahoma,Arial,verdana; الخطوط التى تعرض فى القالب
font-size: 12px; حجم الخط للقالب
margin: 0 auto; المحاذاة الخارجية للقالب
padding: المحاذاه الداخلية للقالب
}
ملاحظات :
1- الخلفية ممكن ان تكون صورة او لون براحتك انت
طيب لو فى صورة ايه الفرق ؟ الكود هيكون بالشكل التالى ( راجع جزء الخلفية )
2- الخطوط يمكنك التبديل فى مكان الخطوط حيث سيتم الاعتماد على الخط Tahoma لأنى شخصيا احب استخدامه
3- المحاذة الخارجية ( المقصود بها ان تكون محاذاه الخلفية من الاعلى صفر ومن الجانبين فى الوسط
3- المحاذاة الداخلية ستكون صفر من جميع الاتجاهات " اى عند وضع اى جزء سواء هيدر ولا اى مكون سيلتصق مباشرة بالخلفية اى كان موضعه ولا يوجد فراغات " "ستكون ابسط مع التجربة "
اضافات بسيطة لكن مهمة جدا
المحاذاة الخارجية والداخلية
المحاذاة الخارجية والداخلية بشكل عام للقالب والمكونات الداخلية " أى الافتراضيات لمكونات القالب "
margin: 0;
outline: 0 none;
padding: 0;
}
الروابط " Links "
color: #395D97;
text-decoration: none;
}
a:visited { الرابط الذى تم زيارته
color: #fff000;
text-decoration: none;
}
a:hover { عندما تمرر مؤشر الماوس على الرابط
color:#ff0000;
text-decoration: underline;
}
a:active { الرابط الذى تقف عليه بالفعل , اى الصفحة المفتوحة حاليا
color:#000000;
text-decoration: underline;
}
ملاحظة بسيطة :
طيب لو حبيت تجمع مثلا خصائص الرابط والرابط الذى تم زيارته او جمع الخصائص للروابط بشكل عام تعمل ايه ؟
تجيب مثلا a:link و a:visited ويبقى بينهم فاصلة ,وتبقى بالشكل ده
color: #395D97;
text-decoration: none;
}
كده نقدر نقول اننا الحمد لله وصلنا لبداية وضع مكونات القالب والبدء فى التصميم وده الكود الاخير
<!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 == "index"'>
<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
-------------------------------------- */
المنطقة دى خاصة بالخصائص بتاع مكونات القالب
body {
background: #747373; ده لون الخلفية بمكنك تغيره كما تريد
color: #000000; لون الكتابة بشكل عام فى القالب
font-family: Tahoma,Arial,verdana; الخطوط التى تعرض فى القالب
font-size: 12px; حجم الخط للقالب
margin: 0 auto; المحاذاة الخارجية للقالب
padding: المحاذاه الداخلية للقالب
}
* {
margin: 0;
outline: 0 none;
padding: 0;
}
a:link { الرابط بشكل عام
color: #395D97;
text-decoration: none;
}
a:visited { الرابط الذى تم زيارته
color: #fff000;
text-decoration: none;
}
a:hover { عندما تمرر مؤشر الماوس على الرابط
color:#ff0000;
text-decoration: underline;
}
a:active { الرابط الذى تقف عليه بالفعل , اى الصفحة المفتوحة حاليا
color:#000000;
text-decoration: underline;
}
]]></b:skin>
</head>
<body>
المنطقة دى خاصة بالأكواد الخاصة ببناء القالب
</body>
</html>
نيجى بقى للسؤالين المهمين اللى لسه محدش سألهم
1- القالب ده اخده نسخ واحطه فى القالب ؟
اقوله لا ده للشرح اما الكود هيكون موجود فى المرفقات للتحميل بدون شرح
2- طيب هو ممكن اعرف اجرب الاكواد دى واجربها الوقتى ولا لازم نتتظر للأخر ؟
اقوله تقدر لكن ليس عن طريق الحفظ لكن عن طريق المعاينة يعنى " تأخذ الاكواد نسخ وتروح تلصقها فى مكان تحرير القالب وتعمل معاينة وهتلاقى الشكل موجود وتغير وتجرب
صورة معاينة القالب
كده انتهى الدرس وبإذن الله القادم احلى " درس عمل هيدر احترافى "
روابط تحميل قالب الدرس
Posted in: دروس بلوجر,دورة تصميم قوالب بلوجر,عام
12 التعليقات:
بارك الله فيك أخي سامي، بالأمس فقط كتبت تعليقا في الدرس السابق معاتبا على تأخرك في التكمله :) .. الله يعينك و يسهل أومورك.
شرح جميل و بسيط و مفيد، أرجو أن لا يطول انتظارنا لبقية الدروس..
بارك الله فيك و جازاك عنا كل خير.
@ باعتذر اخوى على التأخير لكن لدى ضيق فى الوقت بس انشغالى فى العمل الخاص بى وان شاء الله باقى الدورة تكون سريعة
شرح ممتاز جدا مشاء الله ربنا يبارلك بجد : انا كان عندي استفسار كده انا دلوقتي جبت قالب و عدلت عليه تمام بعد ما عدلت عليه و كل حاجة طلع فيه مشكلة المشكلة هي القائمة الأفقية الـ Menu يعني الكلام مش بيظهر جمب بعضه فهمني يعني لما أجي اكتب الرئيسية و الصفحات اللي جمبها بيظهرو تحت بعض مش جمب بعض مع أني عدلت علي الـ Css برضو مش فيه فايدة فلو ينفع حضرتك تساعدني اديك نسخة من القالب و تظبطلي المشكلة ديه و يبقي جزاك الله كل خير :)
ده القالب الأصلي :
http://btemplates.com/2010/blogger-template-photo-gallery/demo/
و ده القالب بعد ما عدلته :
http://my-topmovies.blogspot.com/
فلو حضرتك موافق تعدل علي القالب ابعتلك نسخة علي ايميلك .
ما شاء الله درس دسم و لكن طريقة الشرح ميسره ، شكرا ا/محمد و جزاك الله خيراً
@ Arab Documentary اوك ارسل لى القالب على الميل moh.samco@gmail.com لعمل التعديل على القائمة ووضع الاعدادات الخاصة بها على ان ترسل ماذا تريد الالوان وغيره
@ ريهام المرشدي ان شاء الله يكون الجاى افضل واحسن بدعمكم كل الشكر لكى اختى الكريمة
بارك الله فيك
باااارك الله فيك اخي
تم التطبيق
الله يعطيك العافيه علي المعلومات القيمه
شكرا لك
السلام عليكم
يا جماعه انا لسه جديد و عاوز اعمل مدونه بشكل محترف اتمنى من اى حد يسعدنى المدونه تكون مثل http://my-topmovies.blogspot.com/ الى الاستاذ عدل عليها يا ريت يعنى حد يسعدنى او تكون بئى طريقه بس هيا المدونه هتكون عن الشعر و الكلامات و معانى الاسماء و الخ
جزاك الله خير
انااخترت تحميل لكن الملف غير موجود
إرسال تعليق