| 12 commentaires ]

بسم الله الرحمن الرحيم والصلاة والسلام على أشرف المرسلين سيدنا محمد النبي الأمين وعلى من سار الى هديه واستن بسنته الى يوم الدين أما بعد , السلام عليكم ورحمة الله وبركاته , كنت قد أعلنت سابقاً عن البدأ في افتتاح دروة لتعريب قوالب مدونات البلوجر , وبإذن الله اليوم سنبدأ ثالث دروسنا في دروة التعريب وسيكون عبارة عن تطبيق التعريب على قالب مدونات بلوجر , ولكي تتمكن من متابعة الدروة يتوجب عليك مشاهدة الدرس الأول من الدورة وكان بعنوان [ 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: right;
    margin-right: 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/AVvXsEgRqJDi-lzaKYnvzE6_tZ3sdf-kZvag1gXMh_FAvSv3_0T-9QCw47sU3W290e0CdOvDiCOE3isLjltHkM9Nj3IG59r9x-2oBIm4ZIhGrDN0yDtSDtSlc-UBw0Mz6J_XiAqclsseMOb96bg/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/AVvXsEgRqJDi-lzaKYnvzE6_tZ3sdf-kZvag1gXMh_FAvSv3_0T-9QCw47sU3W290e0CdOvDiCOE3isLjltHkM9Nj3IG59r9x-2oBIm4ZIhGrDN0yDtSDtSlc-UBw0Mz6J_XiAqclsseMOb96bg/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 .

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

انتظروا قريباً الجزء الثاني بإذن الله .


التعليقات : 12

محمد السعيد

مقال رائع جدا لكنك لم تغير شيئا في main-wrapper.

غير معرف

@ محمد السعيد : أخي الحبيب .. شكراً على التنبيه وتم التعديل .

قدوري كريم

درس ممتاز جاري التطبيق اخي باسم
واصل عطائك

باسم

@ كريم قدوري : مرحباً بك أخي الحبيب كريم .

Unknown

أخي باسم جزاك الله خيراً فأنا اتابع مواضيعك الرائعة منذ أن كنت تكتب في مدونة قوالب بلوجر معربة ،
ولكن عندي مشكلة كبيرة أرجوا حلها ،وجزاك الله خيراً .

المشكلة :
أني حملت (قالب Evident معرب)من مدونة قوالب بلوجر معربة ،وهذا رابط القالب في مدونة قوالب بلوجر معربة
http://www.arabicbloggertemplates.com/2011/07/evident.html
والمشكلة أني في مدونتي عندما أضغط على أداة(اشترك في خلاصة المواضيع) تظهر عندي في المدونة بلغة HTML وأكواد غريبة ،هذا رابط مدونتي للمعاينة ،وجزاك الله كل خير.
http://hashem-earn-from-internet.blogspot.com/

إلياس

@هاشم فوزي
السلام عليكم أخي، عفوا اذا أجبتك عن السؤال عوضا عن باسم فربما لن ينتبه له (فأنا صاحب المدونة الجديد)
أخي هذا شيء طبيعي، فهكذا تظهر التغذية RSS. و اذا كنت تريد أن تظهر بشكل واضح (ليس أكواد) فعليك الاشتراك في feedbuner. و تغيير الرابط المحصل عليه بالرابط الموجود في إعدادات > تغذية الموقع > عنوان URL لإعادة توجيه تغذية الرسائل

اتمنى ان أكون قد أفدتك

Unknown

بارك الله فيك أخي إلياس وفي مدونتك الرائعة التي استفدت منها كثيراً ،وبالفعل ردك أفادني ،ولكن خلاصة المواضيع لم تعجبني كثيراً فهل هناك مواقع اخري تعطيني رابط التغذية وتعرض التغذيه بشكل أكثر جمالاً :
رابط المدونة للمعاينة ،وجزاك الله خيراً أخي إلياس :
http://hashem-earn-from-internet.blogspot.com/

إلياس

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

أخي feedburner تابع لـ Google يعني لن تجد أفضل منه (من ناحية الأرشفة ...)
و أغلبية قراء التغذية يستعملون برنامجا للقيام بذلك. يعني المظهر ليس مهم. و التغذية تستعمل لتحديث القراء بكل جديد في مدونتك ليدخل القارئ مدونتك و يقرأ الجديد.
و يمكن التعديل في مظهر feedburner باضافة اكوادCSS و تعديل بعضها. يمكنك أن تجد فيديوها في اليوتوب تشرح الطريقة (ابحث بالانجليزي أفضل)

و دمت في رعاية الله.

Unknown

أخي إلياس شكراً لك على ردك الذي أفادني كثيراً .
ولكن عندي استفسار آخر :
بالنسبة للتعليقات في المدونة
كل التعليقات تظهر أول ثلاث سطور من التعليقات على الشمال ،والباقي طبيعي على اليمين فما السر ياترى ،
وكيف أغيره ؟
رابط مدونتي لمعاينة التعليقات :
http://hashem-earn-from-internet.blogspot.com/2011/09/10.html
والسلام عليكم ورحمة الله وبركاته .

غير معرف

ممكن نفهمنى كيقية الشغل على المدونة

العاب مجانية

بارك الله فيك على الموضوع الرائع.

برامج ايجي

جزاك الله كل خير على الدرس الرائع

أكتب تعليقك و شاركنا برايك


أخي الحبيب اعلم أن رأيك يهمنا , فإن كان نقداً فسيجعلنا نصلح من أنفسنا , وإن كان مدحاً فهو وسام على صدورنا , رجاء تجنب استعمال التعليقات لبث روابط إعلانية. كذلك ننبه إلى ضرورة الالتزام بصلب الموضوع و عدم الخروج عليه و لمزيد من التوضيحات يمكنك أخي الزائر قراءة سياسة الاستخدام الخاصة بالمدونة , وتذكر قول الله عز وجل (( مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ))