جرب..ولن تندم

السبت، 12 يوليو 2014

دروس تعريب قوالب بلوجر (1)

1 - تعريب الجزء العلوي من قالب بلوجر:

النتيجة التي سنصل إليها بعد التعريب

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

في هذا الدرس سنرى طريقة تعريب الجزء العلوي من القالب وهو header-wrapper والذي يتكون من جزءين: Header وهو رأس الصفحة ثم Header2 حيث مربع البحث وأيقونات الشبكات الإجتماعية. بطبيعة الحال ليس كل القوالب يتكون جزءها العلوي من عنصرين. فالأمر يختلف من قالب لآخر.

2- تبادل أماكن عنصرين باستعمال Float: 

كما تعرفون فراس الصفحة حيث يكون إسم المدونة أو شعارها يكون على اليمين بالنسبة للمواقع والمدونات العربية. وبالتالي فما سنقوم به هو تبادل الأماكن بين Header على اليسار و Header2 على اليمين.


للقيام بذلك من لوحة المفاتيح Ctrl+F للبحث عن #header:
نستمر بالنقر على Enter حتى يظهر الكود التالي:
#header{margin:0;border:0 solid $bordercolor;color:$pagetitlecolor;float:left;width:40%;overflow:hidden;}

قوموا بتغيير float:left ب float:right. أي تحويل Header من اليسار إلى اليمين.
قوموا بنفس الخطوة مع Header2 مع تعويض float:right ب float:left . أي تحويل Header2 من اليمين غلى اليسار.


الإطارين تم تبادل أمكنتهما بحيث أصبح رأس الصفحة إلى اليمين لكن المشكلة هي أنهما لا يحاديان الجوانب العمودية بل يتركزان في الوسط:

لجعل العناصر داخل كل إطار يأخذ مكانه سنبحث عن: #header h1 وهو رأس الصفحة
وسنجد كود الCSS  الخاص به يبدو كالتالي:
#header h1{color:#FFFFFF;text-shadow:0px 1px 0px #000;margin:0 5px 0;padding:0px 0px 0px 0px;font-family:'Oswald',Arial,Helvetica,Sans-serif;font-weight:bold;font-size:32px;line-height:32px;}

ونقوم بإضافة كود سيجعل العنوان يحادي الجانب الأيمن بإضافة   text-align: right;  ليصبح:
#header h1{color:#FFFFFF;text-shadow:0px 1px 0px #000;margin:0 5px 0;padding:0px 0px 0px 0px;font-family:'Oswald',Arial,Helvetica,Sans-serif;font-weight:bold;font-size:32px;line-height:32px; text-align: right; }
ستلاحظون أن رأس الصفحة حيث كلمة تعريب أصبح محاديا لجهة اليمين.

3 - تنظيم عناصر Header2 :

لنمر الأن ل Header2 والتي تتكون من عنصرين، مربع البحث وأيقونات الشبكات الإجتماعية. حيث سنقوم بتبديل أماكنهما ليصبح مربع البحث إلى اليسار وأيقونات الشبكات الإجتماعية إلى اليمين:


للقيام بذلك سنبحث عن #topsearch وتقومون بتغيير الكود من:
 #topsearch{float:right;margin-top:16px}
 إلى
 #topsearch{float:left;margin-top:16px}

سنقم بنفس الخطوة بالنسبة لعنصر أيقونات الشبكات الإجتماعية بالبحث عن #top-social-profiles وتغيير الكود من:
#top-social-profiles{padding-top:15px;height:32px;text-align:right;float:left;}
 إلى:
#top-social-profiles{padding-top:15px;height:32px;text-align:right;float:right;}

4- تعريب مربع البحث:

لم يتبقى إلا مربع البحث، حيث سنقوم بجعل رمز المكبر غلى اليسار مع تعويض كلمة Search بكلمة بحث:

للقيام بذلك قوموا بالبحث عن #search وتغيير الكود من:
#search{border:1px solid #4F230E;background:#6C3F1C url(http://2.bp.blogspot.com/-7zer2UjYwBE/UU5bcM01mbI/AAAAAAAACB4/N0mPMS43XwM/s000/search.png) 99% 50% no-repeat;text-align:right;padding:6px 50px 6px 6px}

إلى: مع تغيير 99% ب 2% و50px ب 5px


ثم نستمر بالقر على Enter من لوحة المفاتيح حتى نجد الكود التالي:
<div id='header2'>
<div id='topsearch'>
<div id='search' title='Type and hit enter'>
<form expr:action='data:blog.homepageUrl + &quot;search/&quot;' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search&quot;;}' onfocus='if (this.value == &quot;Search&quot;) {this.value = &quot;&quot;;}' type='text' value='Search'/>
</form>
</div>
</div>
وقوموا بتعويض كلمة Search بالأحمر بكلمة بحث. أحفظوا التغييرات وستشاهدون كيف تم تعريب الجزء العلوي من القالب بشكل كامل ومميز.

5 - تعويض روابط أيقونات الشبكات الإجتماعية:

لوضع روابطم لأيقونات الشبكات الإجتماعية قوموا بالبحث عن <div class='social-profiles-widget'> وستجدون كود يبدو بهذا الشكل:
<div class='social-profiles-widget'>
<a href='http://twitter.com/YOUR_USERNAME' target='_blank'><img alt='Twitter' src='http://3.bp.blogspot.com/-QxtjXrlYunQ/UU5bfN_fFbI/AAAAAAAACC8/P-UX2PfPfY0/s000/twitter.png' title='Twitter'/></a><a href='http://facebook.com/YOUR_USERNAME' target='_blank'><img alt='Facebook' src='http://3.bp.blogspot.com/-fGNnount4OY/UU5bftVfgkI/AAAAAAAACDI/-nqNEIL7Zww/s000/facebook.png' title='Facebook'/></a><a href='https://plus.google.com/' target='_blank'><img alt='Google Plus' src='http://1.bp.blogspot.com/-DQ3Gj3t2FgY/UU5bf4dtktI/AAAAAAAACDQ/dRy4cEA5OMU/s000/gplus.png' title='Google Plus'/></a><a href='http://www.linkedin.com/' target='_blank'><img alt='LinkedIn' src='http://2.bp.blogspot.com/-m11qpglUwLE/UU5bgHm3WbI/AAAAAAAACDY/NuQGA4V4PYg/s000/linkedin.png' title='LinkedIn'/></a><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' target='_blank'><img alt='RSS Feed' src='http://3.bp.blogspot.com/-Cv22k-uy00A/UU5bgjCfbhI/AAAAAAAACDg/-ViUMlSX4QE/s000/rss.png' title='RSS Feed'/></a><a href='mailto:your@email.com' target='_blank'><img alt='Email' src='http://3.bp.blogspot.com/-xXPE63d-Rgc/UU5bg9ZOb3I/AAAAAAAACDo/2sYzruYcvL4/s000/email.png' title='Email'/></a>
</div>
سنكتفي بشرح رابط تويتر وستقومون بنفس الطريقة لباقي الروابط. الرابط بالأحمر يخص رابط حسابكم على تويتر. أما اللون الأخضر فهو لأيقونة تويتر والتي يمكنكم تعويضها بأيقونة أخرى من اختياركم بتغيير الرابط.
للمزيد حول الروابط والصور راجع درس Html  الصور وروابط Html
هذا كل ما يخص الدرس الأول من دروس تعريب قوالب بلوجر. لقد قمتم بتعريب الجزء الأول من القالب بشكل كامل وسنرى في الدرس القادم طريقة تعريب الجزء الخاص بالقوائم.

1 on: "دروس تعريب قوالب بلوجر (1)"