Lessons 4 bloggers

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

noreply@blogger.com (Wael) — Mon, 19 Jul 2010 14:17:00 +0000

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

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

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

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

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

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

3- ابحث على

</head>

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

<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'/>
</b:if>

</head>

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

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

او

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

<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'/>
</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>

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

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

noreply@blogger.com (Wael) — Mon, 19 Jul 2010 14:17:00 +0000

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

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

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

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

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

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

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

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

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

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

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

وابحث عن <head>

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

ثم احفظ
-----

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

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

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

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

main {

font-family: Cantarell, Sans=Serif;

}

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

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

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

noreply@blogger.com (Wael) — Mon, 19 Jul 2010 14:17:00 +0000

اذا كنت من محبى الكيبورد امثالى ( ومعاديا للفارة التى تعرف دائما كيق تختار الوقت المثالى لكى تعطل ) فانت فى حاجه لمعرفة تلك الاختصارات الكيبوردية المهمة التى ستغنيك عن الضغط على الزر المقيت 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

سلامى للجميع

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

noreply@blogger.com (Wael) — Mon, 05 Apr 2010 20:29:00 +0000

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

الطريقة :

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

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

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

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

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

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

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

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

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

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

noreply@blogger.com (Wael) — Mon, 05 Apr 2010 20:13:00 +0000

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

الطريقة :

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

<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>

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

noreply@blogger.com (Wael) — Fri, 15 Jan 2010 01:29:00 +0000

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

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

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

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

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

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

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

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

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

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

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

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

noreply@blogger.com (Wael) — Fri, 15 Jan 2010 00:35:00 +0000

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

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

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

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

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

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

noreply@blogger.com (Wael) — Fri, 15 Jan 2010 00:32:00 +0000

بعد الدرس السابق " تعلم الـ 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 بيكسل

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

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

noreply@blogger.com (Wael) — Thu, 17 Sep 2009 02:00:00 +0000

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

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

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

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

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

</head>

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

ثم احفظ
الان انت اضفت الجزء الرئيسى من ملفات الجى كويرى الى مدونتك , الجزء الباقى هو ان تتعلم كيف تختار 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'">

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

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

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

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

_______________________

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

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

اصنع بوست جديد للاختبار ( يستحسن ان تصنع مدونة للاختبار والتعلم ) , انتقل الى وضع الـ هتمل وليس وضع الانشاء , وضف الكود التالى الذى يعبر عن لينك وصورة .
اللينك : لينك بسيط جدا لكن يوجد به 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 ستظهر رسالة ترحيب معينة

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

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

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

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

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

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

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

_______________________

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

الان بعد تطبيق تلك التاثيرات على الصورة بوسطة الضغط على الرابط , يمكنك التاثير على اى قطعة اخرى فى المدونة يكون لها 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 من مكان لاخر او من لون لاخر او من حجم لاخر وهكذا , فى وقت معين .

_______________________

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

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

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

noreply@blogger.com (Wael) — Mon, 14 Sep 2009 23:30:00 +0000

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

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

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

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- ضع القطعة التالية بين السطرين السابقين :

4- ابحث عن

</head>

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

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

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

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

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

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

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

noreply@blogger.com (Wael) — Sat, 12 Sep 2009 09:25:00 +0000

الكثير منا يحب استخدام دقة شاشة (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

noreply@blogger.com (Wael) — Fri, 11 Sep 2009 00:46:00 +0000

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

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

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

ودمتم بخير ( :

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

noreply@blogger.com (Wael) — Thu, 10 Sep 2009 00:33:00 +0000

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

الجزء الثانى

الجزء الثالث

هذا هو الجزء الاخير يتحدث بشئ من التفصيل عن جزء ( الجسم 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 فلابد له من كود اغلاق بهذا الشكل

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

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

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

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

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

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

noreply@blogger.com (Wael) — Wed, 09 Sep 2009 00:33:00 +0000

استكمالا للجزء السابق , نكمل ما بداناه من تفصيص لتمبليت الـ 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>

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

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

noreply@blogger.com (Wael) — Tue, 08 Sep 2009 00:30:00 +0000

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#5588aa">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#666" value="#666666">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#999" value="#999999">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#cc6600">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ccc" value="#cccccc">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#999" value="#999999">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#666" value="#666666">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#999999">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="startSide" description="Side where text starts in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="Side where text ends in blog language"
type="automatic" default="right" value="right">
*/

/* Use this with templates/template-twocol.html */

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

/* Headings
----------------------------------------------- */

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

.post p {
margin:0 0 .75em;
line-height:1.6em;
}

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

.comment-link {
margin-$startSide:.6em;
}
.post img {
padding:4px;
border:1px solid $bordercolor;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .Blog {
border-bottom-width: 0;
}

/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $bordercolor;
}

.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.6em;
}

.profile-datablock {
margin:.5em 0 .5em;
}

.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}

.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}

/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-$startSide: 0px;
margin-$endSide: 0px;
}
]]></b:skin>
</head>

<body>
<div id='outer-wrapper'><div id='wrap2'>


<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a>
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='egyptian medicine (رأس الصفحة)' type='Header'>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='main'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='رسائل المدونة الإلكترونية' type='Blog'>
<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'><data:newerPageTitle/></a>
</b:if>

<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'><data:olderPageTitle/></a>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>Home</a>
</b:if>

</div>
<div class='clear'/>
</b:includable>
<b:includable id='backlinks' var='post'>
<a name='links'/><h4><data:post.backlinksLabel/></h4>
<b:if cond='data:post.numBacklinks != 0'>
<dl id='comments-block'>
<b:loop values='data:post.backlinks' var='backlink'>
<div class='collapsed-backlink backlink-control'>
<dt class='comment-title'>
<span class='backlink-toggle-zippy'> </span>
<a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
<b:include data='backlink' name='backlinkDeleteIcon'/>
</dt>
<dd class='comment-body collapseable'>
<data:backlink.snippet/>
</dd>
<dd class='comment-footer collapseable'>
<span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span>
<span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>
</dd>
</div>
</b:loop>
</dl>
</b:if>
<p class='comment-footer'>
<a class='comment-link' expr:href='data:post.createLinkUrl' id='b-backlink' target='_blank'><data:post.createLinkLabel/></a>
</p>
</b:includable>
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

<div class='post-header-line-1'/>

<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> 
</div>
<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span>

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>


<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>

<span class='post-icons'>

<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' title='Email Post'>
<span class='email-post-icon'> </span>
</a>
</span>
</b:if>


<b:include data='post' name='postQuickEdit'/>
</span>
</p>

<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</p>

<p class='post-footer-line post-footer-line-3'/>
</div>
</div>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + data:comment.adminClass'>
<a expr:href='data:comment.deleteUrl' title='Delete Comment'>
<span class='delete-comment-icon'> </span>
</a>
</span>
</b:includable>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
<b:includable id='feedLinks'>
<b:if cond='data:blog.pageType != "item"'> 
<b:if cond='data:feedLinks'>
<div id='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>

<b:else/> 
<div id='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.feedLinks'>
<b:include data='post.feedLinks' name='feedLinksBody'/>
</b:if>
</b:if>
</b:loop>
</div>
</b:if>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
<span expr:class='"item-control " + data:backlink.adminClass'>
<a expr:href='data:backlink.deleteUrl' title='Delete Backlink'>
<span class='delete-comment-icon'> </span>
</a>
</span>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
Subscribe to:
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' title='Edit Post'>
<span class='quick-edit-icon'> </span>
</a>
</span>
</b:if>
</b:includable>
<b:includable id='comments' var='post'>
<div id='comments'>
<a name='comments'/>
<h4>
<b:if cond='data:post.numComments == 1'>
1 Comment:
<b:else/>
<data:post.numComments/> Comments:
</b:if>
</h4>

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>

</dd>
</b:loop>
</dl>

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>Post a Comment</a>
</p>

<div id='backlinks-container'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</b:includable>
<b:includable id='main' var='top'>

<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>


<b:include name='nextprev'/>


