Lessons 4 bloggers

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

2010-07-19T17:17:00.021+03:00

هل تذكر بوست مواضيع ذات صلة 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="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/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>

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

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

2010-07-19T17:17:00.014+03:00

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

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

}

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

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

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

2010-07-19T17:17:00.004+03:00

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

سلامى للجميع

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

2010-04-05T22:29:00.007+02:00

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

الطريقة :

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

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

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

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

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

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

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

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

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

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

2010-04-05T22:13:00.004+02:00

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

الطريقة :

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

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

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

2010-01-15T03:29:00.000+02:00

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

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

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

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

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

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

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

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

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

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

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

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

2010-01-15T02:35:00.005+02:00

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

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

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

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

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

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

2010-01-15T02:32:00.001+02:00

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

2009-09-17T04:00:00.013+02:00

لان الـ 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 من مكان لاخر او من لون لاخر او من حجم لاخر وهكذا , فى وقت معين .

_______________________

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

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

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

2009-09-15T01:30:00.004+02:00

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

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

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

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- احفظ القالب

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

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

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

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

2009-09-12T11:25:00.000+02:00

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

2009-09-11T02:46:00.000+02:00

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

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

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

ودمتم بخير ( :

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

2009-09-10T02:33:00.000+02:00

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

الجزء الثانى

الجزء الثالث

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

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

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

2009-09-09T02:33:00.000+02:00

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

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

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

2009-09-08T02:30:00.000+02:00

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

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

2009-09-07T02:30:00.006+02:00

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

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

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

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

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

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

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

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

2009-09-05T23:17:00.002+02:00

هذا الدرس يعتمد كليا على تقنية الجى كويرى 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>

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

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

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

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

2009-09-02T23:33:00.003+02:00

شئ مهم جدا لكل مدون ان يشارك تدويناته بالمواقع العالمية مثل 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 باللون الاحمر باسم مدونتك اهم حاجه

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

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

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

2009-08-31T19:33:00.001+02:00

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

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

الخطوات :

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

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

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

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

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

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

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

2009-08-23T17:18:00.000+02:00

ما رايك لو مع كل ضغطة 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 شريط أدوات

2009-08-19T13:40:00.007+03:00

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

منع الكليكة اليمين

2009-08-15T17:45:00.002+03:00

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

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

بعد اللصق , احفظ وجرب بنفسك :)

اعتقد ان الإختراع القادم هايكون صاقع كهربائى , لان صعب جدا نمنع الكليكة الشمال , مش كده ولا ايه

حول من الووردبريس وتعالى للبلوجر

2009-08-12T16:43:00.000+03:00

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

2- يمكنك فى البلوجر ضم الـ third party tracker scripts لا اعلم ما ترجمتها العربية , لكنها صيحة كبيرة يمكنك من خلالها الوصول الى تصميم احترافى .

- مقارنة بين القطع widgets المتاحة فى بلوجرر ووردبريس :

البلوجر :

Add a Gadget | Followers | Blog List | Subscription Links feed readers. | Slideshow | Newsreel | Video Bar | List | Link List | Picture | Text | HTML/JavaScript | AdSense | Feed | Labels [categories] | Logo | Profile | Page Header | Blog Archive | Poll

الووردبريس :

Akismet | Archives | Blog Stats | Box.net file sharing | Calendar | Categories | del.icio.us | Flickr | Links | Meebo | Meta | Pages | Platial MapKit | Recent Comments | Recent Posts | RSS | Search | Sonific Songspot | Tag Cloud | Text | Top Clicks | Top Posts | Vod:Pod Videos | Twitter | Gravatar

- حجم تخزين الصور والفيديو فى البلوجر 1 جيجا , بينما حجم تخزين الصور ( لا اعلم هل فيه امكانية فيديو ولا لا فى الخدمة المجانية ) 3 جيجا .

- ميزة جيدة فى ووردبريس ان التعديل على اسماء روابط التدوينات متاح , بالاضافة الى ما يعرف بـ Static pages وهو غير متاح فى البلوجر .

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

خطوات التحويل :

هاتدخل الووردبريس وتتبع الاتى :

الخطوة التالية :

ثم :

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

ثم تقفز الى البلوجر , وتنشئ مدونة جديده , وتتبع الاتى :

