في هذا الفصل سنتعرف على بعض الوسوم الأساسية التي تعتمد عليها بلوجر . و سنفهم أيضا كيف يتعامل بلوجر مع هذه الوسوم .
الفهرس
عناصر تصميم الصفحة
تتكون مدونة بلوجر من عدة عناصر أساسية و غير أساسية ، متوافقة مع إعدادات بلوجر و أخرى فرعية .
العناصر الأساسية هي الأدوات التي لا يجوز إنشاء مدونة بدونها كرأس الصفحة أو مربع الرسائل ... و هي غالبا ما تكون متبثة في القالب .
أما الأدوات غير الأساسية فهي الأدوات فهي التي يتم إضافتها إختيارا من صاحب المدونة و التي يملك صاحب المدونة خيار حذفها .
هناك بعض الأدوات التي يمكن أن تعمل بدونها المدونة و مع ذلك تكون مثبثة في القالب ، خصوصا أداة " حقوق الطبع و النشر " .
أثناء تصميمنا لقالب المدونة فإننا سنقوم بتصميم ثلاث واجهات في نفس الوقت ، الصفحة الرئيسية للمدونة ، صفحة التدوينة و واجهة عناصر الصفحة ( الواجهة التي تظهر في .. لوحة التحكم ← تصميم ← عناصر الصفحة ) .
حيث يتم تصميم الواجهات في مرة واحدة .
كيف ؟
في الصفحة الرئيسية يتعامل بلوجر مع وسوم الـxml بشكل ، و في واجهة عناصر الصفحة يتعامل معها بشكل مختلف تماما ، أما صفحة التدوينة فهي نفس الصفحة الرئيسية مع تغيير الأداة الأساسية ' رسائل المدونة ' فقط .
أولا سأطلب منك إنشاء مدونة تجريبية فقط لنتعلم فيها و نجرب . بالطبع ستختار لها قالبا من قوالب بلوجر الجاهزة . لا يهم أي قالب تختار ، المهم هو أن يسمح لك بتحرير الـHTML في التصميم .
توجه الان إلى لوحة التحكم ← تصميم ← تحرير HTML في الواجهة القديمة و احذف كود القالب بأكمله و ضع مكانه الكود أسفله و إحفظ القالب الجديد مع حذف كل الأدوات .
الكود :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE HTML>
<html>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
</body>
</html>
شاهد المدونة ، ستجدها صفحة بيضاء فارغة
.سنقوم بملئها مرحلة بمرحلة .
إن عدت إلى الكود الذي وضعته في تصميم المدونة ستجد أن بلوجر قد أضافت بعض السمات للوسم <html> من تلقاء ذاتها . لا توجد أي مشكلة في ذلك ، فمن خلال تلك السمات التي أضافتها بلوجرستتكمن من التجاوب و فهم الوسوم و غيرها . لذلك لا تقلق أبدا
.لقد نبهت في الفصل السابق على ضرورة معرفة لغة HTML و CSS قبل الشروع في التصميم في بلوجر . و لازلت متمسكا بما أقول . فأنا الان أفترض أنك تعرف ماهي الوسوم ( tag ) و السمات ( attributs ) و العناصر و غيرها ... لكنني لم أفرض معرفة لغة xml ، فإن كنت لا تعرف الـxml فلا شك أنك وجدت في الكود السابق بعض الوسوم التي لم ترها قط .
<?xml version="1.0" encoding="UTF-8" ?>
هذا السطر يخبر المتصفح ( أو بلوجر ) أن الملف ملف xml و أننا نستخدم الإصدار 1.0 من هذه اللغة و نستعمل الترميز UTF-8 .
<b:include data='blog' name='all-head-content'/>
<data:blog.pageTitle/>
أجل هذا عنوان الصفحة ، كما قلت في الفصل السابق ، الوسوم الخاصة ببلوجر تتحول في المتصفح إلى محتوى إعدادات المدونة . هذا الوسم يتحول إلى عنوان صفحة المدونة في المتصفح .
جرب أن تشاهد المدونة التجريبية التي أنشأتها ، ستجد أن العنوان الذي أسميت به مدونتك هو الذي يظهر في شريط المتصفح ، لتتأكد أكثر غير عنوان مدونتك و شاهد مرة أخرى الشريط و ستجد أن العنوان الجديد هو الذي يظهر .
بهذه الطريقة تنحفض معلومات المدونة رغم تغيير القالب
.هذا ليس كل شيء . فالوسم </ data:blog.pageTitle> لا يُظهر عنوان المدونة فقط . بل كما قلت سابقا يُظهر عنوان الصفحة . فعندما تدخل إلى تدوينة ما . ستجد في شريط المتصفح عنوان المدونة و عنوان التدوينة أيضا بهذه الطريقة :
عنوان المدونة : عنوان التدوينة .
<b:skin><![CDATA[ ]]></b:skin>
هذا ما يفترض أن يكون . لكن للأسف الشديد الخصائص التي نكتبها بين هذين الوسمين لا تنطبق على واجهة العناصر .
تخيل أننا وضعنا أداة ' رأس الصفحة ' بعرض 500px ، سيظهر في الصفحة الرئيسية للمدونة بـ 500px لكن في واجهة عناصر الصفحة ستظهر بشكل اخر ، ستظهر ممتدة على طول الصفحة كما لو أننا لم نضع خاصية العرض 500px . للأسف .
الحل
الحل بسيط للغاية ، و هو التخلي عن عنصر b:skin و كتابة الخصائص داخل سمة Style في العنصر مباشرة . هذا يجعل الخصائص تنطبق على واجهة عناصر الصفحة أيضا ، لكن هناك بعض الخصائص التي تأثر على جمالية واجهة عناصر الصفحة . لذلك لن نكتب كل الخصائص مباشرة في السمة Style بل سنكتفي بكتابة الخاصيتان float و width داخل السمة و سنكتب باقي الخصائص داخل العنصر <b:skin>
لتوضيح الأمر قليلا شاهد الصور التالية :
 |