<b:include name='feedLinks'/>
</b:includable>
</b:widget>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:team == "true"'> 
<ul>
<b:loop values='data:authors' var='i'>
<li><a expr:href='data:i.userUrl'><data:i.display-name/></a></li>
</b:loop>
</ul>

<b:else/> 

<b:if cond='data:photo.url != ""'>
<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
</b:if>

<dl class='profile-datablock'>
<dt class='profile-data'><data:displayname/></dt>

<b:if cond='data:showlocation == "true"'>
<dd class='profile-data'><data:location/></dd>
</b:if>

<b:if cond='data:aboutme != ""'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
</dl>
<a class='profile-link' expr:href='data:userUrl'>View
my complete profile</a>
</b:if>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>


<div class='clear'> </div>

</div> 

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

</div></div> 
</body>
</html>

رجاءا لا تقرا هذا الموضوع قبل قراءة الجزء الاول

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

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

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

فى الجزء الاول ذكرت ان هناك نظام خاص بترتيب الاكواد يدعى نظام التعشيش nesting , ببساطة تخيل صندوق كبير داخله صندوق اصغر منه بداخله صندوق اصغر وهكذا , اذا تخيلنا الصندوق الكبير جدا للقالب بدايته ونهايته هما كلمتى <html> و </html> على الترتيب , فان داخل هذا الصندوق الكبير يوجد صندوقان اصغر هما صندوق منطقة الراس (<head> و </head> ) محدد باللون الازرق وصندوق منطقة الجسم ( <body> و </body> ) محدد باللون الطوبى , لذلك اذا رتبنا الترتيب الصحيح سيكون بالشكل الاتى

<html>
<head>
هنا اكواد منطقة الرأس
</head>
<body>
هنا اكواد منطقة الجسم
</body>
</html>

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

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

كلمة <html> هى بداية الاكواد الفعليه للقالب التى سيراها المتصفح وينفذها ليعطيك الشكل الصحيح للمدونة . وتذكر انها بداية الصندوق الكبييير جدا , لذلك فى نهاية القالب توقع ان تجد كلمة </html> - نفس الكلمة مسبوقه بشرطة مائلة - دليلا على نهاية هذا الصندوق . لنر ما داخل هذا الصندوق اذن :

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

لنعتبره صندوق صغير جدا بدايته <title> ونهايته </title> وبداخله القيمة التى ستحدد لنا ماهو عنوان المدونة , والقيمه هى <data:blog.pageTitle/> , وطبعا ليست هذه القيمة التى ستظهر فى المدونة ولكنها مجرد تعريف لهذه القيمة , ولتتعرف اكثر على معنى التعريفات دعنا نتابع الجزء الخاص بتعريفات المدونة ...

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

ـــــــــــــــــــــــــــــــــ

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

/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#5588aa">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#666" value="#666666">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#999" value="#999999">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#cc6600">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ccc" value="#cccccc">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#999" value="#999999">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#666" value="#666666">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#999999">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="startSide" description="Side where text starts in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="Side where text ends in blog language"
type="automatic" default="right" value="right">
*/

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

هذا مثال للون خلفية المدونة bgcolor وقيمتها المحدده هنا #ffffff وهذا كود اللون الابيض , اى ان الخلفيه ستكون بيضاء . مثال اخر :

هذا تحديد للجهة التى سيبدأ منها النص فى المدونة ورمزها startside , وقيمتها الافتراضيه left وقيمتها المحدده هنا هى left وهذا بالنسبه للمدون الاجنبى الذى يكتب من اليسار لليمين , اما اذا كنت تريد تعريب مدونتك فيمكنك تغيير القيمة الى right . يمكنك ايضا الذهاب الى هذا الموضوع : تعريب المدونة

طبعا هذا تحديد للجهة التى سينتهى اليها النص ورمزها endside وقيمتها الافتراضيه right وقيمتها المحدده هنا right وسيلزمك ايضا عكس القيمة الى left اذا اردت تعريب مدونتك .
ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

ما قصة اسماء الطلاب وارقام غيابهم اذن ؟
اذا افترضنا ان جزء التعريفات هو دفتر اسماء الطلاب وارقام غيابهم , ستجد بعد قليل ان القالب يتعامل بهذه الطريقة تماما, مثلا

#main-wrapper {
width: 410px;
float: $startSide;

كلمة float معناها الحرفى " يطوف " ومعناها هنا هو المكان الذى ستتواجد به قطعة التدوين الرئيسية ( main-wrapper ) هل تريدها فى اليمين right ام اليسار left ام المنتصف center ؟
القيمة المحدده هنا هى $startSide ولكن ماهو بالظبط $startSide ؟
$startSide ماهو الا رقم الطالب وليس اسمه , اذا اردت معرفة اسمه سترجع الى دفتر الغياب لتجد ان $startSide تعنى اليسار left , اذن فى هذا القالب سيكون الجزء الرئيسى للمدونة واقع جهة اليسار . حسنا ؟

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

ملاحظة مهمة جدا : جميع التعريفات هى الاسماء + مسبقة بالعلامة $
باقى التعريفات ساذكر اسماؤها ومعانيها فقط :

$bgcolor لون خلفية المدونة
$textcolor لون نص التدوين
$linkcolor لون اللينكات اوالروابط بمعنى اصح
$pagetitlecolor لون نص عنوان المدونة
$descriptioncolor لون نص وصف المدونة
$titlecolor لون نص عناوين التدوينات
$bordercolor لون حدود المدونة
$sidebarcolor لون نص العناوين التى بالاطار الجانبى
$sidebartextcolor لون نص الكلام فى الاطار الجانبى
$visitedlinkcolor لون الروابط المزارة
$bodyfont نوع الخط
$headerfont نوع الخط فى منطقة راس المدونة
$pagetitlefont نوع خط عنوان المدونة
$descriptionfont نوع خط وصف المدونة
$postfooterfont نوع خط منطقة الذيل
$startSide الجهة التى سيبدأ منها النص
$endSide الجهة التى سينتهى اليها النص

اذن , عندما ناتى لاحقا لنحدد لون الروابط فى المدونة , سيقابلنا التعريف $linkcolor , ماهى القيمة للتعريف $linkcolor بالتحديد ؟ ستجد قيمتهه محدده فى جزء التعريفات وهى بالتحديد #5588aa حسنا ؟

بالطبع كل من لديه هذا الجزء فى القالب يمكنه تغير هذه القيم اما يدويا كما ذكرنا , او اوتوماتيكيا عن طريق الذهاب الى layout > fonts and colors ليجد اختيارات تحديد هذه القيم بالتفصيل .

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

#main-wrapper {
width: 410px;
float: left;

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

مع انى اكره تقسيم الموضوع الواحد الى عدة اجزاء الا انه ما باليد حيلة , ساتابع الجزء الثالث حوالى الساعة 12 مساءا او غدا ان شاء الله . c u soooon

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

noreply@blogger.com (Wael) — Mon, 07 Sep 2009 00:30:00 +0000

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

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

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

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

لذلك اذا كان نظامك مودرن وتحاول ان تضع قالبا كلاسيكيا اعجبك تصميمه فلن يقبل النظام هذا القالب القديم وستضطر الى تحول نظامك الى النظام القديم اولا convert to classic - ستجد هذا الاوبشن فى صفحة صندوق الاكواد - ولا انصح بهذا لانه كما قلت هناك سهوله فى التحكم فى القطع فى النظام " المودرن " بينما لا يوجد فى الكلاسيك .

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

فقط احببت ان اوضح تلك النقطتين لكثرةالاسئله بشأنهما .

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

القالب " او التمبليت " ماهو الا عباره عن اكواد يقراها المتصفح فينفذها ويعرضها بالظبط كما يقراها ليعطيك التصيم المطلوب , هذه حقيقة علميه .

القوالب الحديثة -التى يتعامل بها معظمنا - الاكواد فيها ليست مصنوعة بلغة اتش تى ام ال HTML بل بلغة XHTML وهى خليط من لغة HTML (Hypertext Markup Language) ولغة XML (Extensible Markup Language) فاصبحت لغة XHTML (Extensible Hypertext Markup Language) .

ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

قواعد بسيطة ينبغى ان تتعرف عليها بخصوص لغه XHTML قبل البدء فى التعديل على القالب هى :

1- كل الاكواد يجب ان تكون ( سمول small) مش كابيتال Codes to be in lowercase

مثال <head> </head>

2- قيم هذه الاكواد يجب ان توضع بين علامتى تنصيص Attribute values to be in quotation marks

مثال id='sidebar' او id="sidebar"

3- الاكواد المذدوجه التى توضع بداخلها القيم يجب ان تقفل باوسمة الاغلاق Container elements must have closing tags

مثال : اذا بدأت قطعة الرأس بكلمة <head> فلابد ان تغلقها بنفس الكمة وقبلها شرطه مائله " سلاش " كما بالشكل </head>

4- الاكواد الفردية ايضا يجب ان تكون مقفله بنفس الطريقة Standalone elements to be closed

مثال

5- الاكواد يجب ان تكتب بشكل مرتب Elements to be properly nested

نظام يدعى بنظام " التعشيش " وليس التحشيش هه , سنتعرف عليه فيما بعد .

6- كل الاكواد هاتلاقيها بين كلمتى <html> </html> لو نظرت صندوق الاكواد و ماعدا الاكواد التى تعلن عن التمبليت وهاتلاقيها فى اعلى التمبليت

______________________________

وبشكل عام اى قالب نستطيع ان نقسمه الى جزأين :

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

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

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

ــــــــــــــــــــــــــــــــــــــــــــــــــــــ

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

قطعة متعددة الأقسام

noreply@blogger.com (Wael) — Sat, 05 Sep 2009 21:17:00 +0000

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

اليكم الطريقة :

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

2- ابحث عن

]]></b:skin>

ومباشرة فوق هذا السطر الصق الاكواد الاتية

/* pageTabs
*/
.pageTabs {width: 760px; height:150px; margin: 10px auto 0; font-size:11px;}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
background: #e0e0e0;
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #fff;
border-bottom: 1px solid #fff;
}
.tab_container {
border: 1px solid #999;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
.tab_content h2 {
font-weight: normal;
padding-bottom: 5px;
border-bottom: 1px dashed #ddd;
font-size: 1.8em;
}
.tab_content h3 a{
line-height: 2em;
color: #254588;
}
.tab_content img {
float: left;
margin: 10px 20px 20px 0;
border: 1px solid #ddd;
padding: 5px;
}
.tab_content p{
padding-bottom:10px;
}
/*

الان ابحث عن
</head>

وانسخ فوقها مباشرة الاتى :

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

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

4- انشأ اداة جديده من نوع هتمل جافاسكريبت HTML/Javascript من صفحة عناصر المدونة , عن طريق الضغط على كلمة : اضافة اداة جديده add a page element

5- الصق فيها الكود الآتى :

<ul class="tabs">
<li><a href="#tab1">TAB1</a></li>
<li><a href="#tab2">TAB2</a></li>
<li><a href="#tab3">TAB3</a></li>
<li><a href="#tab4">TAB4</a></li>
<li><a href="#tab5">TAB5</a></li>
</ul>

<div class="tab_container">
<div id="tab1" class="tab_content">
محتويات القسم الأول
</div>

<div id="tab2" class="tab_content">
محتويات القسم الثانى
</div>

<div id="tab3" class="tab_content">
محتويات القسم الثالث
</div>

<div id="tab4" class="tab_content">
محتويات القسم الرابع
</div>

<div id="tab5" class="tab_content">
محتويات القسم الخامس
</div>

</div>

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

أخيرا : احفظ , وتاكد من النتيجة

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

رشح مدونتك فى المواقع العالمية

noreply@blogger.com (Wael) — Wed, 02 Sep 2009 21:33:00 +0000

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

اسهل طريقة لعمل ذلك عن طريق موقع fluidsocial :

هاتدخل الموقع , وتختار الازرار للمواقع التى تريدها

اضغط على الصورة للتكبير

بعد كده اما تاخد الكود وتنسخه بنفسك لو مدونتك مش بلوجر , او ببساطة تضغط على add to blogger وهاينقلك للبلوج سبوت بنفسه

اضغط على الصورة للتكبير

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

الطريقة الثانية , لمن يريد

ادخل صندوق الاكواد متبعا المسار الاتى
لوحة التحكم - التخطيط - تحرير هتمل

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

ثم ابحث عن : <p><data:post.body/></p>

ثم اضف تحت هذا السطر مباشرة الاتى :

<a class="a2a_dd" href="http://www.addtoany.com/share_save?linkname=&linkurl=www.lu2a.blogspot.com"><img src="http://static.addtoany.com/buttons/favicon.png" width="16" height="16" border="0" alt="Share/Save/Bookmark"/></a><script type="text/javascript">
a2a_linkname=document.title;a2a_linkurl="www.lu2a.blogspot.com";</script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js"></script>

غير كلمتى lu2a باللون الاحمر باسم مدونتك اهم حاجه

احفظ , وشوف النتيجة

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

شريط اخبارى خاص بمدونتك

noreply@blogger.com (Wael) — Mon, 31 Aug 2009 17:33:00 +0000

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

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

الخطوات :

من صفحة عناصر المدونة انشأ اداة جديده فى المكان المناسب لك

اختر نوع هتمل/جافا سكريبت HTML/JavaScript

الصق فيها الكود الاتى :

استبدل كلمة YOURBLOG باللون الاحمر , باسم مدونتك

فى النهاية احفظ , وشاهد النتيجة

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

تأثير : اداة الاشارة tooltip للروابط

noreply@blogger.com (Wael) — Tue, 25 Aug 2009 14:13:00 +0000

اليكم الطريقة :

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

2- ابحث عن

]]></b:skin>

ومباشرة فوق هذا السطر الصق الاكواد الاتية

#easyTooltip{
padding:5px 10px;
border:1px solid #EF6D21;
background: #181C18;
color:#E0EFE0;
}

وتحت الكود السابق الصق القطعة الاتية

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


<script type='text/javascript'>
$(document).ready(function(){
$("a.tooltip").easyTooltip();
});
</script>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'>"+content+"</div>");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery);
//]]>
</script>

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

4- الان عندما تضيف رابط "لينك" فى البوست ( يجب ان تنتقل الى وضع تحرير عتمل وليس وضع انشاء اثناء كتابة البوست ) يجب ان يكون الرابط بهذا الشكل

اخيرا : احفظ , وتاكد من النتيجة

تأثيرات الـ JQuery المذهلة

noreply@blogger.com (Wael) — Tue, 25 Aug 2009 14:10:00 +0000

ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative; /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEo1TKrc_3ownrhSiuztIXehU4K2-Dw99lCmY3pHQQ2hi6z86ASRndlt8SlEYPYeFYpH3RA-pMv2whPVw4DrfZ6bdZ2Tx70pRHnGX5Wo64CJovouwS8uWJ4341AJyRHVmhHjqvIU9-dEuI/) no-repeat center center; /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

وتحت الكود السابق الصق القطعة الاتية

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

4- انشأ اداة جديده من نوع هتمل جافاسكريبت HTML/Javascript من صفحة عناصر المدونة , عن طريق الضغط على كلمة : اضافة اداة جديده add a page element

5- الصق فيها الكود الآتى :

اخيرا : احفظ , وتاكد من النتيجة

noreply@blogger.com (Wael) — Tue, 25 Aug 2009 14:05:00 +0000

/*
Slideshow style rules.
*/
#contentSlide {
border: 1px solid #000;
background:#212421;
height:263px;
padding:10px 0;
}
#slideshow {
margin:0 auto;
width:640px;
height:263px;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlTPJpS_axI/AAAAAAAABYA/JS60KVWJ9GQ/bg_slideshow.jpg) no-repeat 0 0;
position:relative;
}
#slideshow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:263px;
}
.control {
display:block;
width:39px;
height:263px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
#leftControl {
top:0;
left:0;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlT8KH99FgI/AAAAAAAABZM/e9gXvHjzltU/control_left.jpg) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlT8KMpFpxI/AAAAAAAABZQ/a207Rx0XuiU/control_right.jpg) no-repeat 0 0;
}

.slide h2, .slide p {
margin:15px;
}
.slide h2 {
font:italic 24px Georgia, "Times New Roman", Times, serif;
color:#212421;
letter-spacing:-1px;
}
.slide img {
float:right;
margin:0 15px;
padding: 1px;
background-color: #212421;
border: 1px solid #999;
}

وتحت الكود السابق الصق القطعة الاتية

<div id="contentSlide"><div id="slideshow">
<div id="slidesContainer">

<div class="slide">
<h2>Free Domain Name</h2>
<p><a href="http://tinyurl.com/nlqnby"><img alt="Free Domain Name" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJEBAo7jm92_XNs0jYk3UWX9p7urVK-cK-pMtXEZsIg3sCyq4wzSOxJNv6OOzztlG_mGp-HNAIINdJgRVk8IxKe0lzBBFZpvFTcLIo0ad7BOBPi8wYmEk_tNCjoOzbAnGt9c8YBRL8c98/" height="145"/></a>CO.CC has become the world's #1 choice for free domains by providing innovative, competitively-priced products, delivering the highest quality customer service, and by always appreciating and listening to its customers!</p>
</div>

<div class="slide">
<h2>Free Web Hosting</h2>
<p><a href="http://www.000webhost.com/173265.html"><img alt="Free Web Hosting" width="215" src="http://www.000webhost.com/images/banners/120x120/banner1.gif" height="145"/></a>000webhost.com ($0.00 webhost), is an industry leader in providing top class free web hosting services without advertising! There are no hidden costs, no adverts, and no restrictive terms. Lighting fast speeds, maximum reliability and fanatical user support are just a few of the features you'll receive with our service.</p>
</div>

<div class="slide">
<h2>Make Money on Twitter</h2>
<p><a href="http://revtwt.com/index.php?id=18676"><img alt="Make Money on Twitter" width="215" src="http://revtwt.com/images/TwtAd_referral02.jpg" height="145"/></a>You enjoy tweeting with your friends, but wouldn't it be great to make a little extra cash on the side while you post on Twitter? RevTwt has the solution: we give you links to post on your Twitter account, and you earn money each time someone clicks on your link!</p>
</div>

<div class="slide">
<h2>Monitize Your Blog</h2>
<p><a href="http://www.bidvertiser.com/bdv/bidvertiser/bdv_ref.dbm?Ref_Option=pub&Ref_PID=232687"><img alt="Monitize Your Blog" width="215" src="http://www.bidvertiser.com/BidVertiser/images/Referral/p/ref_125x125_yellow_pbl.gif" height="145"/></a>
Pay per click advertising - online advertising directly on sites of your choice, internet marketing solution for online advertisers.</p>
</div>

<div class="slide">
<h2>Upload And Earn</h2>
<p><a href="http://www.ziddu.com/register.php?referralid=%28y%5DtNG;Z%7EQ%7C"><img alt="Upload And Earn" width="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ6H6ivT0ZzGtHOVaPruyfvxoHjnGFrCEO4w9Rp1fxfKx4OzTLkJg0b-4iQFnTTayjMQzsqnYtW2g03cTkdkJLXPi-7iohP_Wx5t0AW5NCJzGIEEQDwAjnQ_hqzJTClhQs9hLSDi2VXH8/" height="145"/></a>Ziddu is a complete Free file hosting system which offers services like Free Web Hosting, Image hosting & Free Web Space. Ziddu users can play,watch,share ...
</p>
</div>

</div>
</div></div>

اخيرا : احفظ , وتاكد من النتيجة

قطعة عرض شرائح

noreply@blogger.com (Wael) — Tue, 25 Aug 2009 13:29:00 +0000

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

بعد الانتهاء من تركيب القطعه ستصبح بهذا الشكل

اليكم الطريقة :

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

2- ابحث عن

]]></b:skin>

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