setting > import blog
الاعدادات > استيراد مدونة

أخيرا وفى الصفحة التالية :

هكذا وبدون أى خسائر سوى تغيير الرابط , أهلا بيك فى البلوجر :)

اجمل قوالب 2008

2009-08-11T05:30:00.000+03:00

قطعة : احدث التدوينات / بالصور

2009-08-11T04:00:00.000+03:00

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

فهاتبقا بالشكل ده

الكود :

- غير كلمة lu2a باللون الاحمر باسم مدونتك .
- رقم 7 باللون البنفسجى هو عدد اللينكات التى ستعرض فى تلك القطعة يكنك تغييره .
- لاحظ ان لينك التغذية الموجود هنا (الفييد feed ) هو اللينك الافتراضى للبلوجر , لو كنت من مستخدمى مواقع التغذية الاخرى مثل feedburner او غيره ويوجد لديك رابط تغذية اخر , يستحسن وضعه .
من صفحة ادوات المدونة (لوحة التحكم >تخطيط ) ثم اضغط على على : اضافة اداة جديده
اختر اداة من نوع html/javascript هتمل جافاسكريب ثم الصق فيها الكود

تحديث : 13/8/2009

او ببساطة اضغط على الزر الاتى :

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

2009-08-11T03:00:00.000+03:00

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

الطريقة سهلة جدا :
ادخل الموقع linkWithin

فى الصفحة التالية :

وفى الصفحة التالية :

ملحوظة :

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

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

اربح من مدونتك

2009-08-11T00:00:00.000+03:00

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

الصفحة التالية : اشكال عديدة لوضع اعلانات جووجل داخل مدونتك

طبعا يلزمك وجود حساب خاص بك فى جووجل ادسنس

للتعرف على المزيد عن اعلانات ادسنس مركز مساعدة ادسنس

شات جووجل google talk

2009-08-07T01:32:00.001+03:00

تحديث : 13/8/2009
لاضافة تلك القطعة ببساطة اضغط على الزر الاتى :

____________________________

لو كنت من مستخدمى google talk ده كود جديد تقدر بيه تضيف غرفة محادثة للمدونة , وتتكلم مباشرة من داخل مدونتك

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

سو دو كو

2009-08-07T01:21:00.000+03:00

تحديث 13/8/2009: لاضافة تلك اللعبة لمدونتك بضغطة واحده , استعمل الزر الاتى :

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

للى عايز يضيفها , يلصق الكود التالى فى قطعة "ويدجت" من نوع اهتمل جافاسكريبت html/java script
عن طريق : اضافة اداة جديدة من صفحة عناصر المدونة

قطعة اخر التعليقات

2009-08-07T00:57:00.000+03:00

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

الطريقة :

انشاء اداة جديده من نوع HTML/JAVA SCRIPT هتمل جافا سكريبت , متبعا المسار الاتى :
لوحة التحكم - التخطيط - صفحة العناصر - اضافة اداة جديده
DASHBOARD - LAYOUT - page elements - add a page element

واختيار النوع html/java script

واضافة الكود الاتى بعد التعديل عليه

1- رابط مدونتك : باللون الاحمر غير اسم مدونتى باسم مدونتك .
2- عدد التعليقات : باللون الازرق مكتوب رقم "5" يمكنك تغييره .
3- عدد حروف كل تعليق : مكتوب باللون البنفسجى يمكنك تغييره .

بعد التعديل , الصق الكود واحفظ :)

تحديث : 13/8/2009
ضف تلك القطعة الى المدونة بضغطة واحدة

عداد للزائرين

2009-08-06T23:41:00.000+03:00

اذا كنت ترغب فى معرفة عدد زائرى مدونتك بشكل يومى , فالامر سهل جدا عن طريق الموقع statcounter.com

لابد اولا من التسجيل حتى يمكنك الحصول على الكود النهائى

بعد الحصول على الكود يمكنك اضافته بطريقتين , الطريقة الاسهل هى انشاء قطعة جديدة فى صفحة عناصر المدونة widget من نوع هتمل جافا سكريب html/java script ثم لصق الكود فيها

والطريقة الاقل سهولة هى الذهاب صندوق الاكواد متبعا المسار المعتاد : لوحة التحكم < التخطيط < تحرير هتمل ثم وضع الكود بحرص فى منطقة الـ body فى مكان مناسب , والافضل انشاء <> ووضع الكود بداخله

احدث 5 قوالب بلوجر

2009-08-06T23:20:00.000+03:00

لهواة التجديد , اليكم خمس من احدث وافضل القوالب

1. Green Dark Blogger Template

العرض من هنا
التحميل من هنا

---------------------------
2. Desk Mes Blogger Template

العرض من هنا
التحميل من هنا

---------------------------
3. Zinmag Primus Blogger Template

العرض من هنا
التحميل من هنا

---------------------------
4. iWork Blogger Template

العرض من هنا
التحميل من هنا

---------------------------
5. Ads Theme

العرض من هنا
التحميل من هنا

للتعرف على طرق تغيير القالب وكيفية المحافظة على القطع القديمة وتحاشى حذفها , من فضلك اقرأ المواضيع الاتية:

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

مدونة القوالب

رابط المدونة

2009-05-09T18:01:00.001+03:00

رابط المدونة الجديد

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

الكود

هاتضيفه فى اداة من نوع html/java script

أكواد بديلة فى حالة حذف الأول :

1- مقاس 220 فى 60 بيكسل , خلفية بيضاء jpg

2- مقاس 220 فى 60 بيكسل , خلفية سوداء jpg

3- مقاس 136 فى 161 بيكسل , خلفية بيضاء jpg

1- مقاس 204 فى 241 بيكسل , خلفية بيضاء jpg

قوالب جديدة نوفى

2009-05-06T17:06:00.000+03:00

القالب الأول

للمعاينة : من هنا

للتحميل : من هنا

لتحميل صور القالب من هنا : من هنا

****************

القالب الثانى

للمعاينة : من هنا

للتحميل : من هنا

****************

القالب الثالث

للمعاينة : من هنا

للتحميل : من هنا

لتحميل صور القالب من هنا : من هنا

****************

اجعلنى الصفحة الرئيسية

2009-03-15T16:35:00.000+02:00

بعد موضوع انشاء رابط : اضفنى الى المفضلة

يمكنك ان تذهب بخيالك الى ابعد من ذلك , ربما الى ذلك الوقت الذى يرغب فيه زائر مدونتك فى اضافتها - مدونتك - كصفحة رئيسية Home Page , بدلا من جوجل او ياهو , مثلا يعنى , المهم ماعلينا

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

1- اذهب الى صفحة عناصر المدونة page elements
2- فى المكان المناسب اضغط على add a new element اضافة اداة جديدة
3- اختر اداة من النوع html/java script
4- اضف بها هذا الكود , بعد تعديل الرابط باللون الاحمر , واسم اللينك باللون الازرق

<a onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.lu2a.tk');"><b><span style="color:#336699;"><span style="font-size:130%;">Click here to make this your default homepage</span></a><span style="font-size:130%;">

لتصبح بهذا الشكل

Click here to make this your default homepage

عمل غرف محادثة

2009-03-15T16:34:00.002+02:00

اهم المواقع التى تستطيع من خلالها اضافة غرفة محادثة الى مدونتك

فى رايى الشخصى ان افضلهم , اول 3

1 - من شركة جوجل نفسها , عبر حساب google talk

2- MeeboMe

3- Plugoo

4- Mabber

6- Pladeo

7- Userplane

8- Geesee

9- Gabbly

10- Chatango

11- Zoho Chat

اضافة الى المفضلة

2009-03-15T16:34:00.001+02:00

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

الخطوات :

اذهب الى صفحة عناصر المدونة

فى المكان المناسب اضغط هلى : اضافة اداة جديدة

اختر النوع HTML/JAVA SCRIPT

واضف فيهاهذا الكود بعد التعديل , يمكنكتعيير الرابط باللون الاحمر واسم الرابط باللون الازرق

<a href="javascript:window.external.AddFavorite('http://lu2a.tk')">أضفنى الى المفضلة</a>

ليظهر بهذا الشكل

أضفنى الى المفضلة

*******************

من الممكن ايضا ادماج الرابط فى صورة

اقرا الموضوع : صورة مربوطة بلينك

قائمة ازرار عرضية horizontal buttons

2009-03-15T16:34:00.000+02:00

الكثير يسال عن كيفية انشاء قائمة ازرار عرضية , مثل " الرئيسية , للاتصال بنا , عنا , ... " وهكذا

اليكم الطريقة بالتفصيل

( احفظ نسخة احتياطية من القالب )

1- اذهب الى صندوق الاكواد متبعا المسار المعتاد

2- ابحث عن قطعة الـ #header{

ستكون مثلا بالشكل التالى

#header {
height: 110px;
margin: 0px;
padding: 0px;
background-color: $headerBgColor;
}

الصق تحتها هذا الكود

#newnavbar ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}

(السر فى الخاصية الملونة باللون الاحمر التى تجعل الروابط تظهر بشكل عرضى, ويمكنك ايضا التعديل على خاصية موجودة فى هذه الاكواد , اتمنى ان يكون معناها مفهوما , يمكنك قراءة مواضيع " بدايات لابد منها 1 , 2 , 3 , 4 " للمزيد من شرح الاكواد )

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

4- اذهب الى صفحة عناصر المدونة , وفى منطقة راس المدونة اضغط على : اضافة اداة جديدة

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

5- اختر اداة من نوع HTML/JAVA SCRIPT

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

<div id='newnavbar'>
<ul>
<li><a href="www.lu2a.blogspot.com">wael</a></li>
<li><a href="www.art-lu2a.blogspot.com">art</a></li>
<li><a href="www.blogger-lu2a.blogspot.com">دروس</a></li>
<li><a href="www.lu2a.blogspot.com">About Me</a></li>
<li><a href="mailto:dr.wael4health@hotmail.com">للاتصال</a></li>
</ul></div>

6 - احفظ .

كيفية عمل التصنيفات - المسميات

2009-03-15T16:33:00.000+02:00

الكثير لا يزال يسال عن كيفية عمل التصنيفات "المسميات" اوالـ labels

الخطوات :
اولا : اضافة اداة الـ labels او المسميات

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

ثانيا : عمل تحرير edit للتدوينات المراداضافة مسمى لها

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

مش اكتر من كده

مواضيع ذات صلة

2008-10-25T19:17:00.000+02:00

باختصار وكما يشير العنوان

طريقة جديدة وظيفتها ادراج المواضيع ذات الصلة بعد الانتهاء من البوست
* تذكر ان تاخذ نسخة احتياطية من القالب قبل البدء
1- اذهب الى صندوق الاكواد
dashboard > template > layout > editHTML
واضغط على المربع الصغير اللى اللى اسمه
Expand Widget Templates
2- ابحث عن
<data:post.body/>

وفى السطر التالى لهذا السطر اضف القطعة التالية

<b:if cond='data:blog.pageType == "item"'>
<div class='similar'>
<div class='widget-content'>
<h3>مواضيع ذات صلة</h3>
<div id='data2007'/><br/><br/>
<div id='hoctro'>
</div>
<script type='text/javascript'>

var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

3- احفظ , بس

Link List متمددة

2008-09-11T03:23:00.000+02:00

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

<b:widget id='LinkList50' locked='false' title='List Title' type='LinkList'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;">');
//]]>
</script>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

ولو عايز القطعة تظهر وتختفى من خلال الضغط على علامة ( +/- )

<b:widget id='LinkList50' locked='false' title='List Title' type='LinkList'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:left;margin-right:5px;">[+/-]<\/a>');
//]]>
</script>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

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

<b:widget id='HTML3' locked='false' title='Posts' type='HTML'/>
<b:widget id='LinkList1' locked='false' title='فهرس الدروس' type='LinkList'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
<b:widget id='HTML5' locked='false' title='رابط المدونة' type='HTML'/>
<b:widget id='HTML11' locked='false' title='ضع ايميلك لتصلك اخر المواضيع' type='HTML'/>
<b:widget id='HTML6' locked='false' title='كلمنى لو اونلاين' type='HTML'/>

هاتضع انت كود القطعة بالكامل بين احدى تلك القطع , مثلا

<b:widget id='HTML3' locked='false' title='Posts' type='HTML'/>
<b:widget id='LinkList1' locked='false' title='فهرس الدروس' type='LinkList'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>

ضع كل الكود هنا فى السطر ده

<b:widget id='HTML5' locked='false' title='رابط المدونة' type='HTML'/>
<b:widget id='HTML11' locked='false' title='ضع ايميلك لتصلك اخر المواضيع' type='HTML'/>
<b:widget id='HTML6' locked='false' title='كلمنى لو اونلاين' type='HTML'/>

وبعدين تحفظ

ملاحظة مهمة جدا : لو ناوى تحط اكثر قطعة من النوع ده , لازم تغير الآى دى "id" قبل الاضافة , هنا الآى دى "LinkList50" مكتوبه باللون البحلقى ده فوق , ولازم تغيره تخليه مثلا LinkList55 او LinkList66 براحتك .

تمييز تعليقك عن تعليق الزائرين !!

2008-09-11T02:26:00.002+02:00

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

طريقة جديدة تقدر بيها تميز تعليقك من بين تعليقات الزائرين الكتييييييرة جدا , ده لو كنت من اصحاب المدونات الشهيرة لا سمح الله او كان نظرك ضعيف فمش بتقدر تشوف تعليقك , او اى سبب تانى , المهم
ادخل المدونة
روح على صندوق الاكواد ومساره كالتالى
dashboard > template > layout > editHTML او ما يقابله باللغة العربية
اضغط على البوكس الصغير اسمه Expand Widget Templates

ابحث عن الاكواد الخاصة بالتعليقات ( هاتلاقي الفترة الخاصة بالتعليقات اسمها comments غالبا ) وضف لها القطعة التالية فى المكان المناسب

.author-comments {
background: #CC3300;
border: 2px solid #666666;
padding: 5px;
}

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

وطبعا ممكن تغيركود اللون باى كود لون اخر ( ممكن تدور هنا ) . او تضيف بعض الخصائص من عندك .

قطعة : ابعتلى احدث المواضيع

2008-09-11T02:11:00.000+02:00

قطعة : ابعث لى باحدث المواضيع ( كما بالمدونة هنا ) ووظيفتها اتاحة الفرصة للزوار لمتابعة احدث تدويناتك عن طريق الاشتراك من خلالها .
والجدير بالذكر ان هناك الكثير من المواقع التى تقوم بخدمة التغذية المرتجعة " feed " مثل " feedburner " وهو من أشهرهم .
لكن تلك القطعة الموضحة هنا سيقوم بانشاءها لنا موقع اخر هو feedblitz , وقمت باختياره لسهولته .
الخطوات سهلة جدا
ادخل هـــنـــا
هاتلاقى خانتين
اكتب فى الاولى ايميلك
وفى الثانية الرمز الموجود بالصورة
وبعدين اضغط على الزرار اللى اسمه
Install Your Email Subscription Widget on Blogger
وهاينقلك فورا لاضافة القطعة من موقع البلوجر

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

أسئلة الضيوف 2

2008-08-27T06:28:00.000+03:00

السلام عليكم ورحمة الله وبركاته

وكل عام وأنتم بخير جميعا

نظرا لان البوست بتاع " اسئلة الضيوف " كبر جدا وزاد عن الـ 110 تعليق ف عين العدو , وأكيد هايكون سبب فى تهنيج أنترنتكسبلوراتكم أو فايرفوكساتكم او أوبراتكم أو أياَ كانت متصفحاتكم إكـُم إكـُم , عشان كده البوست ده كجزء تانى , هنكمل فيه الاسئلة , التعليقات اتقفلت هناك ومفتوحة هنا طبعا ( بنفس الشروط المتفق عليها فى الموضوع الاول واهمها ان الاسئلة تكون غير متعلقة باى درس مشروح هنا , اما لو بخصوص موضوع معين فياريت تحط سؤالك فى نفس الموضوع ) .

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

وأمنياتى للجميع بدوام الصحة والإسكان D:

تحديث : التعليقات اتقفلت هنا , هانكمل فى البوست ده اسئلة الضيوف 3

التعليق من اسفل البوست

2008-08-10T08:54:00.000+03:00

اخيرا عملت بلوجر نظام التعليق السلس من نفس الصفحة اسفل كل تدوينة زى مدونات الووردبريس بالظبط
وتقدر تنفذها بكل سهولة
1- ادخل هـــــنـــــا وسجل دخولك
2- اذهب الى setting و بعدها comments وغير Comment Form Placement خليها Embedded below post
3- احفظ save

اذهب الى مدونتك و اتاكد ان صندوق التعليقات ظهر تحت البوست
لو مكنش ظهر كمل الخطوات التالية
4-فى مد ونتك اذهب الى Layout "تخطيط" ثم edit html"تحرير هتمل"
5-علم على المربع الصغير اللى اسمه Expand widget templates
6-ابحث عن

وبدلها بـــ

واحفظ :)

اعلان هام

2008-06-12T14:48:00.001+03:00

تم بحمد الله افتتاح
مدونة للقوالب
تضم تقريبا كل القوالب اللى عالويب .
ادخل وخد اللى انت عايزه

انتبة : قبل تركيب قالب جدبد
1- خذ نسخة احتياطية من القالب القديم download full template واحفظها على الهارد لديك تحسبا لاى ظروف
2- فيه نوعين من القوالب : الاول النوع الحديث " modern " او " xml " , والنوع الثانى القديم " الكلاسيك classic " .
فلو نظامك قديم وحاولت تركب قالب حديث هاتطلعلك رسالة خطأ , ولازم تحول نظامك الى النظام الحديث اولا ubgrade to modern mode ثم تشغيل القالب الحديث بعد كده .
ولو نظامك حديث وعاوز تركب قالب كلاسيك فلازم ترجع النظام الى النظام القديم اولا convert to classic . ولو انى لا افضل النظام القديم
3- كل القطع هاتعرض للحذف - القطع كالبروفايل وخلافه وليس البوستات - بعد تشغيل القالب الجديد .
روابط تهمك قبل البدء :
كيفية الحفاظ على القطع من الحذف من هــــنــا او من هـــنـــا
التحويل من الظام القديم للنظام الحديث من هـــنـــا
مركز مساعدة البلوجرز من هــــــــنــــــا

انشاء بوستات متمددة

2008-05-22T00:31:00.000+03:00

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

الخطوات :

1- خذ نسخة احتياطية من القالب تحسبا لاى ظروف download full template واحفظها على الهارد .

2- اذهب الى صندوق الاكواد dashboard > template > layout > editHtml ثم اضغط على المربع Expand Widget Templates الموجود مباشرة فوق صندوق الاكواد لكى تتمدد وتراها بالشكل الحقيقى .

3- ابحث عن </head> , ثم اضف قطعة الاكواد التالية "جافا سكريبت" فى السطر السابق لها
كود الجافا سكريبت من هـــــنــــا

4- ابحث فى القالب عن includable id='post' , ثم احدث التغيرات الموجوده فى هذه الصفحة الملونة باللون الاحمر . او قم بنسخ القطعة كاملة ولصقها فى المكان الملائم بالتحديد وبدقة , تعامل بحذر .
ملحوظة : فى هذا الملف ستجد جملتى Summary only... و Read More... يمكنك ان تبدلها بالرموز التى تناسبك , انا ابدلتهم بـ ( اخفاء ) و ( اقرأ المزيد ) .

5- اذهب الى خيارات المدونة setting ثم formatting "تهيئة" , ستجد صندوق نصى بعنوان "Post template" ( او مايقابله باللغة العربية لو كانت مدونتك معربة ) , انسخ فيه تلك القطعة الملونة باللون الاحمر كاااملة , ثم احفظ .

هنا بداية البوست
<span id="fullpost">
هنا بقية البوست
</span>

6- الان عند انشاء بوست جديد انتقل الى وضع الـ editHtml , ستجده بهذا الشكل

اضغط على الصورة لتراها بشكلها الحقيقى

اكتب انت بداية البوست فى المكان المحدد , وبقية البوست المختفى فى المكان المحدد ايضا .

7- اخبرنى بالنتيجة (:

8- ملحوظة مهمة جدا : يجب ان تعرف ان كود span يستخدم فى التحكم بلون وحجم الخط عند استعمالك لوضع compose , وحيث ان هذا الكود يحتاج الى غلق بهذا الشكل /span فستجد ان اكواد الغلق الخاصة بالخط ستتعارض مع كود " التمدد " الذى اضفناه فى الخطوة رقم 5 , لذلك يجب عليك ان تتعامل مع الوضع editHtml بحرفية اكثر , بحيث تكون اقسام البوست divisions داخل كودى span و /span . بهذا الشكل .

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