ghggg

تصميم قوالب بلوجر - الدرس الأول : تعريف الـ xml واختلافه مع الـ html

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

قبل الخوض في الدورة بإذن الله أذكر أولا على أهمية التعليقات

وكذللك للخوض في الدروس يجب ان تكون لك دراية في HTML  & CSS

لأننا اليوم سنتكلم على ما هو خاص بالبلوجر من وسوم وشروط وغيرها

وبالطبع سنحتاج بعض وسوم ال HTML 

وان تكون لك خبرة في CSS وطبعا هاته الدورة ستكون أيضا بالمدونة

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

جزاكم الله خيرا 

أذكركم إخوتي الكرام باحد أهم الأدوات لمساعدة المصمم

أدوات خاصة لمستعملي الفايرفوكس موزيلا

ستجدونها بمدونة عرب سوفت

من هنا

أدوات خاصة لمستعملي جوجل كروم

ستجدونها بمدونة كن مدون

من هنا

أما بعد إخوتي الكرام فل نمر لدرسنا اليوم

 تعريف الـ XML واختلافه مع الـ HTML 

طبعا العديد يتسائل حول الإختلاف بينهم وماذا يعمل كل واحد من هما

لنقل أن الـ XML ليست بديلة للـ HTML  بل ولنقول أنها مكملة لها

حيث ان كل منهما قد صمم لهدف معين على الويب

 EXtensible Markup Language وهي لغة وصف أكثر من HTML

وصممت لوصف البيانات اي: لغة رمزية .

تعريف الـ XML : فالـ XML قد صممت لوصف البيانات و تخزينها و ارسال المعلومات و التركيز على نوعية البيانات وهذا مايوجد بمدونات البلوجر

فهي تقريبا كقاعدة البيانات التي نجدها في المنتديات والمواقع لكن بنوع آخر أنها لاتحتوي على لغة الـ PHP

تعريف الـ HTML : الـ HTML فقد صممت لعرض البيانات و التركيز على كيفية عملها بدل تخزينها

هذا مايمكنني ان اقوله حول أعظم لغات البرمجة

لذلك نجد أن الـ XML أكثر تعقيدا وصعبة التعلم في وقت وجيز

فهيا تحتوي على وسوم بعضها مشابه للـ HTML والآخرى مختلفة عنها تماما كما انها تحتوي على وسوم شرطية كما لو نقل أنها نتاج خليط يجمع الـ HTML و PHP لكن بشكل آخر فهي تتسم بادوات شرطية تختلف طبعا عن الـ PHP

ارجوا ان لاتتوهوا في التعريف مايهمنا هو التطبيق الذي عبر الممارسة

 سوف يصبح عليكم من السهل تعلم كل هاته الأشياء

التي تعتبر حقا بمثابة كنز يتواجد بالويب

وإلى لقائنا في الدرس القادم

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

===============================================================

===============================================================

تصميم قوالب بلوجر - الدرس الثاني : أساسيات تصميم قالب بلوجر الجزء الاول - المحددات

طبعا لأي دورة تصميم موقع او قالب مدونة

نجد هناك اساسيات يجب ان يعرفها المصمم

وستكون هي درسنا اليوم وهو

 الدرس الثاني : أساسيات تصميم قالب بلوجر الجزء الاول

بعض أساسيات قوالب بلوجر التي سنذكرها بهذا الجزء من الدرس

طبعا هاته الدورة ستعرف الجدية وستكتمل بإذن الله

الآن نأتي إلى تعريف شامل حول المحددات وهي خاصة بتعريف المنطقة التي نعمل عليها للـ css لللوسوم او المتغيرات

id = هو عبارة عن محدد رئيسي يوجد بالـ HTML وهو يخبر الـ CSS بأننا سنعمل على منطقة ما ويرمز له بالـ CSS بالعلامة #

class =  له نفس خواص الـ id فهو عبارة عن المحدد الثانوي ويرمز له بالـ CSS بالنقطة .

كمثال

صيغة الـ HTML الخاصة باستدعاء الـ CSS عبر المحدد id

<div id='outer-wrapper'>

</div>

صيغتة على CSS

#outer-wrapper { }

صيغة الـ HTML الخاصة باستدعاء الـ CSS عبر المحدد class

<div class='outer-wrapper'>

</div>

صيغتة على CSS

.outer-wrapper { }

كما رأيتم لاحظتم الفرق الواضح بينهم لما يكون المتغير عبارة عن id في الـ HTML نعرفه في الـ CSS عبر وضع شباك # قبل المتغير أو الوسم الذي نريد استدعائه

أما لما يكون المتغير عبارة عن class في الـ HTML نعرفه في الـ CSS عبر وضعنقطة . قبل المتغير أو الوسم الذي نريد استدعائه

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

لكي لايجدون غموضا في الدورة

ولكن مع ذللك أذكرك بأنه بجب ان تكون لديك معرفة حول هاتين اللغتين جيدا

وترقبوا الجزء الثاني في يوم آخر يجمعنا

لمن يريد متابعة الدورات أنظر إلى هذا التوقيت

من هنا

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

تقديرا للمجهود

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

==========================================================================================================================

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

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

لنتمم إخوتي الكرام مراسم الدورة الخاصة بتصميم قوالب بلوجر

أريد اولا أن اوجه لكم لماذا أتاخر في عمل درس بعد درس وهذا راجع لعدم عملكم

 بطلبي السهل والوحيد الا وهو التفعال والتعليق

لاحظت أزيد من 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>

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

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

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

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

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

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

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

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

الدرس الرابع : العلامات الشرطية المستعملة بقوالب بلوجر

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

سعدت بلقائكم في درس من أكثر الدورات إقبالا وبحثا

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

تعريف حول الوسوم الشرطية المستعملة بقوالب بلوجر

مقدمة الدرس

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

هاته الوسوم او لنقل العلامات الشرطية أي Conditional Tags

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

والتي تقوم بإظهار و‘خفاء ما نريده عبر شرطنا على المتصفح

وهاته العلامات هي مايميز قوالب بلوجر عن باقي تصاميم المواقع الأخرى كالووردبريس والمواقع والمنتديات... إلخ

كما انه ليس من الضروري ان تكون لديك معلومات او احترافك للغة الـ html فقط مفاهيم يجب ان تعرفها اولا لتعرف كيفية التعاملمع قوالب بلوجر لتصمم قالبا بالشكل الذي تريده انت واستغنائك عن البحث عن قوالب اجنبية وتعريبها او شيئا من هذا القالب

الشرط  B:IF>

فإذا نظرت إلى محتوى قالبك ستجد انه لايخلوا ابدا من هذا الوسم

فحسب ملاحظتي انه خاص فقط ببلوجر عبر تحليلي الشخصي

الحرف "b" : يرمز لبلوجر

و "if" : اداة شرطية وهي "إذا"

هاته العلامات سنشرحها بمفهوم منطقي وبسيط وهي إما لتنفيد أمر أو عدة  أوامر أو عدم تنفيدها

بالنسبة لوسم بلوجر سيكون بهذا الشكل مع إضافة if الشرطية

<b:if ......... >

</b:if>

سنلاحظ وسم بداية ووسم لإغلاقه

فالنقط التي بالأحمر هي التي نضع مكانها الاوامر

وهو إما تحقيق الأمر وتنفيده وإغلاقه مرة أخرى

مثال حول أمر نضعه داخل الوسم

<b:if cond='condition == X'>
أظهرني عندما يتحقق الشرط ويساوي القيمة X
</b:if>

يعني عندما سيتحقق الشرط ويساوي القيمة X فإن الأمر يصبح صحيحا وبالتالي ستم تنفيده مباشرة

أما غذا لم يتحقق الشرط فإن الامر سيتم تجاهله مباشرة

لكن مثلا إذا أردنا إنشاء اكثر من امر فإننا نضيف هاته العلامة الشرطية بعد كل شرط

وهي esle الذي يتم إضافته بدل if

مثال

<b:if cond='condition == X'>

    <b:if cond='condition == Y'>
    أظهرني في حال تحقق الشرط واي
    </b:if>
  
<b:else/>
أظهرني في حال عدم تحقق الشرط أكس
</b:if>

الآن يمكنك ملاحظة مالذي سيقع

 أي أنه إذ لم يتحقق الشرط الاول فالشرط سيعتبر ملغيا وسيتجاهله المتصفح

وبالتي سيحقق الأمر الذي بعده مباشرة

إلى هنا ينتهي الدرس الاول لكن في الدرس القادم سنتعمق اكثر في هاته الامور

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

تحياتي اخوكم اسامة ولاتنسوا التعليق

==================================================================================================================

تصميم قوالب بلوجر - الدرس الخامس : أنواع الصفحات بقوالب البلوجر

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

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

وآتاسف عن التأخير في التدوين والسبب هو تصميم القالب الذي على مدونتي الآن :)

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

الدرس الخامس : أنواع الصفحات بقوالب البلوجر

 الدرس مهم جدا جدا وأنبه إلى هذا فهذا سيفيدنا اكثر وهو خاص بالتحكم الشامل في إظهار شيئ مثلا في صفحة وعدم إظهاره في الأخرى

الىن يجب أن تكون قد تعلمت كيفية التعامل مع الدوال الشرطية مثلا if 

كما يجب ان أقول أن فقط بعض الشروط هي مايمكن إستعمالها وليس أي شيء يخطر في بالك يمكن ان تجعله شرطا.

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

 وطبعا الكثير يريد الإداع في قالب خاص به

إذا فل نتعلم وإنشاء الله يصبح بمقدوركم التصميم

النوع 1 - صفحة المدونة الرئيسية.
النوع 2 - صفحات فردية وهي الخاصة بعرض التدوينات و التعليقات.
النوع 3 - صفحات المحتوى وتظهر عند التنقل من خلال المشاركات الأقدم والأحدث.
النوع 4 - صفحات الأرشيف.
النوع 5 - صفحات ثابتة.
النوع 6 - صفحات متغيرة.

 

الآن بعد ان عرفت الأنواع الموجودة لنشرح كل صفحة على حدى، 

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

نوع 1 :  صفحة المدونة الرئيسية DATA:BLOG.HOMEPAGEURL 

هذا النوع خاص وليس كباقي الانواع كما انه لايعتبر من الـ PageType

وهذا الاخير خاص فقط بعرض ما نريده نحن في الصفحة الرئيسية فقط

مثال

<b:if cond='data:blog.url ==data:blog.homepageUrl'>

أظهر ما أريده أنا في الصفحة الرئيسية فقط

</b:if>

مثلا إذا لاحظتم واجهة الخدمات الخاصة بالتصميم ستجد انها تظهرفقط في الصفحة الرئيسية أي انني استعملت هذا النوع بالنسبة لواجهة الخدمات

النوع 2 - صفحات فردية وهي الخاصة بعرض التدوينات و التعليقات ITEM

وهذا النوع ستجده بكثرة في قالب بلوجر ما

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>

أظهر ما أريده أنا في صفحة التدوينات فقط

</b:if> 

ستجد ان داخل هذا النوع القسم الخاص بالتدوينة والتعليقات

كمثال الكل يعرف الإضافات التالية :

نبذة عن الكاتب

قد يهمك أيضا

ساعدنا بنشر هاته التدوينة

فطبعا إذا لاحظت النوع قبل هاته الإضافة ستجد انه النوع item

مثلا

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='post-author'>--------------</div>

</b:if>

النوع 3 - صفحات المحتوى INDEX

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

او عند البحث او عند الضغط على تسمية ما

مثال

<b:if cond='data:blog.pageType == &quot;index&quot;'>

أظهر ما أريده أنا في صفحات المحتوى فقط

</b:if>

النوع 4 - صفحات الأرشيف archive

هذا النوع خاص فقط واستعماله ليس بالكثير فهو يقوم بإظهاركافة التدوينات بشهر ما أو سنة ما

المهم إستعماله محدود ولس مهما جدا جدا فقط يستعمل في الرشيف

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

أظهر ما أريده أنا في صفحات الأرشيف فقط 

</b:if>

النوع 5 - صفحات ثابتة static_page

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

الكل يعرف الصفحات التالية :

إتصل بنا

إنظم إلينا

الدردشة مثلا

فهي صفحات ثابثة ومستقلة

مثال

<b:if cond='data:blog.pageType == &quot;static_page&quot;'> 

أظهرني داخل الصفحات الثابته فقط 

</b:if>

فطبعا إذا لاحظت النوع قبل هاته الصفحات ستجد انه النوع static_page

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

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

لغة الـ HTML وتقنية الـ Css

بعضكم سيخبرني كيف فعلت هذا لكن ليس الآن فلكل شيء درسه الخاص :)

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

النوع 6 - صفحات متغيرة URL.HTML

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

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

 كالخلفيات وألوان الخطوط وحجمها وسمكها ونوعها إلخ...

أظن انك قد فهمت ما ارمز إليه

الـ url.html أعني به رابط التدوينة

هل في شخص سيجرب هاته الطريقة ويضع استايل خاص بكل تدوينة ؟؟؟

المهم مثال عن هذا النوع

<b:if cond='data:blog.url == &quot;URL.html&quot;'>

 أظهرني في الصفحة المحددة فقط 

</b:if>

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

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

مما يعني أرشفة سريعة جدا جدا لتدويناتك وانا أخصدائما جزءا من وقتي لكي تتأرشف مواضيعي بسرعة فائقة ^^

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

<b:if cond='data:blog.url == &quot;URL.html&quot;'>
    <meta content='هنا تضع الوصف الخاص بالتدوينة' name='description'/>
    <meta content='هنا تضع الكلمات الدلالية الخاصة بالتدوينة' name='keywords'/>
</b:if>

ستقوم بتغيير URL.html  برابط التدوينة التي تريد أرشفتها

ثم تضع وصفا لها وكلمات دلالية خاصة بها

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

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

مثلا قم بالذهاب إلى جوجل وابحث عن تصميم قوالب بلوجر

وانظر للنتيجة وأرجوا إخباري في أي مرتبة ظهرت مدونتي بالنسبة لهاته الجملة

وقد تكون هاته النتيجة هي دليلنا حول الارشفة السريعة عبر هاته الطريقة لأن مدونتي هي التي تظهرفي السطر الاول باول صفحة لكن أطلب منكم ان تقولوا عبر تعليق في مرتبتي عند البحث عن تصميم قوالب بلوجر لكل شخص من بلد معين ;)

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

تحياتي اخوكم اسامة ولاتنسوا التعليق

 

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

==============================================================================================================

دورة تصميم قوالب بلوجر - الدرس السادس : التسميات (Labels)

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

بعد أن برهن لي الكل حول مدى أهمية هاته الدورة

وذلك بتفاعلكم معها فطبعا من واجبي إتمامهما بإذن الله

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

نمر إلى درسنا اليوم شرح التعامل مع التسميات بشكل بسيط وهذا الدرس مهم أيضا

Labels وهي التسميات أو التصنيفات أو أقسام المدونة

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

 أي الزائر لمدونتك ليقصد القسم الذي ريده

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

الشكل الأول : الصندوق LABEL لعرض التسميات بمربعات القائمة الجانبية WIDGET

طبعا هاته الاداة هي التي نجدها بلوحة تحكم المدونة عبر غضافة اداة ثم اختيار اداة التسميات

ولها شكلين إما على شكل قائمة أو سحابة

وبعلامة الشرط يمكنك أن تُظهر محتويات أعلى هذا الصندوق أو أسفله

 أو تتحكم في بقية عناصر الصفحة عن طريق css والشرط كالتالي:

<b:if cond='data:blog.url == data:label.url'>
أظهرني فقط في الصفحات التى تظهر عند الضغط على اي تسميه
</b:if>

رغم أن الشرط السابق يدخل ضمن صفحات الروابط كما تعلمنا سابقاً

إلا أنني لم أدرجه معهم لأنه يكون فعال فقط في حاله وضعه ضمن الصندوق Label 

ويظهر مفعوله في الصفحات التى تعرض النتائج بعد الضغط على أي تسميه.

 

الشكل الثاني: داخل التدوينات التى تحمل تسميه معينه

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

تسميه معينه كالتالي:

<b:if cond='data:label.name == &quot; المدونة التعليمية للحاسوب&quot;'>
أظهرني فقط في التدوينات التى تحمل التسميه المدونة التعليمية للحاسوب
</b:if>

كل ما يمكنك فعله هنا هو تحديد محتوى مخصص يظهر فقط عندما يقرأ الزائر التدوينات التى تحمل التسميه المحددة كإعلان مثلاً 

أو 

أيقونة تميز بها مواضع قسم معين

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

  

الحلقات التكرارية LOOPS

لتطبيق أي من الشرطين السابقين يلزم وضعهم داخل حلقة loops وهي موجودة في كل لغات البرمجة تمكني من تكرار كود معين لعدد من المرات، وتجدها في القوالب بالتعليقات comments والتدوينات post و موجودة أيضا في غالبية مربعات القائمة الجانبية widget ومن بينها الصندوق Label.

لتفعيل الشرط داخل القائمة الجانبية يوضع داخل loop بهذا الشكل:

<b:loop values='data:labels' var='label'>

  <b:if cond='data:blog.url == data:label.url'>  أظهرني فقط في الصفحات التى تظهر عند الضغط على اي تسميه
  </b:if>

</b:loop>

وداخل التدوينات يوضع في loop آخر بهذا الشكل:

<b:loop values='data:post.labels' var='label'>

  <b:if cond='data:label.name == &quot;المدونة التعليمية للحاسوب&quot;'>
  أظهرني فقط في التدوينات التى تحمل التسميه المدونة التعليمية للحاسوب
  </b:if>

</b:loop>

هذا النوع من علامات الشرط يعتبر أكثر تعقيداً لأنها مرتطبه بمتغيرات أخرى، وتستغرق وقت أطول لاستخدامها بكفاءة ولكن مع كثرة التجربه سوف يسهل عليك تطويعها بالقالب وتخصيص تدويناتك بشكل جذاب

إلى اللقاء في الدرس القادم وبعد الدرس العاشر سيبدأ التطبيق صوت وصورة إنشاء الله

==========================================================================================================

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

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

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

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

تعريف كل وسوم البلوجر الجزء الأول

هاته الصورة ستشرح لكم الأمر لكن انا سأضيف وصفا لكل وسم

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

 

 

body : وهو جسم المدونة أي الجزء الكلي للمدونة وهو الخاص بوضع خلفية المدونة مثلا.

Outer-wrapper : لديه نفس دور جسم المدونة لكن لديه دور التوسيط وهو اهم دور وهو يحتوي على الأجزاء الثلاث الهيدر و المحتوى والفوتر.

Header-wrapper : خاص برأس الصفحة أي الهيدر ويحتوي على شعار المدونة والإعلان إذا أردت. 

Header : شعار المدونة اي اللوجو.

Top-Ads : وهو الإعلان ويمكنك وضعه أولا وبالمقاس الذي تريده أنت.

content-wrapper : وهو المحتوى الذي يشمل الـ main-wrapper و الـSidebar كذلك هو خاص بالتوسيط مثلا وعمل خلفية خاصة بالمحتوى تكون مغايرة لخلفية الجسم.

main-wrapper : وهو الجزء الخاص بالتدوينات فقط.

Post : وهي التدوينات حيث يمكننا جعل شكل التدوينة بتنسيق احترافي ولتخصيص أكثر فهي تحتوي على التالي مثلا :

Post H2 : عنوان التدوينات.

post-meta : هذاالوسم ليس افتراضي ولايكون على البلوجر بل يجب إضافته عبرإضافات البلوجر بالمدونات وعمت درس حول إضافتها.

post-body : وهو جسم التدوينات.

sidebar-wrapper : وهي الجزء الخاص بالقائمة التي تكون بالمدونة ويمكن عمل قائمة واحدة او إثنان كما بمدونتي :) .

Sidebar : وهي القائمة الجانبية ولتخصيص اكثر نجدها بهاته الوسوم على css مثلا :

.sidebar

.sidebar h2

.sidebar ul

.sidebar ul li

.sidebar ul li a

.sidebar .widget

Footer-wrapper : وهو ذيل القالب اي الفوتر يشمل ثلاث أقسام من القوائم و كذلك الجزء الخاص بالحقوق وحقوق مصمم القالب مثلا.

 

 الآن تعرفنا على الوسوم الاساسية التي قد نبني بها قالب بلوجر

وسنتمم باقي العناصر كالتعليقات والبروفيل والأرشيف إلخ....

إلا هنا ننتهي من هذا الجزء وبانتظار تعليقاتكم وشكرا

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

======================================================================================================

مقدمة :حصريا دورة تصميم قوالب بلوجر من الصفر حتى الإحتراف

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

وبعد طول الإنتظار وشغف وحلم كل مدون دخل إلى عالم التدوين

أن يصنع قالبا من صفحة فارغة إلى قالب احترافي خاص به وبذوقه الخاص

تعجبت كثيرا فانا بحث كثيرا وكان حلمي ان أصنع قالب خاصا بي من الصفر نعم من الصفر

 ولا وجدت موضوعا يلبي رغبتي بل ووجدت بعض الدورات التي تعمل مقدمة حول موضوعنا اليوم

 وأنتظر بفارغ الشوق لمتابعتها لكن لا تكتمل مع الأسف

والحمد لله بفضل خبرتي في HTML و CSS وبعض المواقع الأجنبية

أصبحث اصنع قوالب من الصفر بالضبط من صفحة خالية

