دورة تعريب قوالب بلوجر

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

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

وهذا اقتباس من كلام الأخ باسم

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

- متطلبات الدورة 

• متصفح فايرفوكس , حمل من هنا .
• إضافة Firebug , حمل من هنا .
• الحرص على التعلم والتحلي بروح الصبر .

- عدد الدروس

هم ربما أربعة أو خمسة دروس , على حسب التجاوب كالتالي
    * [ 1 ] شرح تنصيب الأدوات التي سنسخدمها في دروسنا مع بعض النصائح والتوجيهات .
    * [ 2 ] شرح مكونات قالب مدونات البلوجر وخصائصه .
    * [ 3 ] تطبيق التعريب على قالب بلوجر .
    * [ 4 ] تغيير الخطوط وتنسيق القالب .
    * [ 5 ] لم يحدد هل سيوجد أم لا .

- مدة الدورة

من المقرر أن تنتهي قبل يوم 15 سبتمبر بإذن الله , وسيتم وضع آخر كل درس ميعاد الدرس المقبل بإذن الله .



    * [ 1 ] شرح تنصيب الأدوات التي سنسخدمها في دروسنا مع بعض النصائح والتوجيهات .

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

عنوان الدرس 
[ 1 ] شرح تنصيب الأدوات التي سنسخدمها في دروسنا مع بعض النصائح والتوجيهات .

محتوى الدرس

• شرح تنصيب متصفح فايرفوكس , حمل من هنا .
• شرح تنصيب إضافة Firebug , حمل من هنا .
• نصائح وتوجيهات .

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

ثانيا : شرح تنصيب إضافة Firebug , حمل من هنا 

النصائح والتوجيهات

هذه بعض النصائح والإرشادات والتعليمات : مقدمة من أخوكم ابن حجر صاحب منتديات عرب بلوجر

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

     * [ 2 ] شرح مكونات قالب مدونات البلوجر وخصائصه .

بسم الله الرحمن الرحيم والصلاة والسلام على أشرف المرسلين سيدنا محمد النبي الأمين وعلى من سار الى هديه واستن بسنته الى يوم الدين أما بعد , السلام عليكم ورحمة الله وبركاته , كنت قد أعلنت سابقاً عن البدأ في افتتاح دروة لتعريب قوالب مدونات البلوجر , وبإذن الله اليوم سنبدأ ثاني دروسنا في دروة التعريب وسيكون عبارة عن شرح مكونات القالب وخصائصه , ولكي تتمكن من متابعة الدروة يتوجب عليك مشاهدة الدرس الأول من الدورة وكان بعنوان [ 1 ] شرح تنصيب الأدوات التي سنسخدمها في دروسنا مع بعض النصائح والتوجيهات

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

- المكونات الاساسية لقوالب بلوجر :
1 -  الجسم الأساسى للقالب “ Body “
وهو عبارة عن الوعاء التى يحتوى بداخله كل المكونات الاخرى للقالب من الهيدر " Header "  والفوتر  " Footer " والغلاف الداخلى  " Content Wrapper " وغيرها أى انه اشبه بوعاء الطبخ الذى تقوم بإضافة كافة المقادير بداخله .

2 - الهيدر الخاص بالمدونة " Header "
وهو عبارة عن الجزء الموجود فى أعلى المدونة والذى يحتوى بدوره على عنوان المدونة " Title " ووصف المدونة    "Description " وايضا إعلانات منها " Adsense " وقد يحتوى على كل ما سبق ذكره او الجزء منه فهو المسئول عن تعريف المدونة وسيتم شرحه بالتفصيل لاحقا.

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

4 - الجسم الداخلى " Content Wrapper "
او المنطقة الخاصة بمحتوى المدونة او كما احب ان اسميه الغلاف الداخلى للمدونة
وهو يحتوى بداخله على كل من محتوى الرسائل " Main Wrapper " وأيضا محتوى السايدبار " Side bare  " وهو يعتبر الجزء الاهم فى المدونة وسيكون شغلنا الشاغل فى الفترة القادمة بما يحتويه من مكونات وتدوينات ومهارات.

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

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

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

مثال لما سبق , صورة مدونة ملتقى الدروس

وإليكم بعض الأمور , أو بعض الخواص التي عادة ما نحتاج إلى تعديلها عندما نعرب قالبا .. وهي على النحو التالي :

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

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

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

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

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

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

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

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

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

ملاحظة مهمة : الاتش تي ام ال تحتوي على السي اس اس , أي أنها تكون مع بعض , ولتتعرفو أكثر على الفروقات أنصحكم مرة أخرى بزيارة هذا الموقع http://ar.html.net

وانتظروا الدرس القادم , مع شرح تطبيق التعريب على قالب للبلوجر .

المصدر : مدونة ملتقى الدروس

 

 

     * [ 3 ] تطبيق التعريب على قالب بلوجر . 

بسم الله الرحمن الرحيم والصلاة والسلام على أشرف المرسلين سيدنا محمد النبي الأمين وعلى من سار الى هديه واستن بسنته الى يوم الدين أما بعد , السلام عليكم ورحمة الله وبركاته , كنت قد أعلنت سابقاً عن البدأ في افتتاح دروة لتعريب قوالب مدونات البلوجر , وبإذن الله اليوم سنبدأ ثالث دروسنا في دروة التعريب وسيكون عبارة عن تطبيق التعريب على قالب مدونات بلوجر , ولكي تتمكن من متابعة الدروة يتوجب عليك مشاهدة الدرس الأول من الدورة وكان بعنوان [ 1 ] شرح تنصيب الأدوات التي سنسخدمها في دروسنا مع بعض النصائح والتوجيهات .والدرس الثاني وكان تحت عنوان [ 2 ] شرح مكونات قالب مدونات البلوجر وخصائصه . , وبإذن الله اليوم سنقوم بشرح التعريب على قالب يسمى Poligon , قالب من تصميم Klodian صاحب مدونة Deluxetemplates.net والآن هذا لينك لتحميل القالب من هنـــا , ثم قم بإنشاء مدونة تجريبية نقوم بها بتجريب والتطبيق لدرس التعريب على هذه المدونة , قم برفع القالب الى المدونة التجريبية التي قمت بإنشائها سابقاً , وتابع معي الشرح

• ادخل الى لوحة التحكم الخاصة بالمدونة التجريبية التي أنشأناها , وسنقوم بتطبيق درس التعريب عليها .
• ادخل الى التصميم ثم تحرير html الخاص بالقالب . ثم قم بتوسيع القالب .

الآن أمامك أكواد قالبك الخاص الغير معرب , وهيا بنا لنبدأ أول خطوة في تعريب القالب ,
أولا لابد أن تعلم انا تعريب قوالب البلوجر هو تعديل في أكواد CSS فقط .

1. ابحث عن هذا الكود

<Variable name="startSide" description="Side where text starts in blog language"
             type="automatic" default="left" value="left">
   <Variable name="endSide" description="Side where text ends in blog language"
             type="automatic" default="right" value="right">

قم بتغير الكود السابق الى هذا الكود

<Variable name="startSide" description="Side where text starts in blog language"
             type="automatic" default="right" value="right">
   <Variable name="endSide" description="Side where text ends in blog language"
             type="automatic" default="left" value="left">

طبعاً لو نظرت الى الكود بالأعلى والكود الذي فوقه مباشرة , ستجدهما نفس الكود مع اختلاف الكلمات Left, Right , فكما قلت لكما سابقاً , نحن نقوم بالتعديل على أكواد ال CSS .

2. قم بالبحث عن هذا الكود

#header-inner {

ستجده على الشكل

#header-inner {
    background-position: center center;
    margin-left: auto;
    margin-right: auto;
 height: 89px;
}
#header {
    color: #FFFFFF;
    text-align: left;
}

قم باستبداله بهذا الكود

#header-inner {
    background-position: center center;
    margin-right: auto;
    margin-left: auto;
 height: 89px;
}
#header {
    color: #FFFFFF;
    text-align: right;
}

وأنت قم بملاحظة الاختلافات وما تغير , ستجدهما نفس الكود مع اختلاف الكلمات Left, Right , فكما قلت لكما سابقاً , نحن نقوم بالتعديل على أكواد ال CSS .

3. قم بالبحث عن هذا الكود

#outer-wrapper {

ستجده على هذه الهيئة

 #outer-wrapper {
    font: 110% Arial,Serif;
    margin: 0 auto;
    text-align: left;
    width: 960px;
}

قم بتغييره الى هذا الكود

#outer-wrapper {
    font: 110% Arial,Serif;
    margin: 0 auto;
    text-align: right;
    width: 960px;
}

4. قم بالبحث عن هذا الكود

#main-wrapper {

ستجده على هذه الهيئة

#main-wrapper {
    float: left;
    margin-left: 0;
    margin-top: 5px;
    overflow: hidden;
    text-shadow: 0 1px 0 #FFFFFF;
    width: 610px;
    word-wrap: break-word;
}

قم بتغييره الى هذا الكود

#main-wrapper {
    float: left;
    margin-left: 0;
    margin-top: 5px;
    overflow: hidden;
    text-shadow: 0 1px 0 #FFFFFF;
    width: 610px;
    word-wrap: break-word;
}

 وأنت قم بملاحظة الاختلافات وما تغير , ستجدهما نفس الكود مع اختلاف الكلمات Left, Right , فكما قلت لكما سابقاً , نحن نقوم بالتعديل على أكواد ال CSS .

5.  قم بالبحث عن هذا الكود

#sidebar-wrapper {

ستجده على هذه الهيئة

#sidebar-wrapper {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2rh7zdXveQLHHCHHlHQkaoPJpEPlwAdi6B3G2mb0NfHVlZ0YHYnDa1GTZirVcFf7nlqII9sh_S4Yn9oZzxmQS0qrWXV_wrzCYX5A6WF88ieERW8SEGgC_c8h47AhoJBBP19b3PY_x5m8/s1600/content-top.png") repeat-x scroll right top transparent;
    float: right;
    margin-right: -10px;
    margin-top: -10px;
    overflow: hidden;
    text-shadow: 0 1px 0 #FFFFFF;
    width: 329px;
    word-wrap: break-word;
border: 1px solid #D0D7E2;
}

قم بتغييره الى هذا الكود

#sidebar-wrapper {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2rh7zdXveQLHHCHHlHQkaoPJpEPlwAdi6B3G2mb0NfHVlZ0YHYnDa1GTZirVcFf7nlqII9sh_S4Yn9oZzxmQS0qrWXV_wrzCYX5A6WF88ieERW8SEGgC_c8h47AhoJBBP19b3PY_x5m8/s1600/content-top.png") repeat-x scroll right top transparent;
    float: left;
    margin-left: -10px;
    margin-top: -10px;
    overflow: hidden;
    text-shadow: 0 1px 0 #FFFFFF;
    width: 329px;
    word-wrap: break-word;
border: 1px solid #D0D7E2;
}

 وأنت قم بملاحظة الاختلافات وما تغير , ستجدهما نفس الكود مع اختلاف الكلمات Left, Right , فكما قلت لكما سابقاً , نحن نقوم بالتعديل على أكواد ال CSS .

والآن تم الانتهاء من الجزء الأول من الدرس الثالث من دورة تعريب القوالب .
انتظروا قريباً الجزء الثاني بإذن الله .

المصدر : مدونة ملتقى الدروس