/* slideshow */
.sample{padding:20px 10px; margin:4px 0 25px 0; border:1px solid #e1e1e1}
#box2{
position:absolute;
}
#box2 span{
display:block;
float:left;
}
.buttons{text-align:center;padding:5px;}
.buttons span{color:#0080FF;padding:0 5px;cursor:pointer;font:10px Verdana}
.buttons span.active, .buttons span:hover{background:#0080FF;color:#fff}

.mask2{
position:relative;
width:240px;
height:180px;
overflow:hidden;
}

وتحته ( الكود السابق الملون باللون الاحمر ) الصق القطعة الاتية

<h2>SlideShow</h2>
<div class="sample">
<div class="mask2">
<div id="box2">
<span><img alt="Photo" src="الرابط الاول"/></span>
<span><img alt="Photo" src="الرابط الثانى"/></span>
<span><img alt="Photo" src="الرابط الثالث"/></span>
<span><img alt="Photo" src="الرابط الرابع"/></span>
<span><img alt="Photo" src="الرابط الخامس"/></span>
<span><img alt="Photo" src="الرابط السادس"/></span>
<span><img alt="Photo" src="الرابط السابع"/></span>
<span><img alt="Photo" src="الرابط الثامن"/></span>
</div>
</div>
<p class="buttons">
<span id="prev1"><< Previous</span>
<span id="next1">Next >></span>
</p>
</div>

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

اخيرا : احفظ , وتاكد من النتيجة

خلفيات متغيرة

noreply@blogger.com (Wael) — Sun, 23 Aug 2009 15:18:00 +0000

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

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

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

1- انشاء قطعة جديدة من نوع هتمل جافا سكريب html/java script من صفحة العناصر
ثم الصق بها هذا الكود :

هذا الجافا سكريبت يعمل على تغيير الـ background للـ body بشكل تلقائى , اتبع الخطوات الاتية :

- ضع روابط الصور مكان الجمل باللغة العربية بين علامات التنصيص بالتريب , لا تحذف علامات التنصيص

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

يمكنك تعديل تلك القيم اذا كانت هناك ضرورة , مثلا ممكن ان تضع center center بدلا من top left اذا كنت تريد للصورة ان تتموضع فى وسط المدونة , ويمنك ايضا ان تجعلها repeat-x او repeat-y بدلا من no-repeat كى تتكرر الصورة افقيا x او راسيا y , اما لو اردتها ان تكرر افقيا وراسيا معا فيجب حذف no-repeat وعدم وضع شئ مكانها , والمتصفح سيكررها بشكل افتراضى .

- الرقم 10 باللون البنفسجى يدل على عدد الصور , اذا كان لديك عدد صور اقل او اكثر , احذف الروابط بالاعلى او كررها , ثم غير الرقم 10 بالرقم المناسب

2- بعد لصق الكود فى القطعة , احفظ وجرب :)

Wibiya شريط أدوات

noreply@blogger.com (Wael) — Wed, 19 Aug 2009 10:40:00 +0000

شريط أدوات جميل جدا من موقع www.wibiya.com بالظبط كالذى تراه هنا بالاسفل

1- ادخل الموقع www.wibiya.com
2- اضغط على get it now

اضغط على الصورة للتكبير

3- ضع اسمك وايميلك ورابط المدونة او الموقع , وانتظر حتى يرسلوا لك رسالة التفعيل , ربما تاخذ الموافقة وقتا .

اضغط على الصورة للتكبير

4- بعد ارسال رسالة التفعيل اليك , ادخل الموقع عن طريق رابط التفعيل واتبع الاتى :

اضغط على الصورة للتكبير

5- اختر لون التوولبار ( شريط الادوات )

اضغط على الصورة للتكبير

6-اختر الادوات التى تريد ان تظهر فى شريط الأدوات , لاحظ ان بعض الادوات ستحتاج الى تخصيصات معينة فى الصفحة التالية :

اضغط على الصورة للتكبير

7- خصائص كل اداة على حدة , يجب عليك ملأها

اضغط على الصورة للتكبير

بعد الانتهاء اضغط على next

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