درس اليوم في مدون محترف سنناقش فيه كيفية تصميم قوالب بلوجر في يوم واحد يجب أن يكون المدون مدرك جيدا لهيكل القالب من أجل المضي قدما مع التخصيصات لإنشاء قالب فعال. ومن شأن ذلك أيضا أن يساعد بقدر كبير إذا كان الشخص قام بانشاء خطط لبناء قالب مدون بلوجر في يوم واحد. واضطررت الى القيام ببعض التخصيصات في القالب الحالي . لذلك اليوم سوف يجب التركيز جيدا في هذا الموضوع
اساسيات قوالب بلوجر
كل المواقع العادية تستخدم لغة
HTML لتصيمم المواقع , ولكن في قوالب بلوجر يتسخدم لغة
XML في تصميمها .هيكل قالب بلوجر هو نفس هيكل ملف
HTML الذي يحتوي على وسم
Header و
body التي ارفقت في
HTML تحت علامة
XMLهذا بالتأكيد سوف يساعدك أيضا. هذه الوظيفة هي تهدف الى تلخيص السمات الرئيسية في قالب بلوجر .
شكل عينة من التعليمات البرمجية في قوالب بلوجر (رمز XML)
....
]]>
....
....
* Head section يحتوي على كافة المعلومات عن طريق العلامات الوصفية
meta tag و
CSS في بلوجر .
* ميتا تاج | meta tag المعلومات المستخدمة التي تستخدم في محرك البحث ، التي تشمل كل
عنوان ,
وصف الكلمة ,
المؤلف إلخ
..... , وما إلى ذلك.
* CSS يستخدم لتصميم شكل القالب او الغرض ،و تستخدم لتغيير
نمط الخط والحجم واللون يتم تناولها في هذا القسم. و يجب كتابة كل رمز بين
<b:skin>
و
]]>b:skin>
قالب بلوجر لدينا يتكون من اكواد
XML ولا يمكن كتابة اكواد
CSS في اكواد
XML ,و يمكن تحليل او كتابة رمز
CSS في بلوجر احتوتها
CDATA. في القالب مثال
<b:skin>..b:skin>
يتم تحويلها إلى
<style type="text/css">..style>
و
1 - Blogger variable : يستخدم لخلق التفاعل بين قالب بلوجر ومصمم نماذج
Blogger. انظر التفاصيل في كيفية جعل قالب مخصص في بلوجر يكون متفاعل مع محركات البحث و المستخدمين.
2 - Body Section : و يستخدم في التخطيط لتصميم مدونة ، يعني يكون مكون من
1 عمود، 2 عمود، 3 عمود، و هما
سايدبار جانبي ايمن و سايدبار جانبي ايسر ، .... كما في الصورة بالاسفل بعد تصميم القالب بمعنى عند كتابة
Section هي العواميد التي تكون في
لوحة التحكم >> التخطيط و هذا ما يسمى بـ
Section من دونا سوف يكون في قسم
التخطيط يوجد فقط
رسائل المدونة.
مثال
في قالب بلوجر في التخطيط يجب ان تحتوي أساسا أربعة أجزاء,
HeaderBodySidebar (اليمين ,اليسار , او كليهما)Footerتصميم قالب بلوجر هو بناء يستخدم
section و
widget . لذلك علينا أولا معرفة ما هي الــ
widger و الــ
secation
التي بالون الازرق هي الــ
widget الاضافات
التي بالون الاحمر هي الـ
secation الاقسام او التقسيمات
* secation هو العنصر الذي يشير إلى جزء من
التخطيط مثل header ، و رسائل المدون , و سايد بار و فوتر مثل الصورة في الاعلى كل هذا يكون داخل secation او ما يسمى بالقسم و يمكنك
إضافة widget متعددة في واجهة المستخدم مثل متعددة أرشيف المدونة، أو اداة
HTML/JavaScript . يمكنك تخصيص الشكل و المظهر في
secation باستخدام
CSS ملفوفة حولها.
و تبدو مثل هذا الكود
id='header' class='header' maxwidgets='1' showaddelement='no' growth='vertical'>
الان شرح الكود
* idهو معرف فريد يوفر لهذا القسم لتحديد الهوية، واستخدام الأحرف الأبجدية لهوية معينة.
* classهو حقل اختياري، يمكن إعطاء اسم المشترك مثل
Header، Main، sidebar ,foter. يمكنك إعطاء اسم مختلف على النحو الذي تريد.
* maxwidgets هو حقل اختياري، تستخدم لتحديد عدد الاضافات او الــ
widget داخل القسم
* showaddelement هو أيضا حقل اختياري، والتي تحدد في إدارة التخطيط في المدونة ، هناك سوف يتم "
إضافة أداة".
بـ نعم أو لا و هي تحديد هذه السمة |
نعم هو القيمة الافتراضية |
* growth هو أيضا حقل اختياري، والتي تشير إلى أنه إذا الأداة هي إضافة، ثم تقوم مضيفا
اداة رأسي أو أفقي. رأسيا هي القيمة الافتراضية
* widget : كما عرض في الصورة أعلاه، أضافة اداة إلى القسم، وهناك widhet او ما تسمى بالقطعة تكون متعددة داخل القسم. لا يمكن إضافة رمز إضافي مباشرة داخل القسم، لذلك القطعة المستخدمة، أضاف التعليمات البرمجية داخل القطعة وإضافتها داخل القسم. و لعمل جملة الـ widget و تسمى بالقطعة يكون على النحو التاليid="header" type='Header' locked="yes" >
حيث ان 1 - id هي فريدة من نوعها ، وبمجرد تعيينا لا يمكن تغيير الـ id ، او حتى حذف أو إضافة واحدة جديدة. 2 - type أيضا نوع الحقل، وهو واحد من الإجراءات التالية، BlogArchive
Blog
Feed
Header
HTML
SingleImage
LinkList
List
Logo
BlogProfile
Navbar
VideoBar
NewsBar
* locked يمكنك تحريك عنصر واجهة المستخدم باستخدام صفحة علامة التبويب في بلوجر . إذا كان
yes لا يمكن تحريكها او حذفها و إذا كان
no يمكن تحريكها او حذفها .
* title هو تحديد اسم القطعة.
* pageType الذي يحدد نوع من الصفحة هو عرض عنصر واجهة المستخدم . يمكن أن يكون كل شيء،
الأرشيف، أو
البند الرئيسي. و هو القيمة الافتراضية.
* mobile و هو المستخدم في عرض قالب بلوجر في الهواتف النقالة او لا و هيكل القانون الاساسي على الكود يكون
هيكل كود الأساسية كود XML
<data:blog.pageTitle/>
* Bodyفي الواقع كل ما تراه على صفحة ويب، (كل محتويات موقع على شبكة الانترنت هو جزء من body ). في القسم secation الام قد تقولون. كل شيء يكمن في ذلك.
Tags : هما علامات body والتي تحتوي على كل ما يمكنك ان تراه في موقع على شبكة الانترنت
and
* Outer-Wrapper هي كتلة أخرى داخل
body الذي يحتوي على كل الاشياء الأخرى التي يمكنك السيطرة عليها. مثل الرئيسية داخل
Outer-Wrapper و هي
Header, Content, Footerمثال
لاحظ كيف يظهر "Outer-Wrapper ، 'بعد العلامة في المدونة الخاص بك في محرر HTML، حيث يضع كل ما تبذلونه في المدونة في كود القالب.
* Header
كما يوحي الاسم هو المقطع الذي يحتوي على محتوى Header في المدونة الخاصة بك مثل بانر الهيدر ، شفرة AdSense، وصف، شريط التنقل الخ ... يمكنك العثور على هذا القسم في القالب مع التعليمات البرمجية التالية: