[ 3 ] تطبيق التعريب على قالب Relaxation

[ابن حجر]

بسم الله الرحمن الرحيم .

أعتذر لكم عن تأخري في إنزال هذا الموضوع وذلك لأحداث حدثت هذه الأيام أثرت علي ولم أستطع معها أن أنزل الموضوع .. كان الله في عون الجميع .

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

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

هذا القالب هو Relaxation وقد سبق وأن عربته لكم هناتعريبا بسيطا .. وهو لا يحتاج منا إلا إلى بضع دقائق فقط , ولذلك لن يحتاج إلا إلى موضوع واحد فقط ..

وهذه صورة القالب قبل أن نعرب فيه شيئا ..



ترون في الصورة التي أمامكم الآن 8 نقاط .. والنقاط التي تحتاج منا إلى تعديل التنسيق هي 5 نقاط فقط .. وهذه النقاط مرتبة :

1. عنوان المدونة, ونلاحظ أن تنسيقه على اليمين ولا يحتاج إلى تعريب .
2. التأريخ تنسيقه أيضا في اليمين ولا يحتاج إلى تعريب .
3. عنوان الموضوع في الوسط وشكله غير مستساغ ,لذلك من الأفضل أن نجعل تنسيقه على اليمين.
4. نص التدوينة يجب أن نجعل تنسيقه من اليمين إلى اليسار .
5. إحصائيات الموضوع تنسيقها في اليمين ولا تحتاج إلى تعريب .
6. الاشتراك في الرسائل , من الأفضل أن يكون تنسيقه من اليمين إلى اليسار بدلا من الوسط .
7. عنوان عناصر القائمة الجانبية , يحتاج منا إلى إزالة التقطيع الموجود فيه , وجعل تنسيقه يمينيا .
8. النص الذي تحت عناوين العناصر , يحتاج إلى تنسيق من اليمين إلى اليسار .

هنا اتضح لنا أنا سنغير تنسيق 5 عناصر فقط من القالب , وهو أمر سهل للغاية , لنبدأ معكم ..

تعريب القالب :

عادة أنا عندما أبدأ في تعريب قالب ما , أتجه إلى

body {

كلمة Body تعني الجسم , وتعني جسم القالب كامل ..
نذهب إلى التخطيط ثم إلى تحرير Html رأينا القالب أمامنا بأكواد الاتش تي ام ال , نبحث الآن عن body { ..
ملاحظة : عند البحث استخدم CTRL+F لتسهيل عملية البحث .



وجدنا في القالب 2 body { .. هذا الأول ..

body {
    font-family: 'Trebuchet MS', 'Bitstream Vera Sans', Verdana, Arial, 'Lucida Sans', 'Lucida Sans Unicode', Helvetica, sans-serif;
    font-size: 13px;
}

ونجد تحت هذا العنصر الخط وحجم الخط . font and font size

أما البدي الثاني : فهو المطلوب لنا تقريبا

body {
    min-width: 714px;
    color: #000;
    background-color: #a9ac99;
    text-align:center;
}

نلاحظ تحت Body الثاني

text-align:center;

نغير center وهي التي تعني الوسط , إلى اليمين وتعني right لتصبح هكذا

text-align:right;

.
أيضاا دائما ما أضيف هذا العنصر

direction:rtl;

تحت Body وتعني هذه العبارة تغيير التنسق من اليمين إلى اليسار [ راجع الموضوع السابق ]

ليصبح Body في المحصلة النهائية هكذا وقد غيرنا فيه ما يلزم

body {
    min-width: 714px;
    color: #000;
    background-color: #a9ac99;
    text-align:right;
        direction:rtl;
}

الآن قطعنا شوطا كبيرا في تعريب القالب , وهذه الصورة تبين ذلك [ ألم أقل لكم أن التعريب سهل ]




بقي لنا الآن أمران فقط , يحتاجان إلى تعريب , وإلى الآن , لم نستخدم إضافة Firebug [ راجع الدرس الأول ] , فلذلك قد جاء وقتها الآن .
إليكم هذا الفيديو
http://www.youtube.com/watch_popup?v=q5wgCG6OL5Q

كما تلاحظون في مقطع الفيديو فقد استخدمنا إضافة فاير بق , ونسخنا ذلك الذي يدل على العنوان الذي في القائمة الجانبية وهو

#beta h2 {

وبحثنا عنه في القالب ووجدناه , وبعدها حذفنا من تحته

letter-spacing:0.3em;

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

text-align:right;

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

بقي علينا تعريب أمر واحد فقط , وهو تعريب النص الذي تحت عناوين القائمة الجانبية , وأمره بسيط جدا ..

انظر الصورة


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

• في الدرس القادم , سنغير خط القالب . وسنكمل بعض الأشياء .
• نستقبل أسئلتكم حول تعريب القالب .

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

ملاحظة :
لتحميل القالب الغير معرب من هنا http://btemplates.com/2008/03/09/relaxation/demo/

____
أحتاج لرأيكم في الموضوع هل استفدتم منه ؟؟

[عمـ Red-Death ـشز]

جاري التطبيق :$

[eboxgroup]

جاري التطبيق وعرض النتائج

[إيمان حسين]

بارك الله فيك ابن حجر ...

لي عودهـ بإذن الله بعد التطبيق

[إيمان حسين]

بااااااك عربته لكن انقلب رأساً على عقب

ومدري ايش المشكله

http://9ir5a.blogspot.com/

[ابن حجر]

أهلا بكم جميعا ..
أهلا بك جنات , أعيدي من أول وجديد , وطبقي كل شيء كما هو موضح
متأكد بأنك ستنجحي في المرة الثانية ...

[أماني~]

صورة القالب قبل التعريب و بعده لم تظهر لدي ؟!

لكن تم تطبيق الدرس

و هذه النتيجة =]

http://tgrobah.blogspot.com/

[ابن حجر]

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

[majid]

سلمك ربي أخوي أسامة ...

وهذا تطبيقي:

http://b0123.blogspot.com/

[nagwa]

اممممم بدآ التركيز الحين .. يلآ بروب ..
أطبقهآ ..

يعطيك العآفيه أخوي على الشرح الوآفي ..