مواضيع مماثلة
المواضيع الأخيرة
المواضيع الأكثر نشاطاً
تعريب بلوجر - شرح بدون برنامج طريقة تعريب المدونة 2015 الجزء العلوي من قالب بلوجر
كوكل شات كوكل دردشة جوجل جات قوقل google chat 2018 :: شات كوكل دردشة جوجل جات قوقل chat :: ركن الالعاب والبرامج والشروحات العامة 2015
صفحة 1 من اصل 1
تعريب بلوجر - شرح بدون برنامج طريقة تعريب المدونة 2015 الجزء العلوي من قالب بلوجر
تعريب بلوجر - شرح بدون برنامج طريقة تعريب المدونة 2015 الجزء العلوي من قالب بلوجر
سنبدأ الدرس الأول من دروس تعريب قوالب بلوجر، رأينا في التقديم بعض المعلومات المتعلقة بتعريب قوالب بلوجر والأدوات المستعملة في ذلك. اليوم سنبدأ العمل بتعريب قالب بلوجر الذي ستطيعون تحميله من هنا. بعد إضافته لمدونة جديدة قوموا بالدخول من واجهة المدونة لقالب ثم تحرير HTML.
في هذا الدرس سنرى طريقة تعريب الجزء العلوي من القالب وهو header-wrapper والذي يتكون من جزءين: Header وهو رأس الصفحة ثم Header2 حيث مربع البحث وأيقونات الشبكات الإجتماعية. بطبيعة الحال ليس كل القوالب يتكون جزءها العلوي من عنصرين. فالأمر يختلف من قالب لآخر.
كما تعرفون فراس الصفحة حيث يكون إسم المدونة أو شعارها يكون على اليمين بالنسبة للمواقع والمدونات العربية. وبالتالي فما سنقوم به هو تبادل الأماكن بين Header على اليسار و Header2 على اليمين.
للقيام بذلك من لوحة المفاتيح Ctrl+F للبحث عن #header:
نستمر بالنقر على Enter حتى يظهر الكود التالي:
#header{margin:0;border:0 solid $bordercolor;color:$pagetitlecolor;float:left;width:40%;overflow:hidden;}
الإطارين تم تبادل أمكنتهما بحيث أصبح رأس الصفحة إلى اليمين لكن المشكلة هي أنهما لا يحاديان الجوانب العمودية بل يتركزان في الوسط:
لجعل العناصر داخل كل إطار يأخذ مكانه سنبحث عن: #header h1 وهو رأس الصفحة
وسنجد كود الCSS الخاص به يبدو كالتالي:
ونقوم بإضافة كود سيجعل العنوان يحادي الجانب الأيمن بإضافة text-align: right; ليصبح:
لنمر الأن ل Header2 والتي تتكون من عنصرين، مربع البحث وأيقونات الشبكات الإجتماعية. حيث سنقوم بتبديل أماكنهما ليصبح مربع البحث إلى اليسار وأيقونات الشبكات الإجتماعية إلى اليمين:
للقيام بذلك سنبحث عن #topsearch وتقومون بتغيير الكود من:
سنقم بنفس الخطوة بالنسبة لعنصر أيقونات الشبكات الإجتماعية بالبحث عن #top-social-profiles وتغيير الكود من:
#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;
}
<div id='topsearch'>
<div id='search' title='Type and hit enter'>
<form expr:action='data:blog.homepageUrl + "search/"' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == "") {this.value = "Search";}' onfocus='if (this.value == "Search") {this.value = "";}' type='text' value='Search'/>
</form>
</div>
</div>
1 - تعريب الجزء العلوي من قالب بلوجر:
النتيجة التي سنصل إليها بعد التعريب |
سنبدأ الدرس الأول من دروس تعريب قوالب بلوجر، رأينا في التقديم بعض المعلومات المتعلقة بتعريب قوالب بلوجر والأدوات المستعملة في ذلك. اليوم سنبدأ العمل بتعريب قالب بلوجر الذي ستطيعون تحميله من هنا. بعد إضافته لمدونة جديدة قوموا بالدخول من واجهة المدونة لقالب ثم تحرير HTML.
في هذا الدرس سنرى طريقة تعريب الجزء العلوي من القالب وهو header-wrapper والذي يتكون من جزءين: Header وهو رأس الصفحة ثم Header2 حيث مربع البحث وأيقونات الشبكات الإجتماعية. بطبيعة الحال ليس كل القوالب يتكون جزءها العلوي من عنصرين. فالأمر يختلف من قالب لآخر.
2- تبادل أماكن عنصرين باستعمال Float:
للقيام بذلك من لوحة المفاتيح 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 :
للقيام بذلك سنبحث عن #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 + "search/"' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == "") {this.value = "Search";}' onfocus='if (this.value == "Search") {this.value = "";}' type='text' value='Search'/>
</form>
</div>
</div>
وقوموا بتعويض كلمة Search بالأحمر بكلمة بحث. أحفظوا التغييرات وستشاهدون كيف تم تعريب الجزء العلوي من القالب بشكل كامل ومميز.
للمزيد حول الروابط والصور راجع درس Html الصور وروابط Html
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 + "feeds/posts/default"' 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
هذا كل ما يخص الدرس الأول من دروس تعريب قوالب بلوجر. لقد قمتم بتعريب الجزء الأول من القالب بشكل كامل وسنرى في الدرس القادم طريقة تعريب الجزء الخاص بالقوائم.
هذا كل ما يخص الدرس الأول من دروس تعريب قوالب بلوجر. لقد قمتم بتعريب الجزء الأول من القالب بشكل كامل وسنرى في الدرس القادم طريقة تعريب الجزء الخاص بالقوائم.
مواضيع مماثلة
» شرح طريقة تسريع اليوتيوب YOUTUBE بدون اي انقطاع كيفية تسريع وبدون اي تقطع بدون برنامج 2015
» شرح كيفية الحفاظ على عمر البطارية طريقة زيادة عمر البطارية بدون برنامج 2015 2016
» شاهد جميع قنوات Bein Sport المشفرة و بجودة HD بدون تقطيع 2015 بدون برنامج
» شرح كيفية الحفاظ على عمر البطارية طريقة زيادة عمر البطارية بدون برنامج 2015 2016
» شاهد جميع قنوات Bein Sport المشفرة و بجودة HD بدون تقطيع 2015 بدون برنامج
كوكل شات كوكل دردشة جوجل جات قوقل google chat 2018 :: شات كوكل دردشة جوجل جات قوقل chat :: ركن الالعاب والبرامج والشروحات العامة 2015
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى
الجمعة يناير 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