كوكل شات كوكل دردشة جوجل جات قوقل google chat 2015
<script type="text/javascript">
var adfly_id = 4081822;
var popunder_frequency_delay = 0;
</script>
<script src="https://cdn.adf.ly/js/display.js"></script>
كوكل شات كوكل دردشة جوجل جات قوقل google chat 2015

كوكل شات كوكل دردشة كوكل 2015 جات قوقل جوجل غوغل كوكل
 
الرئيسيةاليوميةمكتبة الصورس .و .جبحـثالأعضاءالمجموعاتالتسجيلدخول
مواضيع مماثلة
المواضيع الأخيرة
سحابة الكلمات الدلالية
5 1 والغضب fast lg_g4 تسريبات_g4 السرعة_والغضب fast_furious السرعة فيلم 4 9 2 8 10 search 6 LG 3 top-social-profiles
المواضيع الأكثر نشاطاً
تحميل برامج الاندرويد 2013 - احدث اجمل افظل مجموعة من اخر اندرويد
التواصل والدردشه
اعدادية المتنبي للبنين Mutanabi middle of Benin متنبي للبنين
تحميل برامج الاندرويد 2014 - احدث اجمل افظل مجموعة من اخر اندرويد
طريقه تزويد معجبين الفيس بوك تكبير صفحات الفيس زياده مشاهدات اليوتيوب زياده تويتر واك 2013
تحميل العاب الاندرويد اندرويد اجمل افظل اخر اقوى العاب 2013 - 2014
جديد يوسف الصبيحاوي - هندسة الصوتية يوسف الصبيحاوي - قصيدة يوسف 2013
احدث القصائد والابتهالات الصدرية الحسينية الحماسية المختارة 2013
رسائل مضحكة عتاب حزن الم فرح فراق عذاب حب غدر خيانة عراقية 2012-2013
4شيرد, فور شيرد,مركز تحميل برامج برنامج موقع صور فيديو 2012 4shared

شاطر | 
 

 تعريب بلوجر - شرح بدون برنامج طريقة تعريب المدونة 2015 الجزء العلوي من قالب بلوجر

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
Admin
Admin


المساهمات : 183
تاريخ التسجيل : 07/05/2011

مُساهمةموضوع: تعريب بلوجر - شرح بدون برنامج طريقة تعريب المدونة 2015 الجزء العلوي من قالب بلوجر   الأحد ديسمبر 28, 2014 3:11 pm

تعريب بلوجر - شرح بدون برنامج طريقة تعريب المدونة  2015  الجزء العلوي من قالب بلوجر


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


#search {
    background:url("http://2.bp.blogspot.com/-7zer2UjYwBE/UU5bcM01mbI/AAAAAAAACB4/N0mPMS43XwM/s000/search.png") no-repeat scroll 2% 50% #6c3f1c;
    border: 1px solid #4f230e;
    padding: 6px 5px 6px 6px;
    text-align: right;
}
ثم نستمر بالقر على 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=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
folfoly.com/2014/07/Blogger-Arabic-Templates1.html
هذا كل ما يخص الدرس الأول من دروس تعريب قوالب بلوجر. لقد قمتم بتعريب الجزء الأول من القالب بشكل كامل وسنرى في الدرس القادم طريقة تعريب الجزء الخاص بالقوائم.
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://google-chat-cockle.ahlamontada.com
 
تعريب بلوجر - شرح بدون برنامج طريقة تعريب المدونة 2015 الجزء العلوي من قالب بلوجر
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» كلنا مع المغرب في ملــف تنظيــم كأس افريقــيا 2015 **
» الكاسبر سكاي 11 ــ كاسبر سكاي مجانا للابد-شرح إضافة كراك الكاسبر ليعمل طوال العمر

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
كوكل شات كوكل دردشة جوجل جات قوقل google chat 2015 :: شات كوكل دردشة جوجل جات قوقل chat :: ركن الالعاب والبرامج والشروحات العامة 2015-
انتقل الى: