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

تصميم قوالب بلوجر - الدرس الثالث : المحتوى الأساسي بقالب بلوجر وتعريف خاص لكل جزء


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

لنتمم إخوتي الكرام مراسم الدورة الخاصة بتصميم قوالب بلوجر
أريد اولا أن اوجه لكم لماذا أتاخر في عمل درس بعد درس وهذا راجع لعدم عملكم
 بطلبي السهل والوحيد الا وهو التفعال والتعليق
لاحظت أزيد من 500 مشاهدة بالموضوع الواحد الخاص بالدورة
 والمشكل التعليقات لاتتعدى العشرة
والله أنا أجهد نفسي في كتابة هذا المقال مثلا وطريقة تبسيط الشروحات وبعضكم يبخل علي 
ولو بكلمة " بالتوفيق في إتمام الدورة " أو غيرها فقط  ولو قلت " شكرا" 
 4 حروف لاغير فلماذا تبخلون علي ولو بكلمة شكر
إنني اخبركم أنني أتمم هاذه الدورة فقط لأن بعضكم من يقدر المجهود و يضع تعليقا
كما أنني لست بأناني يقفل المعلومة فانا أظل أبحث عن كل جديد لآتي به لكم لتستفيدوا

هههههه أظنني خرجت عن صلب الموضوع لكن فقط للتذكير بأهمية التعليق

لنمر لدرسنا اليوم

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

الآن نمر إلى ماهو أكثر تشويقا 

الدرس الثالث : المحتوى الأساسي بقالب بلوجر وتعريف خاص لكل جزء



يجب أن تعرف أن قوالب بلوجر تحتوي على ثلاث أجزاء لتعرف كيف نتعامل مع القالب وهذا مايميز البلوجر

وجود جزء خاص بالبلوجر وهو الجزء الثاني


Head : الجزء الأول الذي يتكون من تعريف القالب للمتصفح والميتا تاج والجافا سكريبت وغيرها كما أن بداخله نجد المحتوى Skins
Skins : الجزء الثاني خاص بعرض أكواد الـ css الخاصة بالقالب الذي نريد تزينه وتوزيعه بالشكل الذي نريد
Body : الجزء الثالث الخاص بوسوم خاصة ببلوجر وأخرى بالـ Html أي وسوم عامية

هذه هي بنية الأجزاء الثلاث
<head>
<b:skin><![CDATA[ جميع أكواد الـسسس هنا ]]></b:skin>
</head>
<body>
</body> 
طبعا نحن نعرف لكل وسم بداية, وسم لإغلاقه

بالنسبة للجزء الثاني ولنبسطه أكثر

 فإذا لاحظت هو من وسمين اثنين واحد مفتوح والآخر لإغلاقه

<b:skin></b:skin>

إذا لاحظت ستجد حرف b ثم نقطتان ثم الوسم وهذا ما يميز البلوجر , فحسب منظوري الشخصي فإن الحرف باء يرمز لبلوجر
لذالك نراها في أغلب وسوم القالب مثلا

<b:section></b:section>

<b:widget></b:widget>

هاته من الوسوم الخاصة ببلوجر فقط سنتكلم عنها لاحقا

فل نكمل حديثان عن الجزء الثاني فقط

وهو skin

طبعا إن وضعت في وسطه اكواد الأنماط css لن يتعرف عليه المتصفح بل ولن يقبل من القالب أصلا
ولهاذا يجب أن نضيف وسطه

<![CDATA[    ]]>

وهو خاص بتعريف الانماط التي بداخله  للمتصفحات ليعلم المتصف انه يتعامل مع قالب xml
وهذا ما يمزه عن قوالب html الخاصة بالمواقع
فجوجل أو لنقل بلوجر فهي تحب أن تصنع أشياءا تخصها فقط لتميزها عن باقي الحاجات الأخرى

ملاحظة : يمكنك أن تضع أنماط Css داخل وسم الستايل

<style> هنا أنماط css </style>
 
كما يمكنك إضافة كود الـداتا بداخل وسم الستايل وهذا لن يأثر في شيئ مثلا

<style><![CDATA[ هنا أنماط css ]]></style>

فحذف كود الداتا بداخل هاذا الوسم لن يأثر بشيء والعكس صحيح

لكن أريد أن اوجه لكم ملاحظة للخيار الصحيح في وضع الاكواد

وستكون بدرسنا القادم إنشاء الله

أوجوا أن أكون قد وفقت في الشرح وإزاحة بعض الغموض

لمن أفدته أرجوا منه دعوة صالحة لوالدي 

ولاتنسوا التعليق وأي استفسار أنا موجود

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

آخر مقالات المدونة

