مواضيع ذات صلة (مصورة) نسخة احدث

هل تذكر بوست مواضيع ذات صلة 1

و بوست مواضيع ذات صلة 2

بالطبع لا تذكر , انا شخصيا مش فاكر
على العموم ,طريقة جديده وطبعا اجمل من تلك الطرق السابقة

الخطوات :
1- اذهب الى صندوق الاكواد

المسار : لوحة التحكم - تصميم - تحرير هتمل

2- اضغط على المربع الصغير توسيع قوالب عناصر واجهة المستخدم

3- ابحث على

</head>


واستبدلها بالاتى :

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJndbDTowmlqmAscG1n6afjo_3rcKK2FqCul2JZEymWRg3Tp3JJVXagqOK0lBk2NiiYg26XKUZvLSTVcECs9jxbVL_v5u7vvp1SxlMJMWQIhoPbCUxAA6vuZbm0UW7E7BcQ6Pq5R5Y9o0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="مواضيع ذات صلة";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

ملاحظة : يمكنك التعديل على عدد الروابط المصورة للمواضيع ذات الصلة , بتغيير رقم 5 الملون باللون الاحمر بالكود السابق .
ويمكنك ايضا تغيير العنوان بتغيير كلمة " مواضيع ذات صلة " الملونة باللون الازرق .
ويمكنك تغيير اللون الفاصل بين الروابط بتغيير الكود الملون باللون البنفسجى #d4eaf2


4 - ابحث عن اى من القطعتين التاليتين , اذا لم تجد الاولى ابحث عن الثانية

<div class='post-footer-line post-footer-line-1'>

او

<p class='post-footer-line post-footer-line-1'>

عندما تجد احدهما , اضف مباشرة بعدها هذا الكود :

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://www.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Widgets" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

بعد الانتهاء احفظ , وشاهد النتيجة

اكتب ايميلك هنا

استخدم خطوط جوجل

المستخدم للبلوجر - او اى مدونة مجانية اخرى - يكون غالبا مقيدا بتصميمات معدة من قبل , فى البلوجر يمكنك الان وبكل سهولة اختيار قالب او تصميم معين من بين الاف التصميمات على الانترنت او حتى انشاؤه من البداية , لكن تظل بعض الامكانيات غير متاحة , ومن اهم تلك الامكانيات هى اضافة خط للمدونة بدلا من الخطوط الرسميةالمتاحة فى البلوجر .

لم يعد الجرافيك وحده هو القاعدة التى يبنى عليها تصميم المدونة , خطوط المدونة واشكالها المختلفة ومدى تناسقها اصبح عاملا بالغ الاهمية فى التصميم , بل اصبح علما يطلق عليه typography

ماهو الـ Google's Font API ؟
طرحت جوجل مؤخرا خدمة مفتوحة المصدر تمكن المستخدم من اضافة الخطوط المختلفة لاى موقع او صفحة على الانترنت , واسمت تلك الخدمة Google's Font API

ماهى الخطوط المتاحة حتى الان ؟

توجد النماذج المتاحة حتى الان فى تلك الصفحة

الخدمة لا تزال تجريبية ويوجد بها بعض الخطوط الانجليزية فقط , ويتوقع ان شاء الله ضم المزيد من الخطوط قريبا

ماهى طريقة الاضافة ؟

اولا اضغط على خط معين ( انا ضغطت على Cantarell كمثال ) من تلك النماذج
فى الصفحة التالية اضغط على get code

ستحصل على كود بهذا الشكل :

<link href=' http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>

اضف انت اليه شرطة مائلة فى نهايتة قبل انغلاق الكود ليصبح بهذا الشكل :

<link href=' http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'/>

ثم اذهب الى صندوق الاكواد بمدونتك
لوحة التحكم , تصميم , تحرير هتمل

وابحث عن <head>

والصق الكود السابق بعدها مباشرة

ثم احفظ
-----

الان انت اضفت الخط Cantarell الى القالب , تحتاج الان

تحتاج الان اضافته الى اجزاء المدونة
مثلا انت تريد ان تكون العناوين الفرعية h2 بهذا الخط
ستضيف هذا الكود :

h2.post-title {font-family: Cantarell, Sans=Serif;}

وهكذا , يمكنك اضافة تلك الخاصية الى اى قطعة تريدها
مثلا , تبحث عن الـ post او الـ main
وتطيف الى خصائصه الموجوده خاصية الخط , او تعدلها اذا كانت موجودة بالفعل

main {

font-family: Cantarell, Sans=Serif;

}

------------------

اما اذا كنت تملك خطا معينا وتريد اضافته الى البلوجر , فيلزمك شراء مكان استضافة لملف الخط او استعمال اماكن مجانية ان وجدت , ومن ثم ارفاقة بنفس الطريقة بدلا من خط جوجل المجانى

اكتب ايميلك هنا

اختصارات تهمك , اه وربنا

اذا كنت من محبى الكيبورد امثالى ( ومعاديا للفارة التى تعرف دائما كيق تختار الوقت المثالى لكى تعطل ) فانت فى حاجه لمعرفة تلك الاختصارات الكيبوردية المهمة التى ستغنيك عن الضغط على الزر المقيت tab وتجعل من يجلس بجانبك يقسم للاخرين انه رآك تنشر التدوينة بدون تحريك الفأرة , وايضا تحسبا للوقت الذى ستعلن فيه فأرتك العزيزة - بينما انت منهمك فى اعداد تدوينتك الخارقة - انها وبكل بساطة لم تعد تريد العمل

الاختصار	الوظيفة	الدعم بكل المتصفحات ؟
CTRL+B	خط عريض	Yes
CTRL+I	خط مائل	Yes
CTRL+U	نص تحته خط	Yes
CTRL+L	اقتباس	No
CTRL+Z	Undo التراجع عن اخر خطوة	Yes
CTRL+Y	Redo خطوة للامام	Yes
CTRL+SHIFT+A	اضافة لينك , رابط	No
CTRL+SHIFT+P	عرض التدوينة	No
CTRL+D	حفظ كمسودة	No
CTRL+P	نشر التدوينة	Yes
CTRL+S	حفظ آلى للتدوينة	Yes
CTRL+G	ترجمة للتدوينة	No

سلامى للجميع

اكتب ايميلك هنا

لعشاق الفيس بووك

من ضمن المميزات التى يمكنك استخدامها - كبلوجر - هو ضم اداة من موقع الفيس بوك الى مدونتك , تجعل من السهل جدا التواصل بين مدونتك وصفحتك على الفيس بووك عن طريق عرض تنويهات كلما نشرت تدوينة جديده ليراها اصدقائك على الفيس بوك .

الطريقة :

سجل دخولك فى الفيس بووك اولا

ثانيا ادخل عبر هذا الرابط

ستظهر لك الصفحة الاتية از مايقابلها باللغة العربية, اختر كما هو موضح حسب ترتيب الاسهم




فى الصفحة التالية ستجد الاتى



اختر edit page كما بالصورة



فى الصفحة التالية اختر edit الموجودة تحت note




فى الصفحة التالية اختر import blog كما بالصورة



فى الصفحة التالية ستضع بياناتك بدلا من بياناتى الموجودة فى الصورة كى يتم لستيراد تدويناتك اوتوماتيكيا
ثم اضغط start importing



فى الصفحة الاخيرة التالية ستلاحظ انه بالفعل تم استيراد التدوينات اوتوماتيكيا لعرضها لاصدقائك فى الفيس بوك اولا بأول , اختر confirm hmport للتاكيد

اكتب ايميلك هنا

اظهار التاريخ فى شريط المتصفح

اذا لم تكن تعرف ما يعنيه العنوان فالصورة التالية ستشرح لك بالضبط ماستحصل عليه بعد انتهائك من تطبيقه



الطريقة :

اذهب الى لوحة التحكم
ثم اختر : تخطيط
فى صفحة عناصر المدونة اختر : اضافة اداة جديده
من ضمن انواع الادوات اختر : اداة هتمل / جافا سكريبت
ضع فيها الكود الاتى ثم احفظ

<Script Language="JavaScript" Type="Text/JavaScript">

var mytime1=24;
function mytime2() {
mytime3=mytime1+6;
mytime4=mytime1+mytime3;
timexx=mytime1+mytime3+mytime4;
timexxx=timexx/mytime4*mytime1; twelfth=mytime4*mytime1/12*mytime3;
timexxxx=mytime1+mytime3/timexxx-16*timexx;
timexxxxx=twelfth*(mytime1-5)/mytime4+timexx;
timexxxxxx=timexxxxx/timexxxx+mytime1*mytime4-timexx;
mytime5=(timexxxxxx+mytime1/mytime4*timexx+mytime3*timexxx)/twelfth+timexxxxx-timexxxxxx-1;
mytime6=Math.floor(mytime5);
mytime8=mytime6*mytime3/2+100;
mytime7 = window.setTimeout("mytime2()", mytime8);
var mytime9 = new Date();
var mytime10= mytime9.toLocaleString();
document.title = mytime10;}
function op(){mytime2()}
window.onload=op;

</script>

اكتب ايميلك هنا

التحرر من البلوجر

الحقيقة تقول ان اجمل اشياء فى الدنيا هى الاشياء المجانية
ولكى تكتمل تلك المجانية فى بلوجر , يلزمك بعض التعديلات والاعدادات كى تتخلص وللأبد من التبعية للبلوجر وتتحول من صاحب مدونة الى صاحب موقع بأقل التكاليف , او ربما مجانا أيضا :)

أولا : شريط البلوجر
الكثير ينزعج من وجود هذا الشريط بأعلى المدونة , اما حذفه فسهل جدا من هنا
ثانيا : الدومين
البعض ايضا ينزعج من وجود .blogspot فى رابط مدونته , والكثير جدا من المدونات الشهيرة تنتقل من مجرد كونها مدونات الى مواقع , لذلك وجدنا البلوجر تدعم اضافة دومين للمدونة والاستغناء به عن الرابط الاساسى للمدونة .
فمثلا , لو كانت مدونتك whatever.blogspotc.com واحببت انت ان تجعلها watever.com كل ما عليك الا انك تشترى الدومين ( اذا كان متاح ) من مواقع بيع الدومينات او حتى من مواقع الدومينات المجانية , ثم اضافته الى البلوجر بكل سهولة .
بهذه الطريقة انت مازلت تملك مميزات مساحة البلوجر والتدوينات والصور والفيديو وخلافه , بينما رابط موقعك الجديد لا يوجد به blogspot على الاطلاق .

اعدادات تغيير الدومين :

اذهب الى لوحة التحكم - الاعدادات


اختر : نشر > مجال متخصص



تابع اذا كنت تريد شراء الدومين الان من بلوجر , او اختر الاعدادات المتقدمة اذا كنت تملك دومين بالفعل



ضع الدومين الذى تملكه , ثم احفظ .



ثالثا : المساحة
البلوجر يعطيك مساحة قدرها 1 جيجا للصور والفيديو , غالبا لن تحتاج مساحة اخرى اذا كنت تريد انشاء موقع الا فى حالة وجود ملفات اخرى مثل برامج او ملفات مضغوطة تريد لها مساحة خاصة , فى تلك الحالة لابد من شراء مساحة او مساحة مجانية لرفع تلك الانواع من الملفات .
هناك بدائل اخرى مثل مواقع الرفع المختلفة rapidshare ورفاقه , يمكنك من خلالها ان تتيح ملفاتك للزائرين .
متى ايضا ستحتاج الى مساحة خاصه ؟ عندما تريد انشاء منتدى مثلا ملحق بالموقع , او تريد تخزين ملفات معينة لقالب الموقع مثلملفات السكريبت او خطوط او شات او غيرها , كل هذا يستلزم وجود مساحة خاصه اخرى غير مساحة البلوجر التى لا يزيد استخدامها على الصور والفيديو .

رابعا : القالب
شئ مهم جدا يجب عليك الاعتناء به اذا كنت تريد ان تمتلك موقعا او مدونة متميزة , الا وهو التصميم الخارجى او القالب بمعنى اخر , القوالب المعتمدة من البلوجر تتميز جميعا بأنها ذات اطار واحد وهو امر عادى بالنسبة للمدون , لكن لمن يحب ان بمتلك موقعا مثلا او مدونة خدمية ذات مصادر متعددة فلن تكون تلك القوالب ذات فائدة كبيرة , على اى حال لا يوجد اكثر من قوالب البلوجر على شبكة الانترنت , يمكنك البحث هنا , او هنا عن قالب افضل .

خامسا : أشياء اخرى

هناك الكثير من الاشياء الاخرى التى تجعل الشكل النهائى للمدونة اقرب الى موقع منه الى مدونة , مثلا التاريخ , البعض يحب ازالة عنصر " التاريخ " الذى يظهر فوق او تحت كل تدوينة , شئ اخر مهم جدا هو ضم حزم الجافاسكريبت المختلفة الى البلوج سبوت مثل الـ JQuery يمكنك البدء من هنا , ثم هنا

اكتب ايميلك هنا

تكبير وتصغير الخط

تكبير وتصغير الخط قد يفيد بعض ضعاف النظر , وبعد ساعات متواصلة من النظر امام شاشتك العزيزة ستحتاجه بشدة , بعد اضافة تلك الاداة ستصبح بالشكل الموجود عندى فى المدونة بالاعلى

الخطوات : اذهب الى لوحة التحكم
التخطيط > عناصر المدونة > اضافة اداة جديدة > اداة من نوع هتمل / جافا سكريبت
الصق هذا الكود :

<div>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='.5em'"><span >+</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='0.8em'"><span style="font-size: x-small;">+</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.1em'"><span >+</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.4em'"><span style="font-size: large;">+</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.7em'"><span >+</span></a>
</div>

فى الكود السابق :
- الخط الذى سيتم التحكم به هو الخط الموجود فى كل الصفحة body
يمكن تحديد الخط الموجود فى منطقة بعينها عن طريق استبدال كلمة body بالـ id الخاص بالقطعة المراد تكبير وتصغير الخط بها , مثلا post او main-wrapper او side-wrapper وهكذا

- الوحدة التى سيتم التكبير والتصغير على اساسها هى em وهى خاصة بالخطوط , يمكن استعمال البيكسل ايضا لكن الافضل em , حيث ان الاخير ينسق بين حجم الخط وبين مساحات التصميم .

- يتراوح الحجم الادنى والاقصى من 0.5 الى 1.7 , يمكنك تغيير القيم بالطبع .

اكتب ايميلك هنا

تعلم JQuery اليوم الثانى

بعد الدرس السابق " تعلم الـ jquery " اليوم الاول , اتمنى ان يكون استفاد منه البعض , اكمل هنا


اولا : خلاصة سريعة لما سبق

انظر الصورة التالية " اضغط للتكبير "



كيف تختار اى شئ بواسطة الجى كويرى ؟

هناك العديد من الروابط فى المدونة , كلهم يرمز له بالكود a اليس كذلك ؟ كيف تستطيع ان تختار واحد منهم فقط لتخصه بعمل تاثير ما او تخصه هو نفسه بتطبيق التاثير عليه ؟
كما ذكر فى الموضوع السابق ان الرابط يمكنك ان تنشأ له id خاص تستطيع من خلاله ان تختار هذا الرابط دون غيره .
هناك ايضا العديد من الاقسام div تستطيع ان تنشأ لايها class مخصوص لتتحكم فيه دون غيره , وهكذا , ينطبق هذا الاسلوب مع كل شئ فى المدونة حتى تتحكم فى كل شئ بعينه دون غيره . اوكى

$("#box")

هنا انت تختار اى شئ فى المدونه له آى دى = box

$(".class")

هنا انت تختار اى شئ فى المدونه له كلاس = box

$("a")

هنا انت تختار اى رابط فى المدونة بدون تحديد

$("#hello")

انت تختار الرابط ( الروابط ) التى لها اى دى = hello فقط

$("p a")

هنا انت تختار الروابط الموجودة داخل أى paragraph

$("#sidebar a")

فى حالة المدونات التى بها اطار جانبى اسمه sidebar , انت هنا تختار كل الروابط الموجودة داخل اى شئ له آى دى = sidebar

$("ul il")

انت هنا تختار فقط الـ list items (li) الموجودة داخل اى Unordered list (ul) داخل المدونة , لاحظ ان الادوات من نوع link list (او قائمة روابط ) ستندرج تحت هذا الاختيار لكونها قائمة غير مرتبة . ايضا سيندرج تحتها الجداول

$("ul li:first")

مثل السابق , لكنت انت هنا تختار فقط العنصر او الرابط الأول من القائمة

$("h2")

انت تختار كل عنوان header من النوع الثانى

$("div#content .photo")

انت هنا تختار الاشياء التى لها class = photo ألتى تتواجد فقط داخل القسم div الذى له id = content .

$(this)

لنفرض ان لديك فى المدونة رابط ما له id اسمه hello مثلا
انت تريد عندما تضغط على الرابط ان ينزلق جزء التدوينات main-wrapper لاعلى
علما بان بالفعل يوجد لديك فى المدونة هذا الـ main-wrapper , وايضا لهذا الـ main-wrapper كلاس اسمخ down كى يعبر عن ان حالة هذا الـ Main-wrapper الان هى انها منزلقة لاسفل .
انت تريد عندما تضغط على الرابط ان تنزلق تلك القطعة اولا وايضا يتغير الكلاس من down الى UP كى يعبر عن ان الحالة تغيرت بالفعل

الكود سيصبح بالشكل الاتى :

$(document).ready(function(){

$("a#hello").click(function(){
$("#main-wrapper").slideUp("slow");
$(this).toggleClass("UP");
});

});

الشرح : الرابط a ألذى به id اسمه hello عند الضغط عليه .click ستنشأ وظيفة function مفادها ان : القسم div ألذى له id اسمه main-wrapper سينزلق لأعلى slideUp هذا اولا , لاحظ ان الوظيفة لم تنتهى , ثانيا سيحدث أن this ومعناها ان الـ main-wrapper نفسها هى التى سيحدث عليها التاثير , فبدلا من كتابة main-wrapper مرة ثانية , لا انت تكتب فقط this لتعنى ان نفس الشئ المذكور مباشرة من قبل هو نفسه الذى سينطبق عليه التاثير التالى , الا وهو toggleClass اى غير الكلاس من اسمه السابق الى الاسم الجديد UP . لاحظ ان toogle معناها التغيير بالتبادل , بمعنى انك عندما تضغط للامرة الاول ستبدل من down الى up والمرة الثانية ستبدل لوضعها الاصلى down والمرة الثالثة up وهكذا .

الخلاصة : ان this تعنى القطعة المذكورة مباشرة من قبل , بدلا من التكرار .

--------------------------

التطبيق الأول :

عندما تضغط على الرابط سيتحول قسم ما من كلاس لآخر , وبالتالى سيتحول من مواصفات الكلاس الأول لمواصفات الكلاس الثانى

اولا : يجب وضع مواصفات الكلاس الاول وليكن down وهو الافتراضى , وايضا وضع مواصفات الكلاس الثانى وليكن up . نضع تلك المواصفات ( الاكواد ) داخل جزء الـ head بصندوق الاكواد :

.down{
height:10px;
width:200px;
background:eeeeee;
}

.up{
height:300px;
overflow:auto;
background:e0e0e0;
}

بينما فى جزء الـ body يجب عليك اولا ان تنشا الرابط ولنضع له id مثلا اسمه slide وايضا ان تنشأ هذا القسم الذى سيطبق عليه هذا التاثير , ولنضع لهذا القسم id مثلا اسمه panel ونضع بداخله صورة وتعليق

(ضع هذه الاكواد فى منطقة الـ body ) وليكن مثلا مباشرة بعد كلمة <body>

لاحظ ان الكلاس down الافتراضى ارتفاعه 10 بيكسل , اى تقريبا مختفى , عند الضغط على الرابط سيتغير الكلاس الى up ويتغير بالتالى الارتفاع الى 300 بيكسل

<a id='slide' href='javascript:void(0);'>اضغط هنا</a>

<div id='panel' class='down'>

<img class="pic" src="http://www.barnardos.org.uk/microsite_smile.gif" />

</div>

للاستفسار او الاسئلة : اترك تعليق

اكتب ايميلك هنا

تعلم jquery اليوم الأول

لان الـ css بطئ التطور نسبيا بالنسبة للغات الاخرى , ولان الجافا سكريبت يحتاج الى وقت كبير جدا لاتعلمها واحترافها انا شخصيا مللت اثناء رحلتى لتعلم الجافا سكريبت وكدت ان اتراجع لولا ان عثرت على تلك الحزمة السحرية المسماه JQuery
تJQuery عبارة عن حزمة من الجافا سكريبت مجمعه فى عدة ملفات يمكنك تحميلها ورفعها على اى سيرفر , ومن ثم الاستعانه بها وضمها للمدونة داخل بلوجر ( او اى موقع اخر ) والتمتع بقمة من الاداء والحكم فى المدونة وانشاء عدد غير حصرى من الـ effcets كل هذا باقل كمية , فى الحقيقة بكمية صغيرة جدا جدا من الاكواد بالمقارنة بالجافا سكريبت . انت ستندهش صدقنى

لحسن الحظ ان البلوجر تدعم هذا النوع من السكريبتات , لذلك بعد البحث الكثير طوال الفترة الماضية , قررت ان اطرح سلسلة تعليمية من الصفر حول استخدام الجى كويرى فى عالم البلوجر , لا يمنع هذا ان الشرح سارى لاى صاحب موقع او مدونة اخرى تدعم الجى كويرى , لكن التركيز سينصب حول استخدامات الجى كويرى لمشتركى البلوجر .

اولا : ماهى الجى كويرى :
كما سبق هى عبارة عن حزمة من الجافا سكريبت فى عدة ملفات ( بعضها رئيسية لابد منها وبعضها الاخر فرعيه تخص كل تاثير على حدة ) تلك الملفات تستطيع ضمها للمدونة او الموقع , بعد اضافة تلك الملفات الرئيسية الى مدونتك ( ستعرف الطريقة لاحقا ) ستمنحك تلك الملفات القدرة على اختيار select اى شئ فى المدونة ( لينك , قطعة , صورة , اى شئ ) ومن ثم التحكم فيه بشكل كامل ( اخفاء , تحريك , زووم ان / اوت , الخ الخ ) بالاضافة الى اضافة المزيد من الاحداث , مثلا : هل لاحظت اقتراحات جووجل اثناء البحث ؟ هذا مثال منهم .
كل هذا يمكنك عمله من خلال ابسط كمية من الاكواد وبطريقة سهلة جدا ساحاول ان اشرحها هنا ان شاء الله تباعا عن طريق الامثلة .
_______________________

ثانيا : موقع الجى كويرى jquery لم يريد التعلم من خلال ملفات المساعدة هناك باللغة الانجليزية .
_______________________

ثالثا : كيف تستطيع ضم ملفات الجى كويرى للمدونة :
من خلال تحميل اخر نسخة من هنا , لو كنت تملك مساحة خاصة يمكنك رفع الملفات عليها ثم ضمها بالمدونة
او الطريقة الافضل : الا وهى : اجعل جووجل يستضيف تلك الملفات من اجلك ! وهى الطريقة الامثل ليس فقط لانها الاسهل لكن كى تستفيد ايضا من سرعة نقل الملفات من سيرفر جووجل مباشرة .
الطريقة :
ابحث فى صندوق الاكواد عن

</head>

اضف الكود التالى بعدها مباشرة

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

ثم احفظ
الان انت اضفت الجزء الرئيسى من ملفات الجى كويرى الى مدونتك , الجزء الباقى هو ان تتعلم كيف تختار select الجزء الذى تريد اضافة التأثير عليه , ثم ايضا تتعلم كيفية كتابة الكود الخاص بهذا التاثير .
_______________________

رابعا : نظرة عامة على تركيب الجى كويرى

<html>
<head>
هنا يوجد اكواد الاستايل
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
هنا كود سكريبت الوظيفة المعينة
</script>
</head>
<body>
اللينك التالى هو الذى سنطبق عليه الوظيفة
<a href="http://jquery.com/">jQuery</a>
</body>
</html>

<html>

هو اول كود فى صندوق الاكواد وينتهى فى آآآخر الصفحة بنفس الكود قبله سلاش /

<head>

هى بداية الراس head وتحتوى على اكواد الـ style وهى عبارة عن الاكواد التى تحدد مظهر كل قطعة فى المدونة ( طول وعرض وخلفية وبوردر الخ الخ الخ ) وتحتوى ايضا على سكريبتات الجى كويرى ( الرئيسية والفرعية وسكريبت الوظيفة ) وتنتهى بنفس العبارة ايضا قبلها سلاش /

السكريبت المكتوب باللون الازرق هو السكريبت الرئيسى للجى كويرى , لابد من وجوده فى الصندوق الاكواد ( يمكن وضعه فى جزء الراس head او جزء الجسم (body ) ويوجد ايضا ملفات جى كويرى فرعية ( سنتحدث عنها لاحقا ) تؤدى تلك الملفات وظائف معينة تختص بتاثيرا تمعينة .

السكريبت المكتوب باللون البنفسجى : هو سكريبت الوظيفة المعينة التى تريد اداءها على قطعة معينة , يمكن ان يوجد اكثر من سكريبت وظيفى فى نفس المدونة حسب اختيارك , ويمكن ضم كل الوظائف فى سكريبت واحد , لا يوجد اى مشكلة .

<body>

هى بداية جزء الجسم body ويتواجد به الاكواد التى ستحدد محتوى المدونة , وينتهى بنفس العبارة قبلها سلاش /

الجزء المكتوب باللون البرتقالى هو مثال لمحتوى المدونة الذى سيطبق عليه التاثير , وهو هنا عبارة عن لينك بسيط جدا .
انظر ايضا هذا الموضوع
_______________________

خامسا : نظرة عامة على تراكيب الـ css

<div>

اختصار division = قسم , مثلا جزء الهيدر , الاطار الجانبى (سايدبار) , ذيل المدونة (فووتر ) الجزء الرئيسى الذى يوجد به التدوينات , كل تلك الاجزاء ماهى الا اقسام توجد فى جزء جسم المدونة body .

<p>

اختصار paragraph وهو قطعة كتابية .

<a>

الكود المعبر عن ( الرابط ) او اللينك

<img>

الكود المعبر عن الصورة image

<ul>

هذا الكود والذى يليه يستخدمان فى عمل الجداول ul = unorderd list

<li>

li = list item

< id=" sidebar '">

بعض العناصر "القطع " تحتوى على اى دى معين (side bar مثلا ) يميزها عن بعض القطع الاخرى , عادة ما يستخدم هذا الاى دى لتحديد تلك القطعة دون سواها , لتحديد الاى دى نستعمل العلامة شباك

< class=" main ">

بعض العناصر الاخرى لها كلاس class او فئة معينة ( main مثلا ) , نستخدمها ايضا لتحديد تلك القطعة دون سواها , ولتحديد الكلاس نستخدم ( دوت ) = ( . )
لاحظ : بعض العناصر او القطع لها اى دى وكلاس معا
مثال :

< id="'sidebar'" class="'sidebar-wrapper'">

انظر ايضا هذا الموضوع
_______________________

سادسا : مم يتركيب الكود الوظيفى للـ جى كويرى ؟

الهيكل الرئيسى للسكريبت الذى يحتوى على الكود الوظيفى هو شكل كلاسيكى جدا وسهل جدا , ويتميز بعلامة الدولار الامريكى $ .

<script type="text/javascript">

$(document).ready(function(){

SOME CODES HERE

});

</script>

علامة الدولار باللون الاحمر هى التى تميز لغة الجى كويرى , ستجدها دائما فى اول السكريبت لتعبر عن بداية وظيفة جديدة
الكلام باللون الازرق : معناه ان الوظيفة سيبدأ تنفيذها مباشرة عندما يكون المستند ( المدونة ) جاهزة للعرض ready .
الكلام باللون الاخضر : معناه : نفذ الوظيفة function او التاثيرات التالية عندما تنتهى من تحميل عناصر المدونة وتصبح جاهز للعرض , لاحظ ان القوس الاخضر لم ينتهى مباشرة بعد كلمة function بل انتهى بالاسفل بعد اكواد الوظيفة لكى يفهم المتصفح اين بداية ونهاية تلك الوظيفة .
لاحظ ايضا وجود قوسين باللون البنفسجى مغلقين , لاحقا ستعرف انه يمكن اضافة اكواد داخل هذين القوسين فى بعض الاحوال .
لاحظ ايضا وجود قوسين باللون البرتقالى وهما الذين يحتويان على كود الوظيفة بداخلهما .

_______________________


سابعا : مزيد من التفاصيل

<script type="text/javascript">

$(document).ready(function(){

$("a#test").click(function(event){

$("img.pic").hide("slow");

});


});

</script>

فى هذا المثال لاحظ الاتى :
اضفت هنا كود وظيفة معينة , عندما سنضغط على رابط معين ستختفى صورة معينة

اصنع بوست جديد للاختبار ( يستحسن ان تصنع مدونة للاختبار والتعلم ) , انتقل الى وضع الـ هتمل وليس وضع الانشاء , وضف الكود التالى الذى يعبر عن لينك وصورة .
اللينك : لينك بسيط جدا لكن يوجد به id اسمه test سنستطيع من خلال هذا الاى دى ان نحدد هذا الرابط المعين دون غيره من بين مئات اللينكات داخل المدونة .
الصورة : كود صورة عادى جدا ايضا لكن يوجد به class اسمه pic سنستطيع ايضا من خلال هذا الكلاس ان نحدد تلك الصورة دون غيرها من بين الكثير من الصور داخل المدونة .

<a id='test' href='javascript:void(0);'>اخفاء الصورة</a>
<img class='pic' src='http://www.barnardos.org.uk/microsite_smile.gif'/>

اضغط على اللينك التالى وستختفى الصورة فورا

اخفاء الصورة





ساشرح الكود الان اذن

$("a#test").click(function(event){

$("img.pic").hide("slow");

});

فى البداية ستجد ايضا علامة الدولار بالشكل الاحمر لتعبر عن بداية الوضيفة ( لانه فى حالة تعدد اكثر من وظيفة لابد من تحدد بداية لكل منها ) , فى هذا المثال عندما نضغط click على اللينك a الذى يحتوى على id اسمه test سيتم تنفيذ function معينة ستوجد فى السطر التالى . لاحظ ان علامة # تعنى id وستجعل الجى كويرى يبحث عن الرابط الذى لديه id اسمه كذا .

فى السطر التالى ستجد الوظيفة التى ستتم عندما تضغط على اللينك , فى البادية ايضا ستجد علامة الدولار الاحمر ( لنفرض انك تريد اكثر من وظيفة عندما تقوم بالضغط على اللينك , لذلك لابد من وجود تلك العلامة لكى تحدد بداية كل وظيفة على حدة ) , محتوى تلك الوظيفة هو الاتى : الصورة img التى بها كلاس class اسمه pic ستختفى hide بطريقة بطيئة slow .

فى السطر الاخير لابد من وجود تلك الاقواس والفصلات لتعبر عن نهاية الاكواد كما سبق الذكر .


مثال كامل لكل ما سبق :

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a#test").click(function(event){

$("img.pic").hide("slow");

});
});
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>

_______________________

ثامنا : المزيد من الأمثلة :

1- عند الضغط على الرابط a الذى يحتوى على id اسمه hello ستظهر رسالة ترحيب معينة

<script type="text/javascript">
$(document).ready(function(){
$("a#hello").click(function(event){
alert("Thanks for visiting!");
});
});
</script>

للتجربة : اضف كود المثال التالى فى اداة من نوع هتمل/جافا سكريبت او فى تدوينة ( بوست ) للاختبار , بالطبع بعد اضافة الجى كويرى للمدونة

<a href="javascript:void(0);" id="hello">اظهر رسالة الترحيب</a>

للمعاينة : اضغط الرابط الاتى :

اظهر رسالة الترحيب

2- عند الضغط على الرابط a الذى يحتوى على id اسمه slideup ستنزلق الصورة التى بها class اسمه slidup الى اعلى فى وقت 1000 مللى ثانية .

<script type="text/javascript">
$(document).ready(function(){
$("a#slideup").click(function(event){
$("img.slidup").slideUp("slow");
});
});
</script>

للتجربة : اضف كود المثال التالى فى اداة من نوع هتمل/جافا سكريبت او فى تدوينة ( بوست ) للاختبار

<a href="javascript:void(0);" id="slideup">اضغط هنا</a>

<img src="http://www.barnardos.org.uk/microsite_smile.gif" class="slidup" />

للمعاينة : اضغط الرابط التالى:
اضغط هنا



_______________________


تاسعا : لمسات نهائية :

الان بعد تطبيق تلك التاثيرات على الصورة بوسطة الضغط على الرابط , يمكنك التاثير على اى قطعة اخرى فى المدونة يكون لها id او class , فمثلا الهيدر #header ,لو اردت ان تختفى عندما تضغط على رابط معين استخدم div#header بدلا من img#pic

يوجد المزيد والمزيد من التاثيرات مثل hide و slideUp بالاعلى : اهمها الاتى :

show( ) عكس hide

toggle( ) معناها ( اخفاء / اظهار ) شيئا ما عن الضغط على رابط .

slideUp( speed, callback ) : معناها ان الشئ ( تحت التأثير ) سينزلق لاسفل بسرعة معينة .

slideUp( speed, callback ) : معناها ان الشئ ( تحت التأثير ) سينزلق لاعلى بسرعة معينة .

fadeIn( speed, callback ) : معناها ان الشئ ( تحت التأثير ) سيختفى بالتدريج بسرعة معينة .

fadeOut( speed, callback ) : معناها ان الشئ ( تحت التأثير ) سيظهر بالتدريج بسرعة معينة .

animate( params, duration, easing, callback ) : ان الشئ ( تحت التاثير ) سيتحرك animate من مكان لاخر او من لون لاخر او من حجم لاخر وهكذا , فى وقت معين .

_______________________

عاشرا واخيرا : كانت تلك مقدمة بسيطة جدا عن امكانيات الجى كويرى للمبتدئين جدا جدا , هناك المزيد من الامثلة والاستخدامات الاكثر اهمية واحترافية بالطبع , لكن تلك الاساسيات لابد من ذكرها اولا .
قريبا ان شاء الله ساتعرض للامثلة مباشرة , وكيف يستغل مستخدم البلوجر تلك الميزة من اجل الوصول الى تصميم احترافى , حتى ذلك الحين اتمنى وضع اى اسئلة او تعليق او اقتراح يخص المبتدئين او يخص هذا الدرس .

الى اللقاء قريبا .

اكتب ايميلك هنا

اضافة ايموشنز الى التعليقات

هل تذكر موضوع ايموشنز للبلوجر .. نحن نتحدى الملل ؟ نعم , موضوع اليوم لا يختلف عنه كثيرا , الفرق المهم ان درس اليوم سيجعلك قادرا على اضافة تلك التاثيرات او الايموشنز فى تعليقاتك او تعليقات الزائرين المدونة

الطريقة تعتمد على تحويل رموز الايموشنز الشهيرة مثل :( :) وغيرها الى صور تعبر عن تلك التاثيرات , هذه الصور قد تم ضم روابطها الى اكواد المدونة بالفعل , كيف يتم ضم تلك الرابط الى المدونة ؟ اليكم الطريقة :

اول شئ خذ نسخة احتياطية من القلاب واحفظها على الهارد تحسبا لاى ظروف


1- ادخل الى صندوق الاكواد متبعا المسار الاتى :
dashboard--> layout- -> Edit HTML لوحة التحكم - التخطيط - تحرير هتمل

2- اضغط على الصندوق الصغير Expand Widget Templates

3- ابحث باستخدام ctrl + f عن

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>

3- ضع القطعة التالية بين السطرين السابقين :

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; direction:ltr; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>

4- ابحث عن

</head>

ثم ضع فوقها مباشرة كود السكريبت التالى

<script language='javascript' src='http://lu2a.artist.googlepages.com/smiley.js'/>

ملحوظة : الملف مرفوع على الاسبيس google space الخاصة بى والتى من المحتمل ان تحذف قريبا , فى حالة حذف الملف يمكنك تحميله من هنا ورفعه على سيرفر خاص بك

5- احفظ القالب

الان , عند اضافة تعليق سيظهر صندوق التعليقات بهذا الشكل



كل ما عليك - او الزائر - هو اضافة رمز الايموشن ليظهر فى التعليق الصورة المعبره عنه

ملاحظة : يجب اختيار ظهور صندوق التعليقات فى نفس الصفحة أسفل البوست , يمكنك عمل ذلك عن طريق الاعدادات > التعليقات .

اكتب ايميلك هنا

نحو الوصول الى قالب عالمى

الكثير منا يحب استخدام دقة شاشة (resolution ) مقياس 1024 * 768 أليس كذلك



بينما البعض من ضعاف النظر او كبار السن أو الذين اعتادو على دقة شاقة منخفضة أو أصحاب الشاشات الصغيرة أو بعض الشاشات القديمة مازال يستخدام دقة 800 * 600 وبالتالى حجم أكبر للشاشة , لكن ما لا يلاحظه الكثيرون جدا أن رؤية الزائر لأى موقع أو مدونة تختلف باختلاف دقة شاشته , الاختلاف الجوهرى هو أن المتصفح ينشأ مسطره افقية او عمودية فى حالة ما اذا كانت دقة شاشتك منخفضة حتى يستطيع ان يظهر لك حجم أكبر وفى نفس الوقت يحافظ على أبعاد الجرافيك والتصميمات الموجودة بالمدونة أو الموقع والتى حددها صاحب الموقع نفسه .

هذه المشكلة من ضمن المشاكل التى تعترض مصمم المواقع وتجعل من حياته جحيما بعض الوقت , ولان الاحصائيات عالميا غير اكيده حول اكثر دقة يستعملها مستخدم النت وقد تتعرض للاختلاف فى بعض الاحيان , ابسطها عندما تنهك عينيك من الجلوس امام الجهاز لفترة طويلة وتشعر بان الشاشة على بعد 2 كيلو من عينيك , أو عندما تفقد تعريف كارت الشاشة لديك حينها سيجب عليك ان ترى العالم بدقة 800 * 600 حتى تستطيع العثور على التعريف من تحت طقاطيق الانترنت لو صح التعبير, لذلك وجب على صاحب الموقع ان يصمم موقعه او مدونته بطريقة تريح كل المستخدمين بمختلف الدقات . أو على الاقل فى الكثير جدا من المواقع أن يكون الاختلاف أقل ما يكون ولا يتعدى ظهور مسطرق أفقية عند تصغير النافذة minimize .

حسب احصائيات ويكيبيديا حوالى 70% يستخدمون دقة 1024×768 بينما 30% يستخدمون دقة اعلى من ذلك , و 4% فقط يستخدمون دقة 800 * 600 , و 1% غير ذلك .
لهذا , فالشريحة الاكبر من المستخدمين لن يقابلوا أى مشكلة فى عرض موقعك أو مدونتك , لان معظم القوالب افتراضيا مصممة لتخدم الـ 70% , بينما الـ 30 % سيشاهدوا الموقع بكل سهولة غير أنه سيبدوا أصغر فى حقل الرؤية zoom out , لكن المشكلة الحقيقية هم الـ 4% مستخدمى دقة الـ 800 * 600 فعلا سيتغير نظام العرض بشكل كبير اذا لم تتجنب حدوث ذلك .

لماذا اذن تحدث تلك المشكلة ؟؟؟
اثناء تصميم الموقع او قالب المدونة او اى صفحة , فانت تختار مقاسات معينة لكل قطعه فى المدونة اليس كذلك , مثلا الاطار الجانبى عرض كذا , وصورة الراس مثلا طول كذا , الكثير جدا يستخدم وحدة البيكسل , فمثلا لو كان بالمدونة اطارين كلا منهما 200 بيكسل بالاضافة الى جزء التدوينات 550 بيكسل , فان الحاص ان عرض الجزء الفعال من المدونة سيصبح 950 بيكسل , هذا معناه ان المدونة ستتمدد كى تملأ 95% من الشاشة , ولو حاولت ان تصغر minimize سيحافظ المتصفح على الـ 950 بيكسل وبالتالى سينشأ مسطرة افقيه تسمح لك بالتنقل افقيا , ويسمى هذا القالب بالقالب الثابت fixed layout . حسنا
هل توجد وحدات اخرى غير البيكسل ؟
نعم توجد وحدة النسبة المئوية , بمعنى انت تريد ان يحتل الاطارين نسبة 40% من الشاشة , وجزء التدوينات 55% من الشاشة , عنها ستتمدد المدونة كى تحتل 95% ايضا لكن عند التصغير ستنكمش كل قطعه على حدة لكى تحافظ على نسبتها المئوية فى نفس الوقت , وبالتالى لا تظهر اى مسطرة افقية ويسمى هذا القالب بالقالب السائل fluid layout والتسمية واضحة.

البعض ايضا بالمناسبة يفضل استخدام البيكسل والنسبة المئوية معا فى نفس القالب , بحث يحفاظ على عرض ثابت لبعض القطع , بينما يسمح لبعض قطع معينة بالتمددوالانكماش على حساب القطعة الثابته .

توجد أيضا وحدة ثالثة وهى وحدة em وتتلخص فى ان مقياس كل قطعه سيتمدد وينكمش حسب حجم الخط ويسمى هذا القالب بالقالب الايلاستيكىElastic layout لكن تلك الطريقة تثير الكثير من المشاكل وقليلا ما تستخدم على حد علمى .



مثال البيكسل :
width : 160px;
مثال النسبة المئوية
width: 20%
حاول ان تصغر minimize مدونتى هنا , او ان تغير دقة الشاشة وستعرف المقصود تماما . ستلاحظ عدم وجود مسطرة فى الانترنت اكسبلورر نهائيا .

اذن ما مهى مميزات البيكسل وعيوبه ؟
الميزة الاهم فى رايى هى السهولة , والمناسبة المتناهية بين تصميم القالب وبين الجرافيك, بمعنى انك تستطيع وضع الكثير من الصور ( لاحظ ان الصور ثابتة الطول والعرض لاتتمدد ولا تنكمش ) لذلك لن يتعرض الموقع لاى سوء عند التصغير او تغيير دقة الشاشة .
اما العيوب فكما ذكرنا هى عدم المناسبة لكل دقات الشاشات المختلفة .
وماهى مميزات النسبة المئوية وعيوبها ؟
العكس تماما , فبينما تناسب تلك الطريقة اى دقة , فهى تحتاج الى قلبل جدا من الجرافيك ( انظر مثلا بريدك الاليكترونى فى الياهو او الهوتميل ستجد اقل كميه من الجرافيك ) ووجود اى صورة بمقاس غير مناسب سيشوه منظر المدونة اذا لم تتعامل معها بشكل جيد .

كيف تحول قالبك من البيكسل للنسبة المئوية ؟

اليكم صور للتوضيح اولا لقوالب مختلفة فى عدد الاطارات










المسالة تعتمد على تحويل البيكسل الى نسبة مئوية , اذهب الى صندوق الاكواد ستجد غالبا ان القالب لديك بالبيكسل , اقرا هنا للمزيد من المعلومات

القطع الاساسية التى ستعمل عليها :
1-header-wrapper
2- outer-wrapper
3- content-wrapper
4-main-wrapper
5-sidebar-wrapper
6-footer-wrapper

تلك هى القطع الاساسية باسمائها المعتدمة فى القوالب الرسمية للبلوجر , ولا يمنع من وجود غيرها او ان توجد باسماء مختلفه فى الكثير من القوالب الغير معتمدة لكن بنفس المعنى .

-قطعة الهيدر header اجعلها 100% بدلا من العرض المكتوب بالبيكسل

- قطعة ال: outer-wrapper من المعروف انها ستضم كل المحتويات الموجود تحتها لذلك سوف نحول عرضها من العرض المكتوب لديك مثلا 760px الى 100%

قطعة الـ content-wrapper هى الى تشمل تحت منها قطعتى الاطار الجانبى وجزء التدوينات , اجعلها ايضا 100% لو تحب


وهكذا مع بقية القطع الاخرى ذات العرض المحدد بالبيكسل حول ان تحدد لها نسبة مئوية مناسبة , مثلا لو مدونتك يوجد بها اطار جانبى واحد فقط بالاضافة الى جزء التدوينات , اجعل الاطار الجانبى 25% وجزء التدوينات 75% وبالتالى لاحظ ان الاطار الجانبى وجزء التدوينات سيتمدد ليكون 100% من الـ content-wrapper وليس من اى شئ اخر , بمعنى لو ان الـ content-wrapper عرضه 80% من الـ outer-wrapper فسيحتل الاطار الجانبى وجزء التدوينات 100% منه = 80% من الـ outer-wrapper , تذكر اننا نعمل بنظام العشة nesting حيث كل اب يحتوى ابنه داخل منه .

ملاحظة مهمة جدا : لو افترضنا انك حولت القالب من قالب ثابت الى قالب سائل , بينما حجم الخط لديك font-size محدد بقيمة ثابتة اى بقيمة بيكسلية مثلا 10 بيكسل , عندها سيتحول المنظر الى شكل قبيح عندما تصغر النافذه , حيث سيظل حجم الخط ثابتا بينما النافذه اصلا صغيرة , لذلك يجب ايضا تحويل حجم الخط من البيكسل الى النسبة المئوية بنفس الطريقة

غالبا ستجد حجم الخط ونوعه فى جزء الـ body فى صندوق الأكواد , اقرا هنا للمزيد

مصادر للامثلة بالاضافة الى الاكواد فى نفس الموقع :

قالب ذو اطار واحد :
ثابت
ايلاستيك الجزء الاكبر فقط هو الذى ينكمش


قالب ذو اطارين :
ثابت
ايلاستيك لاحظ الجزء بالمنتصف هو فقط الذى ينكمش
سائل كل الاجزاء تنكمش


يوجد الكثير جدا من الامثلة مدعمة بالاكواد يمكنك الاستفادة منها فى نفس الموقع
www.dynamicdrive.com

متنساش تشترك فى المواضيع عشان يوصلك احدث الدروس من هنا

اكتب ايميلك هنا

اسئلة الضيوف 3

نظرا لزيادة عدد التعليقات ايضا فى اسئلة الضيوف 2 تم اغلاق التعليقات هناك , وانشاء هذا البوست الجديد

لو كان عندك وقت , اقرأ من فضلك التعليقات على الموضوعين اسئلة الضيوف 2 اسئلة الضيوف 1 منعا لتكرار الاسئلة , لو عندك وقت

ومن فضلك لو السؤال يتعلق بموضوع مشروح , يكون السؤال فى نفس الموضوع
البوست ده مخصص للاسئلة العامة بخصوص البلوجر او لغة الـ HTML و CSS و JavaScript كمان لو حبيت . قريبا هايكون فيه مواضيع عن الـ JQuery كمان ان شاء الله لو فيه وقت يسمح.

ودمتم بخير ( :

اكتب ايميلك هنا

بداية لااابد منها ... الجزء الرابع والأخير

اكمالا لما بدأناه فى
الجزء الأول

الجزء الثانى

الجزء الثالث

هذا هو الجزء الاخير يتحدث بشئ من التفصيل عن جزء ( الجسم body ) لاى قالب , ولنتذكر ان وظيفة هذا الجزء هو ترتيب اجزاء المدونة ( الراس والجسم والاطر الجنبية والذيل ) الترتيب الصحيح , وتحديد مكان كل جزء منها بالنسبة للاجزاء الاخرى .

بنما كانت وظيفة جزء ( الرأس head ) هو تحديد شكل كل مافى المدونة , لونه وحجمه ولون الخلفيه و طوله وعرضه , الخ الخ الخ .

دعنى اعرض صورتين مهمتين
الاولى تعبر عن شكل المدونة الذى يظهر لك وللزائرين , هذا هو الشكل العام لاى مدونة , ولاى موقع ان اردت الدقة لكن دعنا نتحدث عن البلوجر فقط افضل
لاحظ ان كل جزء له لونه المميز , تذكر هذا اللون جيدا لاننا سنتحتاج الى المطابقة بين الصورة الاولى والثانية .

اضغط على الصورة لتراها بالحجم الطبيعى

الصورة الثانية بها توضيح لمنظر القالب = ( صندوق الأكواد ) الجزء الاعلى هو جزء ( الراس ) والجزء الاسفل هو جزء ( الجسم ) , لاحظ انه يوجد مطابقة فى الالوان بين الجزئين , وبين الصورة الثانية كلها والصورة الاولى بالاعلى .

ماعدا الكلام الموجود داخل المربعات بجزء الجسم , وهو

<b:section id="The Section id">
<b:widget id="The Widget id">
</b:widget>
</b:section>

هو ملون فقط للايضاح

اضغط على الصورة لتراها بحجمها الطبيعى

بعض الاختصارات

1- كلمة div اختصار لكلمة divition بمعنى انشاء قسم جديد يسمى كذا , واسم هذا القسم او العنوان هو الـ id وهو مميز لكل قسم .

2- كلمة section معناها " قسم " ايضا , لكن قسم فرعى داحل القسم الاكبر منه divition , ولكل section الـ id الخاص به ايضا .

3- كلمة class معناها الفئة , وبها ستجد اسم الجزء للتعريف به , مثله مثل الـ id مع بعض الاختلاف , دعك من هذا الاختلاف الان .

4- كلمة widget معناها القطعة التى توجد داخل كل section , هذه القطع هى التى نراها بالمدونة, مثل قطعة البروفايل وقطعة الارشيف وقطعة الساعه مثلا , الخ الخ الخ .
لكل قطعة id مميز لها حسب نوع القطعة , او الاداه التى اخترتها , فلو اخترت الاداه html/java script من صفحة الادوات ستنشأ قطعة جديده فى قالب المدونة لها id اسمه html , ومرقمة برقم معين لو كان هناك اكثر من اداه من نفس النوع , مثلا html1 , html2 , html3 وهكذا .
ولو اخترت اداه نصيه text ستنشأ قطعة جديده الـ id لها اسمه text1 و text2 و text3 وهكذا فى حالة وجود اكر من قطعة نصية .


لذلك , لو مللت من قالبك القديم واردت تشغيل قالب جديد , سيخبرك البلوجر ان بعض القطع سوف تعرض للحذف , لان القالب الجديد لا يحتوى على الاكواد الخاصة بالقطع الموجوده فى القالب القديم .
ينبغى عليك عندها ان تزود القالب الجديد بتلك الاكواد فى المكان المناسب , حتى لا تحذف تلك القطع وتضطر الى انشاءها مرة اخرى .

كل قطعة تكون بهذا الشكل

<b:widget id='The Widget id' locked='false' title='Title of the widget' type='Type of the widget'/>

ولا تحتاج الى كود اغلاق فى الغالب

اما الـ section فلابد له من كود اغلاق بهذا الشكل

<section> < > < > </section>

وكذلك الـ div يحتاج الى اغلاق بهذا الشكل

<div> < > < > </div>

ترتيب اجزاء المدونة فى جزء ( الجسم ) يتبع نظام " التعشيش nesting " الذى تحدثنا عنه سابقا .

بمعنى : من الطبيعى ان الاطار الجانبى sidebar واقع داخل الـ body , لذلك يجب وضع اكواد الاطار الجانبى كلها من بدايتها <div id='sidebar'> وحتى نهايتها </div> داخل جزءالـ body , وليس قبله او بعده مثلا.

مثال اخر , ذيل المدونة هو اااخر شئ تجده فى المدونة بالاسفل , فمن الطبيعى ان تكون اكواد الذيل من اولها <div id='footer'> وحتى اخرها </div> واقعة بالجزء الاسفل من جزء الـ body وقبل نهايته مباشرة بكلمة </body> .

اتمنى ان تكون الصور بالاعلى مفيده وتغنى قليلا عن مزيد من التفاصيل . ده كان الجزء الاخير

اكتب ايميلك هنا

بداية لاااابد منها ... الجزء الثالث

استكمالا للجزء السابق , نكمل ما بداناه من تفصيص لتمبليت الـ minima
توقفنا عند نهاية شرح جزء التعريفات , وكما قلنا هو عبارة عن صندوق من الصناديق التى يحتويها الصندوق الكبير head والذى هو نفسه موجود داخل الصندوق الكبيييييير html

بعد جزء التعريفات سنقابل هذا الجزء - وتذكر اننا فى منطقة الراس والتى وظيفتها هى تحديد شكل كل قطعة فى المدونة على حده - حسنا ؟

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
text-align: center;
}

هذا الجزء يضم الاكواد " او الاوسمة - جمع وسم - ان اردنا الدقة " التى ستحدد لنا شكل الـ body بالتحديد
الاوسمة التى ستحدد لنا كل هذا كما ترى محصورةبين العلامتين { و } وهذا النظام هو المتبع والذى ستلاحظه فى بقية الاكواد .
لكن ماهو الـ body الذى سنحدد شكله ؟

اجزاء المدونة عبارة عن

1- رأس head
2- جزء رئيسى main
3- اطار جانبى , واحد اواكثر sidebar
4- ذيل footer

هذه الاربعة اجزاء موجوده داخل ما يسمى بالـ container , والـ conatainer موجود بدوره داخل الـ body .

نأتى لكل كود وقيمته على حده

margin:0px 0px 0px 0px;

