خطوتك الاولى قبل البدء في تصميم قالب بلوجر من الصفر - الاحتراف الجزائري

خطوتك الاولى قبل البدء في تصميم قالب بلوجر من الصفر

خطوتك الاولى قبل البدء في تصميم قالب بلوجر من الصفر ( Basic Structure ) برمجة وانشاء قالب بلوجر من الصفر : خطوتك الاولى قبل البدء في تصميم قالب بلوجر اولا يتم كتابة قوالب بلوجر بلغة XML الترميزية في بعض اجزاء القالب ، حيث تحتوي على اربع أقسام Sections كالتالي : بدءا من بداية القالب ، وهذا يحدد المستند بأكمله في شكل XML واتباع جميع قواعد اللغة الترميزية . هذا القسم مطلوب في جميع القوالب ، ولكن لحسن الحظ نحن لسنا بحاجة إلى إجراء أي تغيير عليه ,Basic Structure ,basic html tags,Summary of Basic HTML Tags, برمجة قالب بلوجر من الصفر, البنية الأساسية, انشاء قالب بلوجر من الصفر,XML ,Identifiable Tags,xml version, first step start design blogger template from scratch ,first step start design blogger template from scratch, template from scratch, how to design blogger template, blogger template development, blogger templates designer software, blogger template software download, templatetoaster, blogger templates 2018, blogger templates 2018 free, there should be one and only one skin in the theme, أول خطوة تبدأ تصميم قالب مدون من الصفر ، قالب من نقطة الصفر ، كيفية تصميم قالب المدون ، تطوير قالب المدون ، مدون قوالب مصمم البرمجيات ، تحميل قالب قالب المدون، templatetoaster، قوالب المدون 2018 ، قوالب Blogger 2018 مجانا ،
شارك :
Basic Structure,basic html tags,Summary of Basic HTML Tags, برمجة قالب بلوجر من الصفر, البنية الأساسية,  انشاء قالب بلوجر من الصفر,XML ,Identifiable Tags,xml version,


خطوتك الاولى قبل البدء في تصميم قالب بلوجر من الصفر ( Basic Structure )


 برمجة وانشاء قالب بلوجر من الصفر : خطوتك الاولى قبل البدء في تصميم قالب بلوجر اولا يتم كتابة قوالب بلوجر بلغة XML الترميزية في بعض اجزاء القالب ، حيث تحتوي على اربع أقسام Sections كالتالي :

القسم الاول :

بدءا من بداية القالب <head>، وهذا يحدد المستند بأكمله في شكل XML واتباع جميع قواعد اللغة الترميزية . هذا القسم مطلوب في جميع القوالب ، ولكن لحسن الحظ نحن لسنا بحاجة إلى إجراء أي تغيير عليه .

القسم الثاني :

بدءا من <head> الى <b:skin> هذا القسم يحتوي على علامات تعريفية للقالب Identifiable Tags والتي تتمثل في الميتا تاج، الايقونة المصغرة favicon ، الكلمات الرئيسية keywords...الخ .

القسم الثالث :

بدءا من <b:skin> الى </b:skin> يحتوي هذا القسم على اكواد الـ CSS التي تحدد مظهر قالب مدونتك، مثلا لون النصوص والروابط حجم الخط وتنسيق التخطيط Layout وغيرها...

ملحوظة هناك بعض المتغيرات التي سنعرفها مستقبلا تشتغل فقط داخل هذا القسم ولا تعمل في حال تم وضعها ضمن <style>  اكواد </style>

القسم الرابع والاخير :

بدءا من الجسم <body> الى نهاية </body> هذا هو القسم الرئيسي للقالب، حيث هنا يوجد راس الصفحة ( Header )، التدوينات او المشاركات ( Posts )، القائمة الجانبية ( Sidebar ) وذيل القالب ( Footer ).

من اجل برمجة قالب بلوجر يجب ان نضع بعض الاكواد الاساسية والبنية الاولية التي تتمثل في تعريف القالب للمتصفح مع اي لغة سيتعامل بها وهي الـ XML الترميزية وبالتالي سيكون الكود هكذا :
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html><html b:version='2' class='v2' 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'/>
<title><data:blog.pageTitle/></title>
</head>
<body>
</body>
</html>

