إظهار الرسائل ذات التسميات قوالب بلوغر. إظهار كافة الرسائل
إظهار الرسائل ذات التسميات قوالب بلوغر. إظهار كافة الرسائل
قالب معرب بسيط و أنيق
قالب Community معرب بسيط و أنيق , يحتوي على عمود واحد على اليمين و هيدر يدل على الإتصال و المواصلات كما يدل على الربح من الأنترنت بإضافة إلى خلفية بيضاء واسعة مريحة للكتابة و القراءة.
التحكم الكامل في تصميم المدونة
قامت شركة جوجل مؤخرا باضافة خاصية جديدة مهمة للغاية وجد متطورة لإنشاء وتصميم مدونات بلوجر والتحكم الكامل في تصميم المدونة كتغير الخلفية والألوان والخطوط ولوحة التخطيط بطريقة حديثة وسهلة دون اللجوء الى تعديل صفحة html وما نواجهه من متاعب وأخطاء قد تؤدي الى اتلاف المدونة بشكل كامل .
هي عبارة عن مجموعة أدوات واسعة تحتوي على قوالب تصميم رائعة وخلفيات متنوعة كما تتميز بالمرونة والبساطة حقيقة هو أمر ممتع وكم كنا بحاجة الى هذه الإضافة التي بالتأكيد ستساهم في تطوير واتساع كبير لمدونات بلوجر على شبكة الأنترنت بدون شك.
هي عبارة عن مجموعة أدوات واسعة تحتوي على قوالب تصميم رائعة وخلفيات متنوعة كما تتميز بالمرونة والبساطة حقيقة هو أمر ممتع وكم كنا بحاجة الى هذه الإضافة التي بالتأكيد ستساهم في تطوير واتساع كبير لمدونات بلوجر على شبكة الأنترنت بدون شك.
كيفية التعامل مع الإضافة الجديدة مصمم النماذج :
في الحقيقة الكثير منا ربما سمع عن هذه الإضافة أو اطلع عليها في احدى المواقع أو المدونات الأجنبية وحتى العربية لكن الأكيد أن هناك الكثير ممن لم تظهر عنده أو أعتقد بأنها مخصصة للغة الإنجليزية فقط دون اللغات الأخرى على غرار اللغة العربية لكن لحسن الحظ هذه الميزة متوفرة باللغة العربية بتعريب كامل وبنفس كفاءة اللغات الأخرى .
مئة قالب لمدونتك
تشكيلة متنوعة
افضل القوالب و بكل الميزات لمدونتك بلوغر
قوالب متنوعة و تلائم كل الاذواق
اختر الان ما تريده و حمله مباشرة.
قوالب متنوعة و تلائم كل الاذواق
اختر الان ما تريده و حمله مباشرة.
ختيار قالب مدونتك
ختيار قالب مدونتك
يزودنا بلوجر بعدد محدود من القوالب، غير أن إحدى أعظم ميزات بلوجر زيادة على كونه مجانيا الإمكانيات التي يتيحها لتحميل قوالب جديدة، أو تخصيص الموجودة منها بشكل غير محدود .
هناك آلاف من مستعملي بلوجر من مختلف انحاء العالم ، ولا يوجد إلا عدد محدود من القوالب المتاحة والمقدمة من بلوجر للاختيار منها ، ما يعني أن آلافا من المدونين سيستعملون نفس القالب الذي تستعمله ، فتصميم مدونتك من الأشياء الضرورية التي تلفت نظر الزائر عندما يدخل إلى مدونتك فإذا كنت تستعمل القوالب المذكورة فيصعب عليه تذكرها من بين الآلاف التي تستعمل نفس القالب.
فالحل إذن يكمن في اختيار قالب مختلف من بين القوالب المجانية التي توفرها عدد من المواقع، أو تخصيص القالب الموجود بما يجعله متميزا ومتفردا .
فإذا اخترت استعمال احد القوالب المتوفرة على الانترنت فأمامك الآلاف منها لتختار ما تريد وما يناسب مدونتك سواء من حيث الشكل أو الموضوع .
أما إذا كنت تفضل تخصيص القالب الموجود عندك، فهناك عدد من التقنيات البسيطة والفعالة في وقت واحد والتي تمكنكن من تغير الألوان والخلفيات والخطوط ..مكاناك أن تحول قالبك الحالي على قالب فريد وجذاب. فالقالب الجذاب السهل التصفح يساعد القارئ على الوصول على المحتوى بسهولة تامة . وهو خصوة مهمة لتكوين قاعدة صلبة من الزوار.
هناك آلاف من مستعملي بلوجر من مختلف انحاء العالم ، ولا يوجد إلا عدد محدود من القوالب المتاحة والمقدمة من بلوجر للاختيار منها ، ما يعني أن آلافا من المدونين سيستعملون نفس القالب الذي تستعمله ، فتصميم مدونتك من الأشياء الضرورية التي تلفت نظر الزائر عندما يدخل إلى مدونتك فإذا كنت تستعمل القوالب المذكورة فيصعب عليه تذكرها من بين الآلاف التي تستعمل نفس القالب.
فالحل إذن يكمن في اختيار قالب مختلف من بين القوالب المجانية التي توفرها عدد من المواقع، أو تخصيص القالب الموجود بما يجعله متميزا ومتفردا .
فإذا اخترت استعمال احد القوالب المتوفرة على الانترنت فأمامك الآلاف منها لتختار ما تريد وما يناسب مدونتك سواء من حيث الشكل أو الموضوع .
أما إذا كنت تفضل تخصيص القالب الموجود عندك، فهناك عدد من التقنيات البسيطة والفعالة في وقت واحد والتي تمكنكن من تغير الألوان والخلفيات والخطوط ..مكاناك أن تحول قالبك الحالي على قالب فريد وجذاب. فالقالب الجذاب السهل التصفح يساعد القارئ على الوصول على المحتوى بسهولة تامة . وهو خصوة مهمة لتكوين قاعدة صلبة من الزوار.
اكواد قوالب بلوجر
البنية الأساسية لقسم CSS من اكواد قوالب بلوجر (4
في الجزء السابق ذكرنا أن أكواد قوالب بلوجر يمكن تقسيمها إلى ثلاثة أقسام منها ، منطقة الرأسوذكرنا بأن أكواد هذا القسم ثاتبة لا تتغير، لذلك سوف لن نهتم بها في هذه السلسة من الدروس، وسنركز على القسمين المتبقيين لأهميتها البالغة في تحرير القالب.
وفي هذا الدرس سوف نتعرف على بنية قسم CSS وهي التي تكون القسم الثاني من أكواد القالب كما ذكرنا في الدرس السابق.
أولا يجب التنويه إلى أنه ليست كل القوالب لها نفس البنية ، لأن الأمر يتعلق ببصمة المصمم وطريقته في التصميم . ومع ذلك سنحاول في هذا الدرس أن نوضح الخطوط العريضة للأجزاء والأقسام التي ينقسم إليها هذا القسم بدوره، ويبلغ عدد هذه الأقسام المندرجة تحت قسم أكبر هو قسم CSS تسعة، وسنحدد وظائف كل قسم أو جزء منه على وجه الإجمال، على أن نشرح بتفصيل ما يحتويه كل قسم من هذه الأقسام من أكواد ووظائفها في الحلقات المقبلة من هذه الدروس . وننصح بقراءة هذه السلسلة حسب ترتيب حلقاتها حتى تسهل عملية الفهم .
وقبل البدء في بيان الأقسام التسعة المتعلقة بقسم css رجاء افتح هذه الصفحة في نافدة جديدة لنها تحتوي على اكواد قالب نمودجي توضيحي لما نحن بصدد شرحه وقد وضعت فيه الاقسام المذكورة باللون الأحمر حتى تقف على مكانها من أكواد القالب بصورة عامة مما يعين على فهم افضل للموضوع.
قسم 1 : التعريفات المتغيرة :variable definitions :
وهذا القسم يحدد نوع الخطوط وأحجامها ، والألوان وأشياء أخرى تظهر في الشكل الخارجي للقالب ،وكل القيم المحددة فيه تجد لها إحالات في باقي أجزاء القالب، بطريقة سنشرحها بتفصيل مستقبلا، وليس كل القوالب تتوفر على هذا القسم، وتكمن أهميته في أنه كلما كثرت أسطره في الكود سهل التحكم في خصائص القالب وإجراء التعديلات على مظهره اعتمادا على خيار : "الخطوط والألوان " من لوحة التحكم في مدونتك. أما في حال انعدامها فلا مفر من إجراء
التعديلات بشكل يدوي أي تحرير الكود مباشرة .
قسم 2 : global
وهذا القسم يحتوي على الأكواد التي تتحكم في المظهر العام للقالب برمته – طبعا في علاقة مباشرة مع القسم الذي قبله- ويبدأ بكود body متبوعا بعده مباشرة تأتي مجموعة من الاكواد التي الواقعة بين لامتين {.....} وهي تتحكم – كما قلنا – في المظهر العام للقالب مثل سعة عرض القالب، وكذا ولن خلفية القالب أو جعل الخلفية عبارة عن صورة . لكن رغم فإن هذا االقسم لا يتحكم في التفاصيل الدقيقة للقالب لأن هذه المهمة تتولاها أقسام أخرى سنعرض لها واحدا واحدا. وداخل هذا القسم تقع أجزاء مهمة من أكواد القالب وهي الغلاف الخارجي outer wrapper و منطقة المحتوى content wrapper ..
قسم 3 : الرأس : Header.
وهذا القسم يتحكم في كل شيء داخل منطقة الرأس Header wrapper ، والذي يحتوي غالبا على عنوان المدونة ، ووصف المدونة ، وقد تضاف إليه أشياء أخرى مثل العارضة العلوية linkbar ، وتجدر الإشارة إلى أنه لا يمكن إضافة أي اكواد على هذه المنطقة بواسطة خيار "عناصر الصفحة" بل تتم إضافتها يدويا .
قسم 4 : الجزء الرئيسي : Main :
وهذا القسم يتحكم في كل ما يندرج تحت قسم Main wrapper : مثل التاريخ ، والتدوينات ، والتعليقات ، ورابط الخلاصات أو أي إضافة تمت إضافتها إلى هذه المنطقة عن طريق عناصر الصفحة .
قسم 5: الإطار الجانبي: Sidebar:
هذا الجزء من الكود يتحكم في كل ما يقع ضمن الإطار الجانبي مثل التصنيفات، الأرشيف، ، إعلانات أدسنس، الروابط .
قسم 6 : متفرقات : Miscellaneous :
وهذا القسم يتحكم في العناصر الإضافية في المدونة والتي لا يتحكم فيها أي من الأقسام المذكورة، وهذه العناصر هي : ملف التعريف Profile:، وتنسيق النصوص الموضوعة بين مزدوجتين : blogquote ...
قسم 7: أسفل منطقة المحتوى : post footer :
وهذا القسم يتحكم في خصائص ثلاث أشياء في القالب وهي :
- النصوص الموجودة أسفل منطقة التدوين ، وهي تحتوي على معلومات عن التدوينة وهي اسم كاتب التدوينة والتسميات التي تندرج تحتها ، والتعليقات .
- الروابط الموجودة أسفل التدوينة وهي رسالة أقدم ، ورسالة أحدث .
- روابط التغذية أو الخلاصات .
قسم 8: التعليقات : comments.
وهذا القسم يتحكم في خصائص التعليقات في المدونة .
قسم 9 : المنطقة السفلى : Footer :
وهذا القسم يراقب خصائص المنطقة الواقعة أسفل القالب ككل، وهي على العموم تحتوي على بعض النصوص التي تبين حقوق الملكية الفكرية للمدونة ، كما يمكن وضع بعض الإضافات في هذه المنطقة مثل " احدث التعليقات " احدث المواضيع " وعداد الزوار ، وغيرها ... وهذه المنطقة قد تتكون من عمود واحد أو أكثر .
ضبط خصائص الصناديق
ضبط خصائص الصناديق container في قالوب بلوجر 5
في هذا الدرس سنتعرف أساسا على الأكواد التي تتحكم في خصائص الأقسام أو الصناديق containers، وسنقتصر على صندوقين على سبيل المثال لا الحصر وهما:
الصندوق الرئيسي أو الجزء الرئيسي :Main .
وصندوق المواضيع Post .
ومعلوم أن الصندوق الأخير يقع داخل الصندوق الأول.
بمجرد التعرف على الأكواد التي تتحكم في خصائص هذين الصندوقين، سيسهل عليك حتما فهم أكواد باقي الصناديق لأن هذه الأكواد تتكرر في كل صندوق تقريبا:
وهذه أكودا الصندوقين :
#main {margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;min-width: 400px;max-width: 400px;background: $mainbgColor;color: #111111;font: $textFont;}
.post {margin: 0px 20px 10px 0px;padding: 10px 20px 10px 2px;line-height: 1.5em;text-align: left;background: $postbgColor;}
ومن خلال الأكواد أعلاه سنتعرف في هذا الدرس على ما يلي :
*********الهوامش الخارجية أو الحاشية : Margin.
*********الهوامش الداخلية أو الحشو : Padding.
*********العرض الأدنى : Min-width.
*********العرض الأقصى: Max-width.
*********الخلفية : background.
*********اللون : Color.
*********محاذاة النص : Text-align.
********المسافة بين السطور: Line-heihgt.
فكلمة #main هي العنوان الذي تندرج تحته كل الأكواد التي يتكون منها الصندوق الرئيسي Main وهذه الأكواد يجب أن تكون محصورة بين لامتين { } ، وفيما يلي شرح لمدلولات الأكواد أعلاه وسنبدأ باكواد Main .
الهوامش الخارجية أو الحاشية : Margin:
والخاصية margin تتحكم في المسافة التي تربط بين جوانب صندوق معين بجوانب صندوق أكبر منه بحيث يقع الأول بداخله ، فهو يحدد المسافة بين جوانب كل عنصر وجوانب العنصر المحادي له، وتتحدد هذه المسافات من خلال أربعة أرقام كما يلي :
margin: 0px 0px 0px 0px;
الأول يشير إلى الهامش العلوي ،
والثاني يشير إلى الهامش الأيمن ،
والثالث يشير إلى الهامش االسفلي،
والرابع يشير إلى الهامش الأيسر لذلك تكتب في الكود هكذا :
مع العلم أن هذه الطريقة إنما هي صيغة مختصرة لصيغة أوضح وتكتب في الأصل هكذا
margin-top: 100px;margin-right: 40px;margin-bottom: 10px;margin-left: 70px;
وتجدر الإشارة إلى أن الصندوق الأساسي يحتوي بداخله على صندوق المحتوى فإذا كانت كل القيم المتعلقة بهذا الأخير تساوي 0px فهذا يعني أن صندوق المحتوى بنفس حجم الصندوق الأساسي . أما لو حددت قيم معينة فإن فإنه ستوجد مسافة بين إطاري كل من الصندوقين حسب القيمة المحددة وفي هذه الحال سيكون صندوق المحتوى أصغر حجما من الصندوق الأساسي، لأن إطاره سينزاح إلى الداخل حسب القيم المحددة وسيتضح الأمر أكثر قريبا.
الهوامش الداخلية أو الحشو :padding :
وهو يحدد المسافة في الصندوق بين محتوياته من العناصر وبين الإطار، فهو يحدد موضع العنصر داخل الصندوق الذي يوجد فيه .
العرض الأدنى : Min-width، والعرض الأقصى : Max-width: ومعنى width هو العرض، وهو يحدد عرض العنصر وتوجد أمامه قيمته بالبيكسل.
الخلفية : Background:
وتحدد خلفية العنصر، وقد تكون عبارة عن لون يحدد بواسطة الرمز الدال عليه، أو يكون عبارة عن صورة صغيرة تتكرر حتى تغطي كامل الخلفية . وسنشرح كيفية ذلك في الدروس التطبيقية التي سنختم بهذه السلسة إن شاء الله.
اللون : Color:
ويحدد لون العنصر، تحدد الألوان بواسطة اكواد، إذ لكل لون كوده الخاص به بحسب نظام الألوان المستعمل .
الخط : font:
ويحدد نوع الخط الذي تريد أن تظهر به نصوص المدونة .
محاذاة النص : Text-align:
ويضبط محاذاة النص فبالنسبة للغة العربية يجب أن تكون قيمته right : ولهذه الخاصية دور كبير في تعريب قوالب بلوجر، وسنشرح ذلك لاحقا .
Line-height:
ويحدد المسافة بين سطرين .
ويجب أن تعلم أننا اقتصرنا على قسمين أو صندوقين في هذه الحلقة وهما Main و post، على سبيل المثال لا الحصر لأن هذه الأكواد تتكرر تقريبا قي باقي الأقسام والصناديق كلها .
وإلى حد الآن ما زلنا في الأساسيات ، وأهم ما تعلمناه في هذا الدرس هو خاصيتي Margin و padding
تصميم وتعديل قوالب بلوجر: الصناديق والعنــــــاصر التي تتكون منهــــــــا أكواد قوالب بلــــــوجر
تصميم وتعديل قوالب بلوجر: الصناديق والعناصر التي تتكون منها أكواد قوالب بلوجر. (6)
في موضوع سابق تحدثنا عن البنية الأساسية لأكواد بلوجر ، وتحدثنا بشكل عام وفيما يلي سنعيد الحديث عن نفس الأمر لكن بتفصيل أكثر بحي سنتجاوز مجرد التعريف بالعناصر والاجزاء إلى ذكر بعض الأكواد التي تندرج تحتها وع ذكر وظائفها
لذلك سنشير مجددا إلى أهم الصناديق والعناصر التي يتكون منها قالب بلوجر، مع بيان وأدوارها ووظائفها ، وقبل ذلك لنتفق على أن العناصر هي أصغر حجما من الصناديق، والعنصر في الغالب يقع ضمن صندوق اكبر منه، فالصندوق إذن يمكن أن يحتوي على أكثر من عنصر .
وسنركز أكثر على الصناديق والعناصر المشتركة بين معظم القوالب والتي تتحكم في معظم مكونات القالب، إذ ليست كل القوالب تتوفر على نفس الصناديق. وومعرفة هذه الصناديق ستسهل عملية تخصيص القالب ، وتساعدك على تحديد المواضع التي يجب التعديل عليها في الكود، وستعرف أيضا دور الأكواد الأساسية في كل صندوق أو عنصر.
وكما سبق أن قلنا سنقتصر على شرح بعض الصناديق والعناصر فقط لكنها بالتأكيد ستكون معينة على فهم باقي العناصر جميعها لأن كثيرا من الأكواد تتكرر.
أولا يجب أن نعلم أن الرمز # و النقطة (.) يظهران قبل بداية أكواد عنصر او صندوق معين وفيما يلي أهم الصناديق مع أهم العناصر التي تندرج تحت كل صندوق : .
Global : وتندرج ضمنه الأجزاء التالية:
الخصائص العامة لمجمل القالب : Body{…}
بداية أكواد الصندوق الأكبر الذي يضم كامل محتويات القالب : #outer-wrapper {….}
ويحتوي على العمود الجانبي، ومنطقة النشر، والمنطقى السفلى لمنطقة النشر : #content-wrapper {…}
{…} a : ويتحكم في خصائص الروابط .
ويتحكم في خصائص الروابط التي تم الضغط عليها. : a:visited{…}
ويتحكم في خصائص الروابط عندما يكون مؤشر الفأرة فوقها : a :hover{…}
وتجدر الإشارة إلى ما ذكرته هنا يتعلق فقط بأسماء أو عناوين العناصر و اعلم أن الأكواد التي تحدد خصائص كل عنصر تقع بين اللامتين {...} سوف لن نعيد كتابتها فيما يأتي من الأكواد.
الرأس : Header . : وتندرج ضمنه الأجزاء التالية
header-wrapper # : ويدل على بداية أكواد الصندوق الذي يتحكم في كل منطقة الرأس header. ويشمل اسم المدونة، ووصف المدونة .
header# : وهو صندوق يقع بدوره ضمن الذي سبقه .
header h# : واكواده تتحكم في مظهر عنوان أو اسم المدونة.
header h1 a # : ويتحكم في عنوان المدونة باعتباره رابطاlink.
#header description : تتحكم في خصائص وصف المدونة.
header a img# : يتحكم في خصائص الصورة في منطقة الرأس .
الجزء الرئيسي : Main : وتندرج ضمنه الاجزاء التالية:
main-wrapper#: وهو الصندوق الذي يحيط بتاريخ التدوينات، ومنطقة المحتوى أو النشر، والتعليقات ، والخلاصات ، وأي قطعة أو جزء تتم إضافتها فوق أو أسفل منطقة النشر او المحتوى blog post
#main : وهو صندوق يقع ضمن الذي قبله .
main.widget# : ويتحكم في في كل القطع والأجزاء التي تقع ضمن .main-wrpper
h2.date-header : يتحكم في خصائص تاريخ التدوينات .
post. : وهي مسبوقة بنقطة يتحكم في خصائص منطقة المحتوى – النشر- blog post .
Post h3. : يتحكم في خصائص عناوين التدوينات.
post body p. : يتحكم في خصائص جسم ومحتوى التدوينات .
post ul. : يتحكم في تنسيق القوائم غير المرقمة .
post ol. : يتحكم في تنسيق القوائم المرقمة.
a img : يتحكم في الخصائص العامة للصور.
العمود الجانبي : Sidebar : وتندرج ضمنه الأجزاء التالية:
sidebar-wrapper. : ويحيط بكل العناصر التي يتكون منها العمود الجانبي .
sidebar. : صندوق يتواجد داخل الذي قبله.
sidebar1 # : يتحكم في خصائص العمود الجانبي الأول في حال وجود أكثر من عمود.
sidebar2 # : يتحكم في خصائص العمود الجانبي الثاني ، مع التنبيه إلى أنه أذا أردت ان تجعل كل الأعمدة متشابهة ، فيمكنك أن تتحكم في خصائصها مجتمعة من خلال العنصر الأول وهو .sidebar
.sidebar .widget : تتحكم في خصائص كل الأجزاء التي يتكون منها العمود الجانبي – "إضافة أداة ".
sidebar1 .widget. : تتحكم فقط في خصائص العمود الجانبي رقم 1.
sidebar .blogArchive. : يتحكم في خصائص الأرشيف الموجود في العمود الجانبي . ويستحب ترك خصائصه كما هي افتراضيا وعدم تغيير أي شيء فيها .
sidebar h2 . : يتحكم في خصائص عناوين أجزاء العمود الجانبي.
.sidebar #blogArchive1 h2. : يتحكم في عنوان الأرشيف.
Miscellaneous : ذكرنا أن هذا الجزء يضم ملف التعريف أو البروفايل و bockauote ، والأكواد التي تندرج ضمنه هي :
profile1 # : ويتحكم في خصائص " من أنا" about me
#profile1 h2 : يتحكم خصائص عنوان ملف التعريف " من أنا".
Profile-img a img : يتحكم في خصائص الصورة المرفقة بـ " من أنا" إن وجدت .
Profile-textblock :يتحكم في خصائص النص الذي يعرف به المدون نفسه في قسم ملف التعريف "من أنا" .
Blockauote: يتحكم في خصائص النصوص التي يضعها المدون بين مزدوجتين "..."
Post-footer : ويحتوي على الأكواد التالية :
post-footer. : يتحكم في كل خصائص أسفل التدوينات والمواضيع.
post-footer-line. : يتحكم في خصائص كل سطر جديد في هذه المنطقة.
Post-footer a : يتحكم في خصائص الروابط في هذه المنطقة.
Post-footer .post-comment-link a : يتحكم في روابط التعليقات.
blog-pager# : يتحكم في خصائص " رسالة جديدة" و "الصفحة الرئيسية" و "رسالة أقدم" التي تتواجد في صف واحد أسفل منطقة المحتوى .
blog-pager-newer-link# : يتحكم في خصائص رابط " رسالة أقدم".
.blog-pager-older-link# : يتحكم في خصائص رابط "رسالة أقدم".
feed-links. : يتحكم في العبارة التي تكون أسفل كل تدوينة وهي عبارة " اشترك في الرسالة" .
التعليقات : comments :وتندرج تحته العناصر التالية:
comments# : ويتحكم في كل خصائص العناصر المكونة لصندوق التعليقات .
comments a# : يتحكم في خصائص الروابط .
comments h4 # : يتحكم في رأس header صندوق التعليقات.
comments author. : يتحكم خصائص كتابة أسماء المعلقين.
comment-body p . : يتحكم في خصائص جسم body منطقة التعليقات .
Footer ويحتوي على العناصر التالية:
footer-wrapper # : وهو يحيط بكل العناصر التي يتكون منها "الفوتر" .
footer #: ويقع ضمن الجزء الذي قبله .
footer h2 # : يتحكم في خصائص عنوان الفوتر .
footer .widget # : يتحكم في الأجزاء أو الإضافات التي توجد في الفوتر .
footer a . : يتحكم في خصائص النصوص الموجودة في الفوتر.
الآن أصبحت على معرفة بأهم الصناديق أو الأجزاء المكونة لقوالب بلوجر ، كما أصبحت تعرف أهم العناصر التي يتكون منها كل صندوق ، والاكواد الدالة عليها ووظائفها . المزيد في الحلقة المقبلة بإذن الله .
دروس تصميم وتعديل قوالب بلوجر : شرح أكواد منطقة الجسم في قوالب بلوجر
التعرف على كيفية ضبط مقاييس أجزاء قوالب بلوجر المختلفة نكون قد انتهينا من شرح أهم ما يتعلق بقسم CSS، في هذه الحلقة سنشرح البنية الأساسية لأكواد منطقة الجسم، وينبغي أن تعلم أننا بهذا نكود قد دخلنا في أكواد القسم الثالث الذي يلي قسم CSS كما هو مبين في تدوينة سابقة البنية الأساسية لكواد .
واعلم أن هذا القسم هو أهم قسم في أكواد قوالب بلوجر من حيث الوظائف التي يقوم بها، فإذا كان قسم CSS يتحكم في تنسيق ومظهر القالب من خطوط وألوان ومحاذاة النصوص، وخلفيات، ومقاييس ... فإن هذا القسم هو اللب الذي يتحكم في وظائف المدونة .
وفيما يلي سنشرح أكواد منطقة الجسم body، بعد أن نسخناها من قالب المدونة وذلك دون الضغط على زر Expand widget template ، وذلك حتى يكون الكود مختصرا ومحتويا في الآن نفسه على أهم أجزاء الكود التي بمعرفتها ستعطينا فكرة شاملة عن مكونات هذا القسم من أكواد القالب.
نلاحظ أن منطقة الرأس تندرج أسفلها أقسام أخرى وهي
الرأس header .
المنطقة الرئيسية : Main
العمود الجانبي : Sidebar
المنطقة السفلى : Footer .
فأنت ترى أن كل الأكواد أعلاه مندرجة داخل قسم الجسمbody لذلك هي محصورة بين
ومتبوعا.
وترى أيضا أن الوسم متبوع بالوسم outer-wrapper ثم wrap2 ودور هذين الأخيرين هو تجميع كل تلك الصناديق والأجزاء والتحكم في خصائصها مجتمعة من مكان واحد، كما تفيد في موضعة الأجزاء أو إضافة أجزاء أخرى كأن تريد أن تضيف عمودا جانبيا آخر، أو أجزاء أخرى كالبانرات الإعلانية مثلا ... وهذا ما سيتضح قريبا.
في الصندوق الأكبر تلاحظ أنه يحتوي بداخله على ثلاثة أجزاء وهي الرأس header- wrapper ومنطقة المحتوى content-wrapper والمنطقة السفلى footer-wrapper ، وهذه الأجزاء تتموضع عموديا أي من أعلى إلى أسفل بنفس الترتيب المذكور أعلاه. وذلك لسبب بسيط هو أنه بهذا الترتيب تظهر في قالب المدونة، الرأس في الأعلى ثم يليه منطقة المحتوى، وفي الأسفل المنطقة السفلى.
وإذا فهمنا هذا الأمر سهل علينا إضافة أي صندوق أو قسم جديد إلى القالب شرط أن يوضع في المكان المناسب بين الصناديق والأجزاء الأخرى ، يكفي أن تلصق كود الصندوق الجديد في المكان الذي تختاره وتختار له اسما جديدامثلا إذا أردنا أن نضيف قسما نسميه بانر banner-wrapper بحيث ينضاف في تخطيط القالب زر جديد يتيح إضافة اداة أو عنصر جديد إلى القالب . سنستخدم الكود التالي مثلا :
وسنفصل في هذا الأمر اكثر فيما يستقبل من الدروس .
وإضافة أي صندوق جديد ستحتاج فيه بالتأكيد إلى ما سبق أن اشرنا إليه في شرح قسم CSS من قوالب بلوجر، حتى تحسن مظهر الإضافة لتناسب الشكل العام القالب .
هكذا نكون قد القينا نظرة عامة على اكواد الصناديق أو الأقسام التي يتكون منها القالب ، غير أنه يجب التنبيه إلى ضرورة عدم الخلط بين هذا القسم ، وبين نفس الاسماء التي ذكرنها أثناء شرح قسم CSS والسبب بسيط ذلك ان أكودا قسم Body تتحكم في وجود أو عدم وجود أجزاء القالب المختلفة ، اما قسم CSS فيتحكم فقط في تنسيق هذه الأجزاء إذا كانت متواجدة أصلا في القالب بوجود اكوادها في قسم الآخر.
وفي الدرس القادم سنفصل في الأكواد المدونة لكل قسم وبالتوفيق.
دروس تصميم وتعديل القوالب : تتمة شرح أكواد منطقة الجسم
في هذه التدوينة سنشرح مزيدا من الأوامر المكونة لقسم body وذلك من خلال الاكواد التالية :
نلاحظ أن كل قسم أو جزء يكون مبدوءا بالعنصر div وبعده مباشرة العنصر b:section وكل قسم قسم div و b:section له معرف يميزه
identifier يحدد بالأمر id . يمكنك أيضا أن تعرف من خلال الفئات class.
وهذه التعريفات والفئات تعتبر مرجعا تحيل عليه عندما تريد تنسيق عنصرdiv بواسطة CSS ، بحيث تحيل على على كل معرف id في أكواد قسم body مثلا في قسم css بواسطة الرمز # اما الفئات class فتحيل عليها في قسم CSS بواسطة نقطة .
مثـــــــــــال :
نجد مثلا العنصر
في قسم الجسم، لكن لتحديد خصائصه من حيت اللون والخط والمقاييس ... فإن هذا يتم في قسم CSS وستجد الإحالة عليه في هذا القسم بالكود التالي :
#main-wrapper وهناك عناصر أخرى تكون مسبوقة بالنقطة وهي الفئات class.
ولفهم المعرفات والفئات أكثر يمكن زيارة الموضوعين التاليين في موقع html.net بالعربية ، وبالإنجليزية ستجد دروسا مفصلة في w3schools.com.
2
كل عنصر يقع ضمن b:section يعتبر قطعة widget وهو الذي يسمى عنصر الصفحة page element . مثلا:
Header هو قطعة widget . لاحظ أن هذا هذا الكود يتضمن العبارة التالية :
maxwidgets='1' showaddelement='no'
فـ maxwidgets=’1’ تعني أن أقصى عدد من القطع يمكن أن تحتوي عليها منطقة الرأس header قطعة واحدة بمعنى انه لا يمكنك أن تضيف أية قطعة أخرى عن طريق " إضافة أداة" أو تحريكها عن طريق السحب والإفلات إلى منطقة الرأس.
أما كود : 'showaddelement='no فيعني زر " "إضافة أداة " في عناصر الصفحة لن يظهر في منطقة الرأس.
في الجزء الأساسي من القالب : main-wrapper سنجد فقط 'showaddelement='no والتي تعني انه لا تستطيع إضافة أداة غير أنه يمكن أن تضيف أداة أعلى أو أسفل منطقة المحتوى عن طريق السحب والإفلات .
وفي العمود الجانبي sidbar-wrapper سنجد الكود التالي : 'prefered=yes'yes وهذا الأمر يعني أنه يمكنك إضافة قطع بقدر ما تشاء عن طريق زر "إضافة أداة " في عناصر الصفحة.
مع التنبيه إلى انه يمكنك دائما نقل القطع إلى حيث تريد عن طريق السحب والإفلات.
ونفس الامر بالنسبة للمنطقة السفلى footer.
الاشتراك في:
الرسائل (Atom)