شرح العناصرو الخصائص الأساسية لقالب بلوجر

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

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

الصورة التالية تبين مكونات قالب بلوجر

- المكونات الاساسية لقوالب بلوجر :                                                                                                              

1 -  الجسم الأساسى للقالب “ Body “                                                                                                            

وهو عبارة عن الوعاء التى يحتوى بداخله كل المكونات الاخرى للقالب من الهيدر " Header "  والفوتر  " Footer " والغلاف الداخلى  " Content Wrapper " و شريط القوائم " Menu bare "  و السايدبار " Sidebare "وكل الأجزاء التي ستأتي تندرج ضمن "body".  

2 - الهيدر الخاص بالمدونة " Header "                                                                                                             

وهو عبارة عن الجزء الموجود فى أعلى المدونة والذى يحتوى بدوره على عنوان المدونة " Title " ووصف المدونة    "Description "  وايضا إعلانات منها " Adsense "  و غيرها من الاضافات .اما كود الهيدر فيشمل مل يلي                                                                        

header-wrapper # : ويدل على بداية أكواد الصندوق الذي يتحكم في كل منطقة رأس المدونة header. ويشمل اسم المدونة، ووصف المدونة .

header# : وهو صندوق يقع بدوره ضمن الذي سبقه .

header h# : واكواده تتحكم في مظهر عنوان أو اسم المدونة.

header h1 a # : ويتحكم في عنوان المدونة باعتباره رابطاlink.

header description #: تتحكم في خصائص وصف المدونة.

header a img# : يتحكم في خصائص الصورة في منطقة الرأس .

3 - شريط القوائم " Menu bare "                                                                                                                   

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

4 - الجسم الداخلى " Content Wrapper "                                                                                                    

او المنطقة الخاصة بمحتوى المدونة.                                                            

وهو يحتوى بداخله على كل من محتوى الرسائل " Main Wrapper " وأيضا محتوى السايدبار " Side bare  " وهو  الجزء الاهم فى المدونة .                                                 

5 - منطقة الرسائل " Main Wrapper "                                                                                                           

يقع هذا الجزء فى الجسم الداخلى " Content Wrapper " والمسؤول عن نشر المواضيع  " Posts " وأيضا نشر التعليقات " Comments "  الخاصة بكل موضوع ومكونات أخرى نضعها في المدونة لتبدو بشكل جميل.    

 6 -#main : وهو صندوق يقع ضمن الذي قبله .            

main.widget# : ويتحكم في في كل القطع والأجزاء التي تقع ضمن .main-wrpper

h2.date-header : يتحكم في خصائص تاريخ التدوينات .

post. : وهي مسبوقة بنقطة يتحكم في خصائص منطقة المحتوى – النشر- blog post .

Post h3. : يتحكم في خصائص عناوين التدوينات.

post body p. : يتحكم في خصائص جسم ومحتوى التدوينات .

post ul. : يتحكم في تنسيق القوائم غير المرقمة .

post ol. : يتحكم في تنسيق القوائم المرقمة.

a img : يتحكم في الخصائص العامة للصور.

7 - منطقة السايدبار " Sidebare "                                                                                                                  

يقع هذا الجزء فى الجسم الداخلى " Content Wrapper " وهو الجزء المخصص لوضع الادوات والاضافات الخاصة بك والتى تخص مدونتك من ( التسميات " Labels " , الأرشيف " Archives" ، التعليقات " Comments" ، اعلانات ادسنس " Adsense " . 

   اكواد هذا الجزء تشمل على     

sidebar-wrapper. : ويحيط بكل العناصر التي يتكون منها العمود الجانبي .

sidebar. : صندوق يتواجد داخل الذي قبله.

sidebar1 # : يتحكم في خصائص العمود الجانبي الأول في حال وجود أكثر من عمود.

sidebar2 # : يتحكم في خصائص العمود الجانبي الثاني ، مع التنبيه إلى أنه أذا أردت ان تجعل كل الأعمدة متشابهة ، فيمكنك أن تتحكم في خصائصها مجتمعة من خلال العنصر الأول وهو .sidebar

sidebar .widget. : تتحكم في خصائص كل الأجزاء التي يتكون منها العمود الجانبي – "إضافة أداة ".

sidebar1 .widget. : تتحكم فقط في خصائص العمود الجانبي رقم 1.

sidebar .blogArchive. : يتحكم في خصائص الأرشيف الموجود في العمود الجانبي . ويستحب ترك خصائصه كما هي افتراضيا وعدم تغيير أي شيء فيها .

sidebar h2 . : يتحكم في خصائص عناوين أجزاء العمود الجانبي.

.sidebar #blogArchive1 h2. : يتحكم في عنوان الأرشيف.                                                                              

Miscellaneous- 8 :  هذا الجزء يضم ملف التعريف بالكاتب أو البروفايل و bockauote ، والأكواد التي تندرج ضمنه هي 

profile1 # : ويتحكم في خصائص " التعريف بالكاتب" about me.

profile1 h2 #: يتحكم في خصائص عنوان ملف التعريف .

Profile-img a img : يتحكم في خصائص صورةالكاتب .

Profile-textblock :يتحكم في خصائص النص الذي يعرف به المدون نفسه فيملف التعريف  .

Blockauote : يتحكم في خصائص النصوص التي يضعها المدون بين مزدوجتين "..."

9 - الفوتر الخاص بالمدونة " Footer "                                                                                                           

وهو عبارة عن الجزء الموجود فى أسفل المدونة وهو مثل السايدبار " Side bare  " تقريبا وهو مخصص لوضع الادوات والاضافات الخاصة بك والتى تخص مدونتك من( التسميات " Labels " , الأرشيف " Archives" ، التعليقات " Comments"، اعلانات ادسنس "Adsense                                                                                       

 ولكن له بعض المميزات الخاصة سيتم شرحها بالتفصيل لاحقا.            

post-footer. : يتحكم في كل خصائص أسفل التدوينات والمواضيع.

post-footer-line. : يتحكم في خصائص كل سطر جديد في هذه المنطقة.

Post-footer a : يتحكم في خصائص الروابط في هذه المنطقة.

Post-footer .post-comment-link a : يتحكم في روابط التعليقات.

footer-wrapper # : وهو يحيط بكل العناصر التي يتكون منها "الفوتر" .

footer #: ويقع ضمن الجزء الذي قبله .

footer h2 # : يتحكم في خصائص عنوان الفوتر .

footer .widget # : يتحكم في الأجزاء أو الإضافات التي توجد في الفوتر .

blog-pager# : يتحكم في خصائص أرقام الصفحات ومن بينها " رسالة جديدة" و "الصفحة الرئيسية" و "رسالة أقدم" التي تتواجد في صف واحد أسفل منطقة المحتوى .

blog-pager-newer-link# : يتحكم في خصائص رابط " رسالة أقدم".

.blog-pager-older-link# : يتحكم في خصائص رابط "رسالة أقدم".

feed-links. : يتحكم في العبارة التي تكون أسفل كل تدوينة وهي عبارة " اشترك في الرسالة" .           

10-مكان النشر" Posts" وهذا الجزء هو أهم ما في المدونة , فا من خلاله تعرض محتوى مدونتك للقراء , ويحتوي بدوره على أجزاء وهي عنون التدوينة , وتاريخ نشرها , واسم المدون , والتصنيف الذي تندرج فيه التدوينة .

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

11-التعليقات"comments"وتندرج تحته العناصر التالية:

comments# : ويتحكم في كل خصائص العناصر المكونة لصندوق التعليقات .

comments a# : يتحكم في خصائص الروابط .

comments h4 # : يتحكم في رأس header صندوق التعليقات.

comments author. : يتحكم خصائص كتابة أسماء المعلقين.

comment-body p . : يتحكم في خصائص جسم body منطقة التعليقات .

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

 - text-align وتعني محاذاة النصوص , فإذا كان القالب إنجليزيا فستكون محاذاة النصوص على اليسار وستكون العبارة  هكذا ;text-align:left أما اذا كان القالب معربا ستكون هكذا ;text-align:right .                                            

- float وتعني محاذاة التنسيق , أي مكان وجود العنصر اما في اليمين فتكون العبارة هكذا ;float:rightواما في اليسار فتكون العبارة هكذا ;float:left .                        

- direction من خلالها نستطيع تحديد اتجاه القالب كامل , بحيث نضيفها بهذا الشكل direction:rtl مثلا تحت Body هنالك سيتحول اتجاه القالب كاملا في بعض القوالب , وفي القوالب الأخرى سيبقى اتجاه بعض العناصر مثل ما هو مع بعض التغيير . وفي بعض القوالب تكون هكذا direction:ltr; فعلينا تغييرها direction:rtl .                                                                                       

توضيح : rtl تعني right-to-left أي من اليمين إلى اليسار , و ltr تعني rleft -to-right من اليسار إلى اليمين .                                  

- padding وتعني الهوامش الداخلية فإذا كانت في القالب الإنجليزي موجودةً هكذا padding-left:5px; فإنه يلزمنا تغيير left إلى right لتصبح العبارة هكذا padding-right:5px; .

- margin وهي مضاد padding وتعني الهوامش الخارجية وهي لا تختلف عن padding , فإذا كانت في القالب الإنجليزي موجودةً هكذا margin -left:5px فإنه يلزمنا تغيير left إلى right لتصبح العبارة هكذا ;margin -right:5px .

- Font-family , وتعني الخط , فإذا كان الخط هكذا ;font-family:arial ونريد أن نغيره إلى خط آخر مثلا tahoma سنغير arial فقط . ;font-family:Arial, Helvetica, sans-serif;

هذا إيجاز لبعض الخواص [ css ] التي عادة ما أستخدمها عندما أعرب قالباً ما , ولن تفهموها بشكل جيد الآن , ولكن بعد التطبيق ستسهل لكم وستحبونها كثيرا .

{…} a : ويتحكم في خصائص الروابط .

: {…}a:visited ويتحكم في خصائص الروابط التي تم الضغط عليها. 

 :{…}a:hover  ويتحكم في خصائص الروابط عندما يكون مؤشر الفأرة فوقها.    

أما بالنسبة لتعديل Html فإني لم أعد أستخدمها كثيرا عندما أعرب أحد القوالب , وذلك لأن أكثر التعديل يكون على css والتنسيق من خلالها من اليمين إلى اليسار , أو العكس .

فعادة ما نبحث في القالب في تحرير Html في البلوجر عن dir , ونضع بجانبها rtl لتكون بهذا الشكل dir="rtl" .   

لا تنسونا من صالح دعائكم........                                                                                               

منشورة في: اكواد html, تصميم, تعلم لغات البرمجة, تعلم لغة html