كما نلاحظ الكود يبتدأ بالتعريف الخاص بالمتصفح ماهي اللغة التي سيتم التعامل معها وهي XML بالاضافة الى نوع الترميز الذي هو UTF-8 الذي يدعم العديد من اللغات خاصة اللغة العربية  .

وثانيا نجد Doctype وهو يكون غالبا قبل وسم الـ html لمعرفة اكثر انصح بزيارة هذا الرابط .

داخل وسم الـ html نجد مجموعة من التعريفات اولا على ان القالب بلوجر اصدار 2.0 ثم اتجاه اللغة ثم بعض التعريفات الاخرى لا ضرورة لمعرفتها المهم انه يجب ان تكون بنية القالب كبداية بالشكل اعلاه .

طبعا لو حفظت القالب لن يعمل لان بلوجر تشترط وجود على الاقل وسم واحد من وسوم المحتوى والذي هو Section الذي بدوره يوجد داخله عنصر الويدجيت b:widget .

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='رسائل المدونة الالكترونية' type='Blog'></b:widget>
</b:section>

الان وجب اضافة وسمين ضروريين وبعض التعريفات بين وسمي <Head> الوسمين هما :

<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>


الأول وهو خاص بتعريفات المدونة والثاني هو عنوان المدونة ويكون بالشكل اعلاه .

برمجة قالب بلوجر : رأس الصفحة الهيدر ( Header )



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

مثال عن محتوى الهيدر واداة الهيدر b:section :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='مدونة الاحتراف الجزائري' type='Header'></b:widget></b:section>

شرح لأكواد قالب بلوجر ووظائفها :

Section : اولا المحتوى وهو حامل الادوات .

class : المعرف لتطبيق استايل ما من خلال CSS وكذلك نفس وظيفة المعرف id .

maxwidgets : وهو الحد الاقصى لعدد الاضافات الممكن اضافتها ضمن هذا Section .

showaddelement : اذا كان yes هذا يعني اظهار نص Add New Gadget اي اضافة اداة جديدة اما اذا كان no فهذا يعني اخفائها وبالتالي لا يمكن اضافة اداة ضمن هذا Section .

widget : هي الاضافة حيث نجد المعرف id ايضا لكن يجب ان يكون بنفس محتوى type انما اضافة رقم بجانبه مثال ما نراه في الاضافة الخاصة بالهيدر حيث نجد Header1 لو تريد اضافة ازيد من هيدر يجب ان تضع Header+n .

ملحوظة : يجب ان يكون اول حرف للمعرف والنوع Type حرفا كبير .

بالنسبة لـ locked : تعني قفل الاداة اذا كان true اي ان الاداة مقفولة ولا يمكن تحريكها الى محتوى section اخر واذا كانت false اي انها غير مقفلة وبوسعك تحريكها كما تشاء في التخطيط .


هذه قائمة لأنواع الأدوات Widgets :


  • BlogArchive ارشيف المدونة.
  • Blog المدونة وهي تخص التدوينات.
  • Feed التغذية.
  • Header الهيدر اي راس الصفحة حيث نجد الشعار.
  • HTML وهي اداة HTML/JAVASCRIPT لأدوات خارجية.
  • SingleImage لعرض صورة ما.
  • LinkList قائمة الروابط ويمكن توظيفها في عمل قائمة.
  • List قائمة المدونات.
  • Logo شعار المدونة.
  • BlogProfile بروفايل المدونة .
  • Navbar وهي النافبار الخاصة ببلوجر.
  • VideoBar وهي النافبار الخاصة بالفيديو.
  • NewsBar وهي النافبار الخاصة باخر الاخبار

اساسيات العلامات الشرطية Conditional Tags


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

كما انه من خلال هذه العلامات الشرطية يمكنك التحكم في اظهار واخفاء اي محتوى في صفحات معينة او تصنيف معين.
طبعا في اي لغة برمجة نجد if وهو خاص بالشرط لكن هنا في بلوجر ستوجب عليك اضافة حرف b الذي بخص البلوجر وهو بداية كلمة Blogger وبالتالي فهو خاص ببلوجر فقط ليكون بهذا الشكل <b:if> طبعا هذه العلامات الشرطية يمكن ان نعتبرها اوامر لتنفيد امر ما او عدم تنفيده.

البنية العامة لهذه الاخيرة تتمثل في التالي :

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

للشرط عدة صيغ مخصصة سيتم التطرق اليها في كل درس .

اول شيء نبدء بالشرح بطريقة مبسطة جدا لاحظ كيف :

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

كما نرى في حال كان الشرط يساوي x اي ان الشرط صحيح وبالتالي سيتم تنفيد ما بداخل الشرط اي سيظهر النص، اما في حال الشروط لا يساوي x اي انه لن يتم تنفيد ما بداخل الشرط وبالتالي المتصفح سيتجاهل الامر مباشرة.

الان بعدما عرفنا الشرط if هناك else العكسي وهي لعكس الشرط حيث نربح الوقت بدل ان نكتب شرطا اخر، مثلا لو لم يتحقق الشرط الاول حقق الشرط الثاني مثال على ذلك :

<b:if cond='condition == x'>
اظهر كلمة مدونة الاحتراف الجزائري في حال تحقق الشرط إكس
<b:else/>
على خلاف على ذلك، اظهر اسمي
امين </b:if>

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

 Conditional Tags و Pages Type و Blog Url 


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

عموما للصفحات 9 أنواع كالتالي :

  • صفحة رئيسية المدونة.
  • صفحات التدوينات والتعليقات
  • صفحات ثابتة.
  • صفحات الأرشيف.
  • صفحات المحتوى اثناء الانتقال عبر التدوينات.
  • صفحات محددة حسب رابط الصفحة.
  • صفحات التسميات / التصنيفات.
  • صفحة الخطأ.
  • صفحة البحث.

الان نبدا بشرح كل نوع صفحات على حدى وكيف يتم توظيفها مع امثلة وهناك نوعين ايضا للصفحات التسعة بعضها Pages Type والاخرى Blog Url.

صفحة رئيسية المدونة HomePage وهي من نوع BlogUrl :بنية الشرط الخاص بهذه الصفحة كالتالي :


<b:if cond='data:blog.url == data:blog.homepageUrl'>
أظهرني داخل صفحة المدونة الرئيسية فقط
</b:if>

ملحوظة لعكس الشرط يتم تغيير من == الى != وبالتالي يصبح معنى الشرط هكذا :

<b:if cond='data:blog.url != data:blog.homepageUrl'>
اظهرني في كل الصفحات ولا تظهرني في الرئيسية 
</b:if>

طريقة التوظيف :

مثلا اريد تصميم قالب بلوجر ولكن ليس للتدوين انما لنقل تصميم واجهة واريد اخفاء التدوينات من الرئيسية وكذلك القائمة الجانبية :)
اذا مثلا فقط عبر الـ css واستعمال خاصية الـ display:none يتم قضاء الغرض من هذا) مثال :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#main-wrapper, #sidebar-wrapper {display:none;}
</style>
</b:if>

صفحة التدوينات والتعليقات item وهي من نوع pageType :

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
أظهرني داخل صفحة التدوينة فقط
</b:if>

طريقة التوظيف :

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

صفحات ثابتة Static Page وهي من نوع pageType :

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

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
أظهرني داخل الصفحات الثابته فقط
</b:if>

صفحات الأرشيف Archive Page وهي من نوع pageType :

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

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
أظهرني داخل صفحات الأرشيف فقط
</b:if>

صفحات المحتوى index وهي من نوع pageType :

وهي صفحات اثناء الانتقال عبر التدوينات من الرسائل الاحدث والاقدم والتي تتمثل في الكود التالي :

<b:if cond='data:blog.pageType == &quot;index&quot;'>
أظهرني داخل صفحات عرض المحتوى فقط
</b:if>

صفحات محددة حسب رابط الصفحة Url وهي من نوع BlogUrl :

تقريبا لنقل نفس نوع صفحة رئيسية المدونة لكن فقط في هاته الحالة يمكنك تحديد صفحة ما او تدوينة ما وتطبيق بعض الاشياء عليها وتخصيصها كيفما تريد وتتمثل في الكود التالي :

<b:if cond='data:blog.url == &quot;URL.html&quot;'>
أظهرني في الصفحة المحددة فقط
</b:if>

صفحة التسميات Labels او التصنيفات :

وهي ذات بنية متغيرة عن البقية وبها خاصية التكرار التي ساشرحها في درس مقبل ان شاء الله وهي لاظهار او اخفاء او تخصيص في تسمية محددة من اختيارك انت والتي تتمثل في الكود التالي :

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;التسمية هنا&quot;'>
سيتم عرض النص فقط على المشاركات التي لها نفس فئة التسمية
</b:if>
</b:loop>


first step start design blogger template from scratch, template from scratch, how to design blogger template, blogger template development, blogger templates designer software, blogger template software download, templatetoaster, blogger templates 2018, blogger templates 2018 free, there should be one and only one skin in the theme,  أول خطوة تبدأ تصميم قالب مدون من الصفر ، قالب من نقطة الصفر ، كيفية تصميم قالب المدون ، تطوير قالب المدون ، مدون قوالب مصمم البرمجيات ، تحميل قالب قالب المدون، templatetoaster، قوالب المدون 2018 ، قوالب Blogger 2018 مجانا ،

ما هو نظام التعليقات في قالب بلوجر ؟

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

كيف نستخدم التعليقات ؟
هناك نوعين يهمان مستخدمي بلوجر وهما تعليقات وسوم HTML ووسوم CSS

تعليقات CSS

/*اكتب هنا ما تريد*/

هذا نمط تعليقات وسوم CSS يمكنك استخدامه في الاكواد التي فوق الوسم ]]></b:skin> يعني مثلا اذا اضفت كود في تلك المنطقة يمكنك ان تكتب قبله تعليق يوضح بداية الكود وتعليق في نهاية الكود بحيث أن أردت حذفه تحذفه من بداية التعليق الى نهايته ويكون سهل التذكر بالنسبة لك .

تعليقات HTML

<!--اكتب هنا ما تريد-->

نفس الأمر كما في التعليقات السابقة لكن هذه نستخدمها في باقي اجزاء القالب مثلا فوق وسم <div> ..الخ .

العلامات المشروطة الجديدة في مدونات بلوجر 


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

العلامات القديمه والجديدة :

1-علامة الظهور بالصفحه الرئيسية فقط :

القديمة :

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

الجديدة:

<b:if cond='data:view.isHomepage'>

2-علامة الظهور بصفحات المواضيع فقط :

القديمة :

<b:if cond='data:blog.pageType == "item"'>

الجديدة:

<b:if cond='data:view.isPost'>

3-علامة الظهور بالصفحات الثابته فقط :

القديمة :

<b:if cond='data:blog.pageType == "static_page"'>

الجديدة :

<b:if cond='data:view.isPage'>

4-علامة الظهور بصفحات المواضيع والصفحات الثابته :

القديمة:

<b:if cond='data:blog.pageType in {"item", "static_page"}'>

الجديدة:

<b:if cond='data:view.isSingleItem'>

5-علامة الظهور بصفحات القوائم(فهرس الصفحات وفهرس العلامات) :

القديمة:

<b:if cond='data:blog.pageType == "index"'>

الجديدة:

<b:if cond='data:view.isMultipleItems'>

6-علامة الظهور بصفحه البحث بالتسميات :

القديمة:

<b:if cond='data:blog.searchLabel'>

الجديدة:

<b:if cond='data:view.isLabelSearch'>

7-علامة الظهور بصفحة الأرشيف (الفهرس) :

القديمة:

<b:if cond='data:blog.pageType == "archive"'>

الجديدة:

<b:if cond='data:view.isArchive'>

8-علامة الظهور بصفحة البحث عموما :

القديمة:

<b:if cond='data:blog.searchQuery'>

الجديدة:

<b:if cond='data:view.isSearch'>

9-علامة الظهور بصفحة الخطأ :

القديمة:

<b:if cond='data:blog.pageType == "error_page"'>

الجديدة:

<b:if cond='data:view.isPreview'>

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

<b:if cond='data:view.isHomepage'>

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

<b:if cond='not data:view.isHomepage'>

* عندما تريد اسخدام علامتين شرطيتين معا نضع بينهم or فقط :

مثال إضهار الاداة في صفحه المواضيع والرئيسية

<b:if cond='data:view.isPost or data:view.isHomepage'>

طبعا نهاية العلامة الشرطية تكون دائما هكذا : <b:if/>



  1. افضل طريقة لاضافة Bootstrap يدعم اللغة العربية + Normalize
  2. ازالة النقاط السوداء المتواجدة داخل التخطيط


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

شارك :

Design

ما رأيك بالموضوع !

0 تعليق:

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

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

صفحة >>> سياسة الخصوصية Privacy Policy

اي مشكلة >>> contact اتصل بنا
خريطة الموقع >>> site map
جميع الكورسات >>> all course

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