أنا حقا أطيل في مواضيعي كلها

وهذا لصالحي لتقييم صفحاتي للحصول على بيج رانك عالي

المهم هذا ليس موضوعنا اليوم

موضوعنا اليوم هو مقدمة حول

 دورة تصميم قوالب بلوجر من الصفر حتى الإحتراف

دروس الدورة بإذن الله لم أنظم الدروس بعد وعنونتها لكن سيكون التالي بإذن الله

مقدمة الدورة

الدرس الاول :تعريف الـ xml واختلافه مع الـ html

 الدرس الثاني : أساسيات تصميم قالب بلوجر الجزء الاول

الدرس الثالث : أساسيات تصميم قالب بلوجر الجزء الثاني

الدرس الرابع : المتغيرات الخاصة بقوالب بلوجر

الدرس الخامس :تعريف الـشروط المستعملة بقوالب بلوجر الجزء الاول

الدرس الخامس :تعريف الـشروط المستعملة بقوالب بلوجر الجزء الثاني

 الدرس السادس : لمحة حول تجهيز قالب بلوجر للمتصفح وتعريفه على انه xml

 الدرس السابع : الوسوم الرئيسية والثانوية مع تعريف مختصر الجزء الاول

 الدرس الثامن: الوسوم الرئيسية والثانوية مع تعريف مختصر الجزء الثاني

الدرس التاسع : لمحة حول الـ css

 الدرس العاشر: بداية التطبيق العملي -إنشاء قالب بلوجر خاص- الجزء الاول

 الدرس إحدى عشر : بداية التطبيق العملي -إنشاء قالب بلوجر خاص- الجزء الثاني

 الدرس إثنى عشر : بداية التطبيق العملي -إنشاء قالب بلوجر خاص- الجزء الثالث

 الدرس الثالث عشر : بداية التطبيق العملي -إنشاء قالب بلوجر خاص- الجزء الرابع

 الدرس الرابع عشر : بداية التطبيق العملي -إنشاء قالب بلوجر خاص- الجزء الخامس

 الدرس الخامس عشر : بداية التطبيق العملي -إنشاء قالب بلوجر خاص- الجزء السادس

 الدرس السادس عشر : بداية التطبيق العملي -إنشاء قالب بلوجر خاص- الجزء السابع

 الدرس السابع عشر : بداية التطبيق العملي -إنشاء قالب بلوجر خاص- الجزء الثامن والأخير

النهاية ومقدمة حصرية تمهيدية حول دورة إنشاء إضافات بلوجر خاصة بك

كالتبادل الإعلاني

المتابعة عبر الأيقونات الإجتماعية

الإشتراك عبر البريد الإلكتروني

وغيرها من الإضافات

أرى أن الدروس كثيرة لكن هذا لدواعي التبسيط والتسهيل عليكم

 لفهم واحتراف تصميم قوالب بلوجر

وترقبوا المزيد من الدورات حيث سأجعل مدونتي موقعا خاص بالدورات الحصرية

ومكانا يهدف إلى الإرتقاء بالمستوى العربي

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

الشرط هو تمهيد لإتمام الدورة

التفاعل هذا هو شرطي التفاعل عبر التعليقات والإستفسارات وأتمنى عدم الإبخال علي

 ولو بكلمة شكر إن أفدتك عزيزي الكريم

وكذلل تقديرا لمجهودي في الكتابة وإنشاء الصور 

وغيرها لؤوصل لكم ما تعلمته بأبسط مايمكن

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

وسأعمل بالطريقة التالية

كل درس وضعته ولو كان بسيط داخل هاته الدورة يجب أن لايقل عن 10 تعليقات

لأباشر بالدرس الذي بعده

أنا عملت هكذا فقط لأعرف أن هذا المجهود لايذهب سدى

ولاتنسوا الإشتراك عبر البريد الإلكتروني 

لأنني سوف امنح 3 اشخاص عبر القرعة كتابا إلكترونيا من صنعي حول تصميم قوالب بلوجر باحترافية

فلا تفوت الفرصة

ولاتنسوا التعليقات اهم بالنسبة لي كثيرا

لذلك أريد تعليقات في هذه المقدمة لأعرف كم من شخص متابع هنا

والسلام عليكم

http://arabetutorial.blogspot.com/2013/04/blog-post_841.html

mostafa hamada

10:15 ص

إقـرأ المزيـد..