لاحظ الاتى :
1 - الصندوق الخاص بمنطقة الـ body ككل بدايته علامة } ونهايته علامة {
2 - يعقب كل كود مثل كلمة margin علامة نقطتان : ويعقب قيمة الوسم علامة ; لاحظ الفرق فى الشكل .
3 - هذاا لنظام هوالمتبع والذى ستلاحظه فى بقية الصناديق الاخرى الموجوده بمنطقة الرأس head .

ما معنى margin ?
معناها " حد " من جميع الجهات الاربعه , تصور مثلا صورة داخل برواز , البرواز سمكه 3 سنتيمتر , البرواز هو حد الصورة من جميع الجهات , اذن حد الصورة هو 3 سنتى من اعلى و 3 سنتى من اسفل ومن اليمين ومن اليسار .

ما هى قيمة هذا الكود ؟
القيمة المكتوبه هنا هى " صفر " فى الاربع اتجاهات , هذا يعنى انه لن يوجد حد للـ body من اى جهه , وهذه القيمة قابلة للتغيير .

ملحوظة هامه جداا :
اول صفر يمثل الجهة العليا
ثانى صفر يمثل الجهة اليمنى
ثالث صفر يمثل الجهة السفلى
رابع صفر يمثل الجهة اليسرى
لاحظ الدوان مع عقارب الساعه
ملاحظة اخرى :
قد تجد القيمة مكتوبه بهذا الشكل

margin: 0;

اذا لم تحدد قيمة اى جهة تحسب صفر افتراضيا
او من الممكن ان تجدها مكتوبه بهذا الشكل

margin:0 0 0 0;

او هذا الشكل

margin:0 5 0 3;

هنا ستجد حدا قدره 5 بيكسل باليمين وحدا اخر قدره 3 بيكسل باليسار
وقد تجده بهذا الشكل

margin-left: 5px;
margin-right: 5px;
margin-up: 10px;
margin-bottom: 20px;

هنا تم تحديد مقدار الحد لكل جهة فى سطر منفصل
ملحوظة : يتشابه الوسم margin مع وسم اخر ربما سنتعرض له لاحقا اسمه border

الوسم التالى

color:$textcolor;

هذا الكود لتحديد لون النص الموجود فى منطقة الـ body والقيمة هى $textcolor . اذا اردت ان تعرف ماهى قيمة $textcolor ارجع لجزء التعريفات الموجود باعلى القالب او راجع جزءالتعريفات , ويمكنك ايضا ان تضع قيمة مباشرة لهذه الاوسمة وهى عبارة عن كود اى لون تريده لوحة اسماء واكواد الالوان من هنا , مثلا

color:#ffffff;

الوسم التالى

font:x-small Georgia Serif;
نوع الخط

font-size: /**/small;
الكود الخاص بحجم الخط وقيمته small يمكن تغييرها الى larg
او يمكن تغييرها بقيمة محدده مثلا , وهذا افضل

font-size: 1.5em;

لاحظ التعامل مع حجم الخط بوحده em بخلاف الـ px التى هى اختصار لكلمة بيكسيل ويتم التعامل بها فى الصور والحدود وخلافه من الاشياء التى سنتعرف عليها لاحقا .

الوسم التالى

text-align: center;

كود يحدد جهة محاذاة النص فى منطقة الـ body وقيمته center وطبعا يمكن تغييرها الى اليسار left او اليمين right حسب استخدامك .

انتهت الاكواد التى تتعلق بمنطقة الـ body , ولتذكر دائما ان تلك المنطقة هى ارضية اجزاء المدونة كلها , اى انه ربما لن تظهر لك اى تغييرات ملحوظة لانها كما قلنا خلفية لاجزاء المدونة الاخرى .



باقى العناوين و " الاوسمة " التى توجد بمنطقة الرأس head سأذكرها تباعا مع مراعاة عدم التكرار :

a:link {	حرف a يعبر عن الروابط , لذلك هذا العنوان هو بداية اكواد تحديد لون الروابط , اللينكات بغض النظر عن المنطقة المحددة
text-decoration:none;	وسم تحديد شكل اللينكات , القيمة none يعنى مش هايكون فيه خطوط تحت اللينكات لو عايز خط غير القيمة الى underline
a:visited {	بداية اكواد تحديد لون اللينكات المزارة
a:hover {	بداية اكواد تحديد شكل ولون اللينك عند وقوف المؤشر عليه
#header-wrapper {	غلاف منطقة الرأس بداية الاكواد الخاصه بمنطقة رأس المدونة
width:660px;	هذا الوسم يحدد العرض , القيمة بتاعته بالبيكسل
border:1px solid $bordercolor;	وسم وظيفته عمل بوردر , او برواز , القيمه هنا 1 بالبيكسل واللون $bordercolor نظام تحديد الجهات هو نفسه النظام المتبع اللى شرحناه فى الوسم margin راجع الشرح بالاعلى
background-position: center;	وسم وظيفتح تحديد جهة المحاذاه للخلفية بمنطقة الرأس
#header h1 {	بداية الاكواد الخاصة بتحديد لون وشكل عنوان المدونة h1
padding:15px 20px .25em;	هذا الوسم مهم جدااااااا : الترجمة الحرفية له " بطانة " لنسميه نحن وسم الازاحه للداخل. لكى تفهمه تخيل ان لديك برواز 30 فى 30 , وعندك صورة 20 فى20 جوه البرواز . هاتعمل للصورة ازاحه من كل الجهات عشان تظبط وضعها داخل البرواز ,هل انت عايزها فى النص بالظبط ؟ ولا فى الكورنر اليمين ؟ وهكذا يبقا الازاحه " او التبطين " هاتحصل للصورة داخل البرواز من جميع الجهات . فى المثال اللى موجود هايحصل الاتى : ازاحة للداخل = " تبطين " 15 بيكسل من الجهة العليا وازاحة للداخل من الجهة اليسرى 20 بيكسل ومن الجهة السفلى واليمنى ازاحة قدرها 0.25em ومن الجهة اليمنى صفر ازاحة افتراضيا بغض النظر عن ماهو الشئ المزاح او المبطن اتمنى ان تفهموا جيدا هذا الوسم المهم جدااااااا
line-height:1.2em;	وسم وظيفته تحديد ارتفاع السطر , بالنسبة لعنوان المدونة او اى شئ اخر قد يقابلك
letter-spacing:.2em;	وسم لتحديد المسافة بين الحروف
#header .description {	بداية الاكواد التى تحدد لون وشكل نص وصف المدونة
max-width:700px;	الحد الاقصى للعرض المتاح لوصف المدونة , ممكن تحدد الطول كمان لو عايز تغير الكلمة الى height بدلا من width
#outer-wrapper { width: 660px;	دى بداية الاكواد اللى هاتحدد شكل برواز المدونة بمعنى : ان عرض المدونة دى ( main + sidebar ) هايساوى 660 بيكسل فلو عايز تخلى المدونة اعرض , ممكن تغير فى القيمة دى
#main-wrapper { width: 410px;	بداية الاكواد الخاصة بمنطقة الـ main ودى المنطقة اللى بتظهر فيها التدوينات مهمة جدا زى منتا شايف بس فيه فرق بين main-wrapper اللى معناها الحرفى " الغلاف " فقط وبين main اللى معناها " الجسم " اللى هو المحتوى الفعلى ده مش بالنسبة للـ main بس انما كمان للـ sidebar ولو عايز تخليها اعرض ممكن تغير القيمة المكتوبة بس لازم تزود قيمة الـ outer-wrapper
float: $startSide;	وسم يحدد مكان التواجد لمنطقة التدوينات القيمة $startside قيمتها محدده فى جزء التعريفات , راجع الجزء الثانى
#sidebar-wrapper {	بداية الاكواد التى ستحدد شكل غلاف الاطارالجانبى , لاحظ ان ده الغلاف وليس الاطار الجانبى الذى سيأتى لاحقا
h2 { line-height: 1.4em; text-transform:uppercase;	بداية الاكواد التى ستحدد شكل العناوين الفرعيه يوجد وسمين الاول يحدد ارتفاع السطر الثانى يحدد هل الحروف هاتكون " كابتال " ولا " سمول " ؟ لو عايزها سمول خلى القيمة lowercase
.sidebar {	بداية الاكواد التى ستحدد شكل المحتوى الفعلى للاطار
.sidebar ul {	بداية الاكواد التى ستحدد شكل اللينكات الليستة الغير مرتبة بمنطقة الاطار اختصار لكلمة unorderd list بمعنى الليستة الغير مرتبة ودى ف حالة لو اضفت مثلا link list او ما شابه
list-style:none;	وسم يحدد ستايل الليستة وقيمته none وتوجد قيم اخرى متاحه لكن للاسف مش هاتقدر تستعملها لانها بتحتاج متصفحات خاصه زى النتسكيب
.sidebar li {	اختصار لـ list links اى اللينكات الموجود باى ليسته , دى بداية الاكواد اللى هاتحددلنا شكلها
.sidebar .widget, .main .widget {	ده تحديد لشكل القطع الموجودة فى منطقة ااطروالمنطقة الرئيسية ايضا القطعة اسمها widget
.main .Blog {	ده المكان اللى بتظهر فيه التدوينات
.profile-img {	صورة البروفايل طبعا
.profile-data {	نص البروفايل
.profile-link {	لينك البروفايل
#footer {	منطقة ذيل المدونة
/** Page structure tweaks for layout editor wireframe */	تركيب وبناء الصفحة layout او صفحة المخطوطات بمعنى ادق
/* Posts	الاكواد القادمة - التى تلى هذا العنوان - تخص منطقة التدوينات اى المنطقة التى تعرض فيها البوستات , بدءا من عنوانها بالاعلى وحتى التعليقات بالاسفل
.post {	منطقة التدوين نفسها
.post h3 {	الاكواد الخاصة بعنوان التدوينة
.post-footer {	الكلام الموجود بذي لكل تدوينة مثل : مرسلة بواسطة فلان الفلانى
.comment-link {	اللينك بتاع التعليقات
.post img {	الاكواد الخاصة بالصورالموجوده - ان وجدت - داخل التدوينات , كيف سيكون شكلها ؟
/* Comments	الاكواد القادمة - التى تلى هذا العنوان - تتعلق بمنطقة التعليقات نفسها
#comments h4 {	عنوان كل تعليق على حده
.deleted-comment {	الاكواد الخاصة بالتعليق المحذوف بواسطة صاحب المدونة
#comments-block .comment-body {	جسم التعليقات الجزء اللى بتظهر فيه التعليقات
#comments-block .comment-footer {	ذيل جزء التعليقات
#comments-block .comment-body p {	حرف p يعنى الخط الموجود فى المنطقة المذكورة قبله وهنا المنطقة هى منطقة جسم جزء التعليقات

دى اهم الاكواد الموجودة ف اى قالب , حوالى 80% منها , لم اشئ ان افصل اكثر من ذلك حتى لا يبدوا الامر اكثر تعقيدا او اكثر سخافة , هناك اكواد تغاضيت عن ذكر وظيفتها ربما لانها ليست ذو وظيفة مهمة تذكر , سأرحب بأى استفسار يسأل عن " كود او وسم " خاص يود صاحبه ان يتعرف على وظيفته .

تلك هى نهاية منطقة الرأس للقالب minima , وضعتها لتكون مرجعا عربيا لمن يريد.

فائدة الموضوع المرجوة :

ليست التعديل على القيم , او حتى تغييرها فقط , بل خلق اوسمة جديده فى المكان الذى تريده
يعنى: عايز تعمل خلفيه للاطار الجانبى ؟
هات الوسم بتاع الخلفية من اى مكان فى القالب وضعه فىمنطقة الاطار الجانبى , وحدد قيمته بنفسك , هذا طبعا ان لم يكن الوسم موجودا بالفعل , هذا فقط مثال .
عايز تكبر الخط بتاع الكلام اللى فى الاطار الجانبى ؟
هات وسم تحديد حجم الخط من اى حتة فى القالب وضعه فى المكان المناسب واتفرج .

وهكذا , امثلة كثيرة لا يسعنى حصرها , فقط احببت ان اجعل من يحب ذلك , اجعله قادرا على فعل ذلك .

الموضوع القادم ان شاء الله شرح بسيط - مش مفصل قوى - لمنطقة الجسم body
وهى الاكواد التى تنحصر بين كلمتى <body> و </body>

اراكم على خير , وارحب باى تعليق او استفسار او تنبيه لخطأ ما قد يوجد بالبوست

اكتب ايميلك هنا