السلام عليكم و رحمة الله تعالى و بركاته.
انك عندما تلقي نظرة على قالب بلوجر فانك تقرا عدة مصطلحات و رموز لا تفهم معناها .اليوم باذن الله تعالى سأشرح العناصر الاساسية لقالب بلوجر و التي يجب البدء بها عند التفكير في تصميم قالب بلوجر أو تعديله .بالاضافة الى الخصائص التي يجب تعديلها عند تعريب قالب ما .
الصورة التالية تبين مكونات قالب بلوجر
شرح العناصر الاساسية لقالب بلوجر
- المكونات الاساسية لقوالب بلوجر :                                                                                                              
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" .   

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

[اذا اعجبك الموضوع هذه روابط النشر]

URL Of Post:



Paste This HTML Code On Your Page:


التعليقات : 2

Gamez 2GA

شكرا جزيلا لك

ممتاز جدا

انا لسه عامل مدونه ارجو تشرفنا http://www.gamez2ga.ga/

Gamez 2GA

شكرا جزيلا لك

ممتاز جدا

انا لسه عامل مدونه ارجو تشرفنا http://www.gamez2ga.ga/

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