هناك 58 تعليقًا:

  1. المدونة التعليمية للحاسوب ا صالة و ابداع يتجدد مبروك اخي الكريم و شكرا خالص ممكن لو تدردش معي

    ردحذف
  2. العفو أخي الكريم وشكرا على التعليق

    ردحذف
  3. vraiment c'est la premiere fois que j'ai vue ton blog mais c'est magnifique mais aussi le modéle de ton blog et je veux dire merci mais je propose que tu nous donne exemple simple d'un blog fais et nous explique mieux que ça .j'ai un blog et il y a des modéles sont magnifiques comme votre modéle mais j'aime faire moi meme un modéle pour mon blog donc expliquer nous mieux et merci

    ردحذف
  4. شكرا جزيلا لك على تعليقك الجميل
    وبطبيعة الحال، سوف نتحدث حول إنشاء قوالب بلوجر من البداية
    أي سنلجأ لشرح عمل نمودج بالشكل الأكثر شيوعا
    بحيث يمكنك تصميم وتعديل قالبك بالشكل الذي تريده :>)

    ردحذف
  5. بصراحة أنا أحببت قالبك من أول نظرة ونريد أن نعرف كيفية تصميم قوالبنا بأنفسنا وهذا ما ننتظره من هاته الدورة الكريمة بالتوفــــــــــيق وشكراااااااااااااا (h)

    ردحذف
  6. بارك الله فيك استمر اخى والله الكثير من هذه المعلومات المهمة كنت اريدها لانى اعمل اكواد بال html , css و لكن لا اعرف كيف اقوم بتحويلها الى بلوجر
    جزاك الله خيرا و سأظل متابعه معك ان شاء الله

    ردحذف
  7. شكرا لك على التعليق وبدعمكم لنا بالتعليقات فطبعا سنتمم لكم الدورة حتى الإحتراف بإذن الله شكرا لك

    ردحذف
  8. شكرا على مرورك الكريم

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

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

    ردحذف
  11. شكرا على المعلومات المفيدة

    ردحذف
  12. العفو أخي الكريـــــم شكرا على تعليقك الجميل تحياتي

    ردحذف
  13. شكرا جزييييييييلا

    ردحذف
  14. العفو أخي ومشكور على مرورك الطيب

    ردحذف
  15. عندي علم بسيط بالاكواد ولكنك قد أضفت لي الكثير والكثير في ذلك الدرس رائعة
    جزاك الله خيرا وبارك الله لك في والديك

    ردحذف
  16. الله يبارك فيك اخي الكريم وجازاك الله خيرا على تعليقاتك الطيبة :)

    ردحذف
  17. اخي الشرح ينقصه بعض الأمثلة لكيفية اضافات الاكواد بشكل صحيح
    وعلى كل شكرا على المجهود

    ردحذف
  18. شكرا لك على المرور الطيب وأرجوا منك التفاعل مع الدروس وشكرا ^^

    ردحذف
  19. العفو وشكرا على المرور

    ردحذف
  20. رائع اخى معلومات قيمة

    ردحذف
  21. مشكور على المرور ياغالي

    ردحذف
  22. شكرا على المجهود الجبار

    ردحذف
  23. الله يبارك فيك اخي على المرور الكريم

    ردحذف
  24. درس رائع اخي ونتمنى شرح طريقة تصميم قالب بلوجر بالفيديو

    و شكرا لك أخي على مجهوداتك الجبارة و جزاك الله كل خير

    ردحذف
  25. شكرا على مرورك الكريم وطربعا كما في المقدمة ستبدأ الدروس التطبيقية عند الدرس العاشر :>)

    ردحذف
  26. أزال المؤلف هذا التعليق.

    ردحذف
  27. السلام عليكم ، شكرا لك أخي الكريم على هته الدورة :)

    ردحذف
  28. وعليكم السلام أخي بوركت وشكرا على مرورك الطيب :)

    ردحذف
  29. شكرا على جهودك بالتوفيق اخي

    ردحذف
  30. أزال المؤلف هذا التعليق.

    ردحذف
  31. أنت افضل مصمم اخي و نحن ننتضر جديدك (f)

    ردحذف
  32. شكرا لك أخي الكريم :)

    ردحذف
  33. بالتوفيق في إتمام الدورة

    ردحذف
  34. مبدع أخي الكريم انت مبدع حقا واتمنى لك مزيد من التقدم واتمنى ان اصبح مثلك يوما ما تقبل مروري :)

    ردحذف
  35. شكرا لك أخي الكريم على مرورك الطيب ألف شكر لك

    ردحذف
  36. مشكور وياريت تكون الدورة مصورة بالفيديو

    ردحذف
  37. العفو أخي شكرا على مرورك الطيب :)

    ردحذف
  38. شكراً اخي حقاً تستحق كل خير الى الامام (h)

    ردحذف
  39. شكرا اخة الكريم الدورة الرائعة جدا

    ردحذف
  40. (h)
    جميل أخي الكريم

    http://ma3lo-1ma.blogspot.com

    ردحذف
  41. بالتوفيق في إتمام الدورة

    ردحذف
  42. شكرا لك أخي أسامة...حقا هي دروس مفيده (o)
    لكن لدي اقتراح بسيط...في جزء التعليقات..
    لم لا تجعل الرد لتعليقات الزوار بداخل مستطيل التعليق نفسه..بحيث لا يكون الرد في مستطيل خاص كأي تعليق اخر..

    ردحذف
  43. بالتوفيق يا اخي بارك الله فيك

    ردحذف
  44. شكرااااااااااا كثيرااااا على الجهد و بالتوفيق انشاء الله

    ردحذف
  45. شكرااااااااااا كثيرااااا على الجهد و بالتوفيق انشاء الله

    ردحذف
  46. موفق ان شاء الله اكمل والمولى يرعاك

    ردحذف
  47. اللهم اغفر لك ولولدك ولوالدينا ولجميع المسلمين والمسلمات الاحياء والاموات

    استمر وربنا يوفقك ويرزقك بالحلال

    ردحذف
  48. شكر لك اخي دروسك مميزة واصل ابداعك

    ردحذف

إذا أردت عزيزي الزائر إدراج فيديو من يوتوب بتعليق قم بالتالي
[youtube]رابط فيديو يوتوب هنا[/youtube]
كما يمكنك إدراج صورة عبر الكود التالي
[img]رابط صورتك هنا[/img]

جميع الحقوق محفوظة لمدونة المدونة التعليمية للكومبيوتر 2013

تصميم : بويردن