دورة تدريبية لتعلم تعريب قالب بلوجر(3)

اشترك ليصلك جديد الموقع

	ضع بريدك في الأسفل وأضغط اشترك ليصلك جديد الموقع
	البريد الالكتروني:

بعد أن تقوم بإدخال بريدك الإلكتروني ستصلك رسالة إلى هدا البريد،

اضغط علي الرابط الموجود بداخلها لتفعيل حسابك من أجل أن يصلك الجديد.

دورة تدريبية لتعلم تعريب قالب بلوجر(3)

2:03 ص |

تعديل الرسالة

شارك - اطبع - ارسل لصديق |

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

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

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

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

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

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

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

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

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

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

كود بلغة HTML:

body {

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

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

كود بلغة HTML:

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

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

كود بلغة HTML:

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

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

كود بلغة HTML:

text-align:center;

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

كود بلغة HTML:

text-align:right;

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

كود بلغة HTML:

direction:rtl;

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

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

كود بلغة HTML:

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

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

[ ألم أقل لكم أن التعريب سهل ]

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

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

كود بلغة HTML:

#beta h2 {

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

كود بلغة HTML:

letter-spacing:0.3em;

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

كود بلغة HTML:

text-align:right;

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

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

انظر الصورة

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

هذه النتيجة التي نريد منكم أن تصلوا إليها

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

هذا الدرس غير مخصص للأسئلة , ولكن أريد من كل واحد منكم أن يحمل القالب الغير معرب وأن يعربه باتباع الشرح الموضوع هنا , لكي تعربوه بأنفسكم بعد أن استفدتم من الشرح هذا . وبعد أن تجربوا تعريبه ستتعلمون الكثير , ثمّتَ ستسألوني عن الأخطاء التي وقعتم فيها , أو ربما التي وقعت فيها أنا , ولكن وكما قلت لكم كل أسئلتكم اطرحوها في الدرس القادم .
منقول من هنا
ملاحظة :
لتحميل القالب الغير معرب من هنا http://btemplates.com/2008/03/09/relaxation/demo/

اذا اعجبتك هذه التدوينة فلا تنسى ان تشاركها وتساعدنا على نشر المدونة ، كما يسعدنا ان تنضم الى قائمة المشاركين في سما بلوجر من خلال (نشرات rss)

التسميات: دروس بلوجر

جريدة المدرس الإخبارية

ارشيف جريدة المدرس الإخبارية

الاقسام

المشاركات الشائعة

الموت البطيء والإنتحار

اشترك ليصلك جديد الموقع

دورة تدريبية لتعلم تعريب قالب بلوجر(3)

0 التعليقات:

إرسال تعليق

أرسل تعليقا أو خبر الآن

البحث في الموقع

المصحف الالكتروني

زوار جريدة المدرس

أنت الزائر رقم

القائمة البريدية

Tags