تطبيق التعريب على قالب لمدونات بلوجر - الجزء الأول

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

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

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

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

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

طبعاً لو نظرت الى الكود بالأعلى والكود الذي فوقه مباشرة , ستجدهما نفس الكود مع اختلاف الكلمات 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/AVvXsEgreg9wgsMYLjny1QcfFLj2oD7LqnvgM6NqQnbB7nv1s0yjARL_80Xne1k4JBNKaA4gQ12k81wPZ3IFPgkNLcU2B35sbJGygkYNgyO3YRvM4vMpGSAQSxV8JV47V-8OeTM8obeIYtlgoHs/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/AVvXsEgreg9wgsMYLjny1QcfFLj2oD7LqnvgM6NqQnbB7nv1s0yjARL_80Xne1k4JBNKaA4gQ12k81wPZ3IFPgkNLcU2B35sbJGygkYNgyO3YRvM4vMpGSAQSxV8JV47V-8OeTM8obeIYtlgoHs/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 .

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