| هكذا تبدوا واجهة عناصر الصفحة عند كتابة جميع خصائص CSS داخل العنصر <style> فقط |
 |
هذه واجهة أخرى تم تعديل خصائصها .
|
على ما أعتقد ، الواجهة الثانية أفضل من الأولى .
في حالة ما أردت أن تترك الواجهة كما هي بدون تعديل الخصائص فأنت حر في ذلك ، لأننا كثير ما نجد القوالب التي نحملها بهذا الشكل و هو لا يأثر على شكل المدونة من الخارج و بالتالي لا عليه 
.
.
المقاطع
أتذكر المربع الذي يوجد في واجهة تصميم الصفحة :
يمكننا هذا المربع الصغير من إضافة الأدوات و ترتيبها و التحكم بها بسولة و سلاسة ( خاصة بعد إدخال إمكانية السحب التلاقائي ) .
بعد إضافة بعض الأدوات نجد أنها تترتب عموديا بهذا الشكل :
هذه الترتيبة التي تراها تسمى مقطعا ( section ) و هي كما تظهر في واجهة تصميم الصفحة صناديق فوق بعضها البعض ، فإنها تظهر في صفحات المدونة على شكل أدوات مرتبة فوق بعضها البعض .
و على مستوى صفحة تحرير HTML القالب في لوحة بلوجر فإن إدخال مقطع يتم بإدخال العنصر <b:section> كالتالي :
<b:section id="section1"></section> أو <b:section id="section1"/>
سواء أدخلت المقطع بعنصر عادي أو بعنصر مغلق يبقى صحيحا ، لكن الأهم هو تعريف كل مقطع بـID مميز .
إن أدخلت المقطع دون سمة id فإن نموذجك لن يقبله بلوجر و سيرسل الرسالة التالية :
يفتقد أحد الأقسام إلى سمة المعرف المطلوبة. يجب أن يكون لكل قسم معرف فريد.
يمكن تقسيم المدونة إلى عدة مقاطع بحيث يشكل المقطع 1 رأس الصفحة ( المقطع الذي يحتوي على أداة رأس الصفحة ) و المقطع 2 القائمة الجانبية sidebar و 3 مقاطع في الأسفل و لا تنس المقطع الرئيسي الذي يحتوي على أداة ' رسائل المدونة الإلكترونية ' .
يمكنك إضافة ما لا نهاية من المقاطع في القالب ، كل ما يلزم هو التنسيق الجيد بينها و هذا يعتمد على مهاراتك في الـHTML و CSS .
جرب أن تضع مقطعا الان في القالب الفارغ الذي وضعته سابقا و إذهب إلى واجهة صفحة العناصر و ستجد ما سيعجبك .
سمات المقاطع الإضافية
بالإضافة إلى سمة التعريف id هناك سمتان إضافيتان يمكن إستعمالهما
سمة maxwidgets
هذه السمة تأخذ قيمة عددية صحيحة و موجبة مثل 1 أو 2 أو 3 .... و هذا يحدد العدد القصوي من الأدوات الممكنة إضافتها في هذا المقطع . مثال
<b:section id="section1" maxwidgets="2"/>
بهذه السمة لن تستطيع إدخال أكثر من أداتين في هذا المقطع .
هناك سمتين أرى أنهما غير مهمتين . ليس لأنني لا أريد أن أكثر عليكم بل لإنني لا أستعملهما حقا و أرى أنهما تافهتين و يمكن الإستغناء عنهما . على كل حال .
هناك سمة showaddwidget و هي تقبل قيمتين true أو false تتحكم في ظهور مربع ' إضافة أداة ' . و عذرا لم أستطع تذكر السمة الثانية و هذا لأنني لا أستخدمها كما قلت سابقا
.التصميم الإفتراضي للمقطع
في صفحة تحرير HTML القالب نحن نكتب بلغة xml حيث نكتفي بوضع الوسم <b:section> السابق للدلالة على وجود مقطع ، لكن ما يظهر في المتصفح أثناء عرض المدونة شيء اخر ينتمي للغة HTML .
حيث بدل من أن نجد في المتصفح الوسم </"b:section id="section1> فإننا نجد ببساطة .
<div class="section" id="section1">
...
</div>
...
</div>
يظهر المقطع في المتصفح على شكل صندوق div بسيط معرف بـclass ذا قيمة section و id يأخذ القيمة التي تدخلها في التصميم .
لهذا إن أردت تخصيص المقطع بتحديد عرض مناسب له أو خلفية ما فيكفي كتابة الـCSS داخل عنصر <b:skin>
<b:skin><![CDATA[
div.section#section1 {
الخصائص هنــا
div.section#section1 {
الخصائص هنــا
}
]]></b:skin>
الأدوات
تأتي قوالب بلوجر عادة فارغة من الأدوات ، إلا بعض الأدوات التي يرى مصمم القالب تثبيتها في القالب ، و من أروع الأدوات التتي تتوفر عليها بلوجر هو أداة javascript/html و هي الأداة الأكثر إستعمالا من بين جميع الأدوات .
لا أريد أن أبتعد كثيرا .
الأدوات هي ما يسمى بالإنجليزية widget و يتم إدخالها في القالب بإدخال عنصر <b:widget> ، هناك طريقة أخرى أبسط تمكننا من إدخال الأدوات في القالب ، فبعد تصميم المقاطع في القالب نذهب إلى واجهة تصميم الصفحة و نضيف أدواتنا بطريقة عادية .
هناك بعض الأدوات تكون ثابثة ، لا تستطيع سحبها من مكانها كأداة ' رسائل المدونة الإلكترونية ' عادة .
فعندما تصمم القالب لا تفكر بكود الأدوات أبدا . يكفي أن تصمم المقاطع و أن تضيف الأدوات من واجهة تصميم الصفحة . إن فعلت ذلك مسبقا فإنك ستجد أن هناك عنصرا جديدا أضافه بلوجر داخر عنصر المقطع الذي أضفت فيه الأداة كالتالي :
نفترض أنك أضفت أداة javascript/html
<b:section id="section1">
<b:widget id="HTML1" locked="false" title="Javascript/HTML" type="HTML" />
</b:section>
<b:widget id="HTML1" locked="false" title="Javascript/HTML" type="HTML" />
</b:section>
هناك سمتين جديدين هنا : locked و type .
السمة locked
تأخذ السمة locked قيمتين فقط true و false :
بالطبع هناك بعض الأدوات يجب أن تكون مثبثة في القالب كأداتي ' رأس الصفحة ' و ' رسائل المدونة الإلكترونية ' لذلك لا نتس تغيير قيمة locked إلى true بعد إضافتهما .السمة locked
تأخذ السمة locked قيمتين فقط true و false :
- إذا كانت قيمة true فإن الأداة ستصبح ثابثة في القالب و لا يمكن أن تزاح كالأدوات التي نضيفها .
- إذا كانت القيمة false فإن الأداة تعود إلى طبيعتها و تصبح قابلة للإزاحة كما كانت .
السمة type
تأخذ قيم كثيرة من الغباء حفضها كاملة .
و هذه القيمة التي تأخذها سمة type تحدد نوع الأداة .
فمثلا القيمة HTML تعني أن الأداة هي Javascript/HTML
القيمة Header تخص أداة ' رأس الصفحة '
القيمة LinkList تخص أداة ' قائمة الروابط '
....
....
.... القائمة طويلة سأدعك تكتشفها بنفسك
....
أما القيمة التي تخص أداة ' رسائل المدونة الإلكترونية ' فهي Blog و لا تنساها
.ستلاحظ أنه ليس هناك أداة ' رسائل المدونة الإلكترونية ' في القائمة التي تقدمها بلوجر لذلك يجب أن تدخلها يدويا .
فداخل عنصر المقطع الذي ترى أنه مناسب للأداة في تصميمك أضف العنصر التالي .
<b:section id="section1">
<b:widget id="Blog1" locked="true" type="Blog" />
</b:section>
<b:widget id="Blog1" locked="true" type="Blog" />
</b:section>
شيء اخر : يجب الإحتفاظ بقيم السمة Type كما هي تماما ، فالأحرف الكبيرة و الأحرف الصغيرة ليستا نفس الشيء ، لاحظ أن القيمة Blog تكتب بحرف B كبير و الحروف الأخرى log صغيرة ، و نفس الشيء بالنسبة للقيم الأخرى .
التصاميم الإفتراضية للأدوات
فكما يظهر المقطع في المتصفح على شكل صندوق <div> تظهر الأدوات بتصماميم إفتراضية خاصة بها و هي أكثر تعقيدا و تختلف من أداة إلى أخرى . و هي تحتاج إلى شرح كثير .
لن أقوم بشرح التصاميم الإفتراضية لجميع الأدوات ، بل سأكتفي بثلاث أدوات أرى أنها الأكثر أهمية للمدونة ، و ليس فقط تصميمها الإفتراضي الذي يظهر في المتصفح بل حتى تصميمها الداخلي في بلوجر، و أقصد الضغط على الزر الصغير
و الأدوات الأربع التي سأطرق إليها هي :
- أداة ' رسائل المدونة الإلكترونية ' بكامل تفاصيلها بتخصيص فصل كامل لها إن شاء الله .
- أداة ' قائمة الروابط ' التي سنجعل منها قائمة أفقية بإعتماد خصائص CSS .
- أداة ' ترقيم الصفحات ' رغم أنها لا توجد في بلوجر و يتم إخالها بكود Javascript إلا أنني أرى أنها أهم أداة تصفح .
مبدددددع
ردحذفمدونة في غاية الروعة!
ردحذفموفق :)
دااائماً، مبدع أخى محمد باركك الله وجزاك الله خيراً ، فى انتظار الدرس التالى :)
ردحذفما شاء الله شرح مفصل ورائع
ردحذف.. أتمنى لك المزيد من التفوق
شكرا لك أخي محمد على شرحك الرائع
ردحذفمدونتي www.2lkasir.com
شكرا لك أخ ali alsayd ... مدونتك جميلة
حذففي الحقيقة هي ليست مجرد تدوينة ولا حتى درس إنها "مرجع" لكل من يدخل عالم بلوجر
ردحذفولا أدري كيف غفلت عيني عن قراءتها إلى الآن ؟؟!!
والشرح واضح وكالعادة مميز وأرجو أن تأخذ هذه السلسلة الأولوية من وقتك لأنني
بانتظار الدرس الرابع بفارغ الصبر ..
وربما بانتظاره على أحر من الجمر..
ولأن الموضوع رائع ويدعو للفخر..
أصبح تعليقي مقفى مثل الشعر..
لك مني أجمل تحية وجزيل الشكر..
شكرا لك أخ رواد السيد على تعليقك الجميل - جزاك الله خيرا -
حذفمشكور أخي ..
ردحذفطرح مفيد
الله يجزيك الخير ويرضى عنك
تحيتي
شكرا جزيلا معلومات في قمة الروعة
ردحذفhttp://www.AWSurveys.com?R=490257
حذفأريد تعلم تصميم قالب بلوجر من الصفر
ردحذفاحاول تصميم قالب لمدونة بلوجر ولكن ليس عندي خبرة بلغة HTML
ردحذففأرجو مساعدتي في ضبط مكان الصورة التي تظهر مكان العنوان فهي موجودة على اليمين وأنا أريدها في الوسط .كيف ذلك؟؟؟
هذا رابط المدونة
http://mathgroub2012.blogspot.com/
السلام عليكم مشكور اخي عاشق لكن وين الفصل القادم !
ردحذفقريبا أخي
حذفمشكور اخي ف انتظار المزيد
ردحذفااخى دروسك جميله جدا والاجمل الطرح الجميل والسهل فى الشرح لكن انا عندى سؤال انا مبتدأ فى عالم البلوجر وبادئ اتعلم من مدونتك ازاى اصمم قوالب وايضا بتعلم لغه html ,css ولكن سؤالى شروحاتك فات عليها سنتين هل تختلف عن جديد بلوجر اليوم وجديد html,css ولو تعلمت دروسك ااقدر اتعامل مع الجديد اليوم فى البلوجر وفى لغة html,css ولا فى تغييرات بسيطه...ارجو الرد على سؤالى حتى تتضح لى الامور وشكرا لك
ردحذفااخى دروسك جميله جدا والاجمل الطرح الجميل والسهل
ردحذفمشكور اخي ف انتظار المزيد
والله مبدع أشكرك جزيل الشكر
ردحذفموضوع جميل
ردحذفالكل يريد ان يصنع قالبا في وقت قصير
صناعة القالب يحتاج الي وقت فيجب عليك التعلم مع الصبر طويلا وتطبيق ما تتعلمه ستجد نفسك تصمم قالبا
اتمني التوفيق للجميع