كوكل شات كوكل دردشة جوجل جات قوقل google chat 2018
<script type="text/javascript">
var adfly_id = 4081822;
var popunder_frequency_delay = 0;
</script>
<script src="https://cdn.adf.ly/js/display.js"></script>
مواضيع مماثلة
المواضيع الأخيرة
» المختارة 2018 رسائل مضحكة عتاب حزن الم فرح فراق عذاب حب غدر خيانة عراقية2018 2019
الجمعة يناير 19, 2018 4:21 pm من طرف Admin

» احدث القصائد والابتهالات الصدرية الحسينية الحماسية المختارة 2018 2019
الجمعة يناير 19, 2018 4:20 pm من طرف Admin

» تحميل برامج الاندرويد 2018 - احدث اجمل افظل مجموعة من اخر اندرويد 2019
الجمعة يناير 19, 2018 4:19 pm من طرف Admin

» السرعه والغضب 2018 2019 فيلم السرعه والغظب كامل وبرابط مباشر 9
الجمعة يناير 19, 2018 4:18 pm من طرف Admin

» رمضان 2018 - مسسلسلات رمضان - برامج رمضان - افلام رمضان 2019
الجمعة يناير 19, 2018 4:17 pm من طرف Admin

» البث المباشر لقنوات باقات اوربت شوتايم OSN - OSN Plus HD 2017 beIN sport
الإثنين أغسطس 22, 2016 11:19 pm من طرف Admin

» العاب فلاش - العاب تلبس بنات - العاب اكشن - العاب فلاشية - العاب اونلاين 2017 -2018
الإثنين أغسطس 22, 2016 11:16 pm من طرف Admin

» تحميل برامج الاندرويد 2017 - احدث اجمل افظل مجموعة من اخر اندرويد
الإثنين أغسطس 22, 2016 11:15 pm من طرف Admin

» فيلم السرعة والغضب Fast And Furious 8 مترجم hd كامل اونلاين 2017
الإثنين أغسطس 22, 2016 11:14 pm من طرف Admin

سحابة الكلمات الدلالية

fast  LG  1  fast_furious  السرعة  2  فيلم  top-social-profiles  7  4  10  8  السرعة_والغضب  9  تسريبات_g4  lg_g4  3  search  6  5  والغضب  


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

اذهب الى الأسفل

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

مُساهمة  Admin في الأحد ديسمبر 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='https://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
هذا كل ما يخص الدرس الأول من دروس تعريب قوالب بلوجر. لقد قمتم بتعريب الجزء الأول من القالب بشكل كامل وسنرى في الدرس القادم طريقة تعريب الجزء الخاص بالقوائم.

Admin
Admin

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

معاينة صفحة البيانات الشخصي للعضو http://google-chat-cockle.ahlamontada.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة

- مواضيع مماثلة

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى