بسم الله الرحمن الرحيم والصلاة والسلام على أشرف المرسلين سيدنا محمد النبي الأمين وعلى من سار الى هديه واستن بسنته الى يوم الدين أما بعد , السلام عليكم ورحمة الله وبركاته , كنت قد أعلنت سابقاً عن البدأ في افتتاح دروة لتعريب قوالب مدونات البلوجر , وبإذن الله اليوم سنبدأ ثالث دروسنا في دروة التعريب وسيكون عبارة عن تطبيق التعريب على قالب مدونات بلوجر , ولكي تتمكن من متابعة الدروة يتوجب عليك مشاهدة الدرس الأول من الدورة وكان بعنوان [ 1 ] شرح تنصيب الأدوات التي سنسخدمها في دروسنا مع بعض النصائح والتوجيهات .والدرس الثاني وكان تحت عنوان [ 2 ] شرح مكونات قالب مدونات البلوجر وخصائصه . , وبإذن الله اليوم سنقوم بشرح التعريب على قالب يسمى Poligon , قالب من تصميم Klodian صاحب مدونة Deluxetemplates.net والآن هذا لينك لتحميل القالب من هنـــا , ثم قم بإنشاء مدونة تجريبية نقوم بها بتجريب والتطبيق لدرس التعريب على هذه المدونة , قم برفع القالب الى المدونة التجريبية التي قمت بإنشائها سابقاً , وتابع معي الشرح - ادخل الى لوحة التحكم الخاصة بالمدونة التجريبية التي أنشأناها , وسنقوم بتطبيق درس التعريب عليها .
- ادخل الى التصميم ثم تحرير html الخاص بالقالب . ثم قم بتوسيع القالب .
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">
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; }
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; }
وأنت قم بملاحظة الاختلافات وما تغير , ستجدهما نفس الكود مع اختلاف الكلمات Left, Right , فكما قلت لكما سابقاً , نحن نقوم بالتعديل على أكواد ال CSS .#main-wrapper { float: right; margin-right: 0; margin-top: 5px; overflow: hidden; text-shadow: 0 1px 0 #FFFFFF; width: 610px; word-wrap: break-word; }
5. قم بالبحث عن هذا الكود
ستجده على هذه الهيئة#sidebar-wrapper {
قم بتغييره الى هذا الكود#sidebar-wrapper { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2kZUEbl0lRHCmopDX471QFd8buM4Dkwpu_zWZnPjmbjbIAIBmDdw9gsGPKU6ahVPh8dhccpIz8PvWfNI8me4zwIg2kuHB_7TBxn2GDFizJvpIBYvzXiOFbbbnJmpgJV1XULdU-fBjBHw/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/AVvXsEg2kZUEbl0lRHCmopDX471QFd8buM4Dkwpu_zWZnPjmbjbIAIBmDdw9gsGPKU6ahVPh8dhccpIz8PvWfNI8me4zwIg2kuHB_7TBxn2GDFizJvpIBYvzXiOFbbbnJmpgJV1XULdU-fBjBHw/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; }
0 التعليقات:
إرسال تعليق