المصنع

#13 [Layout] الخاصية overflow، عندما يكون المحتوى أكبر من المساحة المحددة

2011-01-22T13:37:00.002+02:00

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

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

Property	Value	Description
overflow:	visible	جميع المحتويات مرئية وهي القيمة الإفتراضية.
overflow:	hidden	المحتويات الفائضة او الخارجة عن الإطار الحاوي لن تظهر.
overflow:	scroll	في حالة تجاوز المحتويات يظهر شريط التمرير.
overflow:	auto	وتعني تعميم الوصول أي في حال كانت المحتويات زائدة أظهر شريط التمرير.

حمل مثال للمعاينة...

كالعادة سنقوم بإختبار كل قيمة على حدة وكود المصدر html للمثال سيكون بالشكل التالي صندوق div بداخله صورة ونصوص:

<div>
  <img src="img.jpg" alt="" />
  محتوى...
</div>

القيمة visible

الوضع القياسي وفيه تظهر المحتويات كاملة حتى وإن فاضت وخرجت عن حدود الصندوق الحاوي لضيق المساحة، كما أن المحتويات الفائضة لا تؤثر على تدفق الصفحة الطبيعي وما فيها من عناصر تالية، تذكر أيضا أنك لست في حاجة لوضع القيمة visible كونها إفتراضية إلا في حالة الخصائص الموروثة.

div {
  border: 1px solid #999;
  background:#F5F1BA;
  padding:10px;
  height:200px;
  width:200px;

  overflow: visible;
}

ظهرت هنا جميع المحتويات وتخطت الصندوق كما لم تؤثر على العناصر التالية ولم تدفعها لنهاية المحتوى كما في الوضع الطبيعي دون تحديد ارتفاع، يمكن أن تظهر في متصفحات IE ومع الأعمدة التى عامت وتجانبت بالخاصية float أن الصور الكبيرة والتى لا تجد مساحة للتمدد في الإتجاه الأفقي -كما في المثال- أن تؤثر على التخطيط حيث يسقط العمود المجاور للأسفل.

القيمة hidden

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

div {
  border: 1px solid #999;
  background:#F5F1BA;
  padding:10px;
  height:200px;
  width:200px;

  overflow: hidden;
}

القيمة scroll

تخفي المحتويات الزائدة أيضا ولكن مع الإختلاف أنها توفر شريط تمرير بحيث يمكن الوصول الى المحتويات المخفية و رؤيتها، لكن المشكلة أن شريط التمرير في هذه الحاله يظهر دائما في المستوى الأفقي والرأسي سواء كانت هناك محتويات زائدة أو لا!

div {
  border: 1px solid #999;
  background:#F5F1BA;
  padding:10px;
  height:200px;
  width:200px;

  overflow: scroll;
}

لا توجد محتويات زائدة ومخفية ومع ذلك ظهرت أشرطة التمرير دون الحاجة إليها.

القيمة auto

تشبه هذه القيمة سابقتها إلا أنها تحل مشكلة ظهور أشرطة التمرير دائما، حيث تظهر عند الحاجة إليها فقط عندما يكون هناك محتويات زائدة تم إخفائها سواء في الإتجاه الأفقي أو الرأسي.

div {
  border: 1px solid #999;
  background:#F5F1BA;
  padding:10px;
  height:200px;
  width:200px;

  overflow: auto;
}

المحتويات الزائدة في الإتجاة الأفقي فقط ولهذا ظهر شريط التمرير واختفى في الإتجاه الاخر.

حمل مثال للمعاينة...

أخيراً يجب التذكير أن وجود أشرطة التمرير بكثرة مع محتويات موقعك والإعتماد عليها في التخطيط هو شيء غير مستحب، أولاً لأن هناك اختلاف واضح في طريقة عرضها بين المتصفحات، وثانياً لأنه لا يمكننا تخصيص شكل موحد لها عن طريق css كتلوينها مثلاً وغيرها، لذا من الأفضل استخدامها عند الضرورة و في أضيق الحدود.

سؤال مكرر حول مصادر التعلم وأفضل دروس CSS و HTML

2011-01-21T19:35:00.003+02:00

سؤال مكرر، دائما أجده يتردد بنفس المضمون، يسأل عن أفضل مصادر للتعلم، ويتبعها بـ أزاي أتعلم! كيف أصل لمستوى محترف، كيف أنسق مثل الموقع الفلاني الخ...

تذكير: مهتم ولست متخصص

لجميع من راسلوني والمشغولين بهذا السؤال أنا لست محترف ولكني مهتم وهناك فرق كبير!! وتعريف المدونة الظاهر للجميع كتبت فيه أنها ’’مدونة مهتمة‘‘ فأنا لم أدرس تنسيق المواقع أو CSS أو غيرها على أسس علمية بل علَّمت نفسي ومازلت أتعلم وأحمد الله على نعمته.

وأقول لمن يبحث عن مصارد التعلم.. html و css بحسب ما مررت به أنها ليست صعبة أبداً وكل مصارد التعلم الموجودة مفيدة و حقيقة لا أهتم كثيراً بالتحديد والقول أن هذا هو أفضل وأحسن وأكبر وأشجع مصدر للتعلم، رأيي أنها كلها مفيدة المهم أن تحدد هدفك وتستفيد من كل درس يقابلك.. لازال البعض متوقع أن هناك مصادر الكترونية أو كتب يمكنها أن تعلمك من الصفر للإحتراف! أبشرك أنه لا توجد هذه النوعيه فالدروس في المواقع والكتب يجب أن تعلم انها "أساسيات ومهارات أولية" أو "تطبيقات"، وبما أنك تريد التعلم من الصفر، فالصفر يبدأ أولاً بالقراءة في دروس "الأساسيات" والتعرف على الخصائص والأوسمة المختلفة ووظيفة كل منها فهذه البداية الصحيحة، تستطيع خلال ساعات قليلة الإلمام بكل أساسيات ومبادئ تلك التقنيات.

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

أولاً: الأساسيات والمهارات الأولية

تلك المرحلة السخيفة التى يعتقد الكثير بعدم أهميتها لأنه ليس في حاجه إليها كما لا يشعر بقيمتها ولا فائدتها! مرحلة أشبهها بأدوات العمل وتكون غالباً خالية من التطبيقات سوى من نماذج وأمثلة توضح لك عمل الخاصية فقط مع كلام نظري مكثف يشرح لك الفوائد وبعض أمثلة من مواقع تعتمد على بعض الخواص، دروس كثيرة تشرح لك ماذا يمكن أن تفعل بتلك الخاصية في css أو ماهي وظيفة هذا الوسم في html ستفهم جيداً ما وظيفة الوسم <p> وكيف تستخدمة وما هي الحالات التى تستخدم فيها وسم <table> الخ... كل ماستخرج به من تلك المرحلة معلومات وفيرة جداً وغير مرتبه.

فكرة: السؤال المصيري

ربما تتسائل بعد قراءة الكثير من الدروس هل فعلاً هكذا أكون تعلمت تصميم وإنشاء المواقع!؟ يعني هل إذا قرأت كل شيء عن HTML و CSS بالتفصيل ودون ترك أي وسم أو خاصية إلا تم شرحها سيفي هذا بالغرض؟

ثانياً: مرحلة التطبيقات ومقسمة إلى:

1- دروس كثيرة متفرقة لا تربطها أي صلة وهى الغالبية العظمى التى تشاهدها في المواقع عربية أو أجنبية ( كيف تصنع قائمة، كيف تضع خلفية صورة، صنع زر متحرك، كيف تصنع قائمة منسدلة، عمل حواف دائرية.... الخ ) كما ستجد أن هناك تكامل بين تقنيات مختلفة مثل jQuery وغيرها... وهنا لا يتم التطرق الى أساسيات ولن يشرح لك وظيفة كل خاصيه بالتفصيل على حدة على أساس أنك تعرفها مسبقاً، مرحلة هامة وفيها سيكون لديك مخزون كبير من الدروس المتفرقة ومن المهم أن تتابع أكبر قدر منها لتبني عليها أفكارك عند التطبيق على أحد مشاريعك.

2- دروس تخطيط المواقع وهى تشرح لك كيف تنبي الموقع وأين تضع القوائم وما شكل القائمة الجانبية ورأس الصفحات ونهايتها ... الخ، لتحصل بالنهاية على صفحة أو قالب كامل منسق psd + html + css مثال... وغالباً يتم الشرح على نموذج واحد فقط كي تأخذ فكرة عن تسلسل خطوات العمل.

3- وهي مرحلة تنظيمية ستجد فيها دروس عن أفضل تنسيق لملفات css وما هو الإختيار الأمثل لأسماء class. و id# لمزيد من الترتيب وبعض الخدع الخ... يطلق عليها البعض فن إستخدام html و css، وتأتي أيضا بمتابعة أعمال الغير من خلال المعارض.

فكرة: ها؟

الاجابة المختصرة عن سؤالك المصيري هي (لا) لكن الحل موجود لو علمت الطريقة المثلى للتعلم ليس مجرد قراءة الدروس فحسب، حيث أن معرفتك و وعيك بالأساسيات وماذا يفعل كل وسم على حدة لا يفي بالغرض أبداً من دون الإنتقال الى مهارة الإستخدام وذاك بالتطبيق المستمر، فتقنيات مثل HTML و CSS تحتاج الى وسيط وهو المتصفح تتم عن طريقة معالجة الأكواد لتعرض من خلاله، وبما أنك يومياً تزور عشرات المواقع فأعتبر هذا بمثابة تدريب للتعلم حيث أن بعرضك لمصدر الصفحة وقراءة الكود ستتمكن من فهم طريقة التنفيذ، فالطلاسم التى كنت تراها سابقاً من دون معرفة أصبحت الأن معلومة لديك، ومن هنا جاءت النصيحة بمتابعة المعارض وأعمال الغير، حيث تأتي هنا أيضا حاجتك للتعلم والسؤال عن المعلومة إن لم تتمكن من فهم الطريقة من مصدر الصفحة مباشرة.

الصور من فلكر 1, 2.

نص ثلاثي الأبعاد بواسطة CSS3

2011-01-12T20:10:00.001+02:00

أحد الخواص المميزة في CSS3 هي الظلال shadows يمكنك من خلالها صنع نصوص ثلاثية الأبعاد مميزة جداً وبدون الحاجة لإضافة أوسمة اضافية للمصدر HTML.

#4 العلامات الشرطية داخل قوالب Blogger ’تعدد المؤلفين‘

2011-01-07T18:14:00.002+02:00

ظهرت الأن الكثير من المدونات الجماعية التى يشترك فيها أكثر من كاتب، أو حتى من أصحاب المدونات الشخصية التى يسمح كاتبها بمشاركات القرّاء لا أن يرسلوا ما يكتبوه عن طريق البريد ولكن ككتاب فعليين بالمدونة، الأمر الذي أوجد مشكلة وهي كيفية التحكم في تنسيق تدوينات كل مؤلف على حدة أو لوضع عناصر محددة لا تظهر إلا مع مشاركاته هو، مثل ظهور إعلان مثلاً يعلن فيها عن مدونته الشخصية أو تمييز التدوينة بشكل عام...

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

<b:if cond='data:post.author == &quot;أحمد&quot;'>
أظهرني فقط في تدوينات الكاتب أحمد
</b:if>

في الشرط السابق سوف يظهر النص في التدوينات التى كتبت بواسطة المؤلف أحمد فقط دون غيرة، كما يمكنك استخدام else كما تعلمنا سابقاً هكذا:

<b:if cond='data:post.author == &quot;أحمد&quot;'>
أظهرني فقط في تدوينات الكاتب أحمد

<b:else/>

خلاف ذلك، أظهرني لجميع التدوينات الأخرى
</b:if>

ويمكننا الاستفادة من علامات الشرط للمؤلفين داخل القالب في الحالات التالية:

نبذه عن الكاتب أسفل كل تدوينه له

كانت قديما محصورة فقط لمدونات wordpress أما الأن فيمكنك تنفيذها بسهوله لمدونتك الجماعية وذلك عن طريق عمل صندوق <div> يحتوى على بيانات الكاتب مع صورة لتوضع أسفل الموضوع مباشرة مثل:

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

<div class='post-footer'>

وأسفلة مباشرة تضع علامات الشرط بالكود:

<b:if cond='data:post.author == &quot;AUTOR_1&quot;'>
أظهرني فقط مع الكاتب AUTOR_1
</b:if>

<b:if cond='data:post.author == &quot;AUTOR_2&quot;'>
أظهرني فقط مع الكاتب AUTOR_2
</b:if>

<b:if cond='data:post.author == &quot;AUTOR_3&quot;'>
أظهرني فقط مع الكاتب AUTOR_3
</b:if>

نبذة مختصرة عن الكاتب...أنسخ الضندوق وضعة بين علامة الشرط بعد تغيير البيانات، وخصائص css ضعها بالمكان المناسب بالقالب.

في هذه الحالة هناك 3 مؤلفين بالمدونة كل مؤلف سنضع له صندوق بيانات خاص، وفي حالة زيادة عدد المؤلفين نكرر علامة الشرط مع تغيير اسم الكاتب ومحتويات الصندوق.

إن لم تجد الكود المشار إليه ابحث بدلاً منه عن الكود التالي ثم ضع علامات الشرط أسفلة:

<data:post.body/>

تصميم مختلف لتدوينات كل كاتب على حدة

هذه حاله ربما أكثر تعقيداً من سابقتها، والفكرة فيها أننا نقوم بإحاطة كل الأكواد الخاصة بعرض التدوينة بعلامة الشرط المحدد فيها اسم الكاتب، بحيث يتم تنسيق التدوينات في أشكال مختلفة ولكل مؤلف على حدة، فالتدوينات داخل القالب يتم تنسيقها داخل includable خاص يحمل الإسم post وهذا الجزء يضم كل المحتويات التى تعرض داخل التدوينة ’’العنوان، الأوسمة، محتوى التدوينة، وصلة التعليق والتاريخ..الخ وتتخد الشكل التالي لبداية ونهاية الوسم في كل القوالب:

<b:includable id='post' var='post'>

post...

</b:includable>

أصحاب الخيال فقط والبارعون في التصميم هم من سيسعدوا بتلك الفكرة، فالأن يمكن لكل كاتب أن ينسق تدويناته على مزاجه سواء في صفحات العرض المنفردة item أو صفحات المحتوى index:

<b:includable id='post' var='post'>

  <b:if cond='data:post.author == &quot;AUTOR_1&quot;'>
    post...
  </b:if>

  <b:if cond='data:post.author == &quot;AUTOR_2&quot;'>
    post...
  </b:if>

  <b:if cond='data:post.author == &quot;AUTOR_3&quot;'>
    post...
  </b:if>

</b:includable>

ما سبق يوضح أن هناك 3 مؤلفين بالمدونة، كل واحد فيهم يمكن أن يكون له تصميم خاص

تمييز تعليق الكاتب عن بقية التعليقات

لن نحتاج هنا لتميز تعليق كل كاتب على حدة، بل سوف يكون هناك تحديد عام بعلامة شرط واحدة تميز بها الكاتب أي كان اسمه.

<b:loop values='data:post.comments' var='comment'>

comment..

</b:loop>

بالبحث عن الكود السابق وهو لوسم loop لبداية ونهاية التعليقات، سوف نحيط كل ما داخله بعلامة شرط لنميز بها تعليق الكاتب عن غيره:

<b:loop values='data:post.comments' var='comment'>

<b:if cond='data:comment.author == data:post.author'>
أظهرني فقط لتعليق الكاتب

<b:else/>

خلاف ذلك، أظهرني لجميع المعلقين
</b:if>

</b:loop>

لا تنسى مراجعة الدروس السابقة:

تعديل سحابة التسميات في قوالب Blogger

2011-01-04T22:04:00.006+02:00

صندوق التسميات ضمن أدوات blogger يوفر طريقتين للعرض ’قائمة وسحابة‘ وتعتمد السحابة في الظهور إلى عدد المرات التى استخدمت فيها نفس التسميه أو ما هو عدد التدوينات داخل كل تسميه، ومنها تلاحظ في حالة تفعليها أن هناك أحجام مختلفة لكل تسميه فالتسميات التى تحتوي على أكبر عدد من التدوينات ظهرت بخط كبير والعكس...

وغالبا نحن لا نستطيع التحكم في شكل تلك التسميات كتغيير حجمها مثلاً أو تحديد لون لكل مجموعة تسميات وذلك لعدم وجود خيارات لذلك عند تهئيه الأداه من عناصر الصفحة، لكن هناك طريقة للتخصيص لو علمت ما هي محددات CSS التى تتحكم في ذلك الصندوق:

.cloud-label-widget-content {
  text-align: center;
}
.cloud-label-widget-content a {
  font-family: Arial, sans-serif;
  font-weight: bold;
  white-space: nowrap;
}
.cloud-label-widget-content span {
  padding: 0 5px 0 5px;
}
.label-size-1 a { font-size:14px; color:#2F2F2F; } 
.label-size-2 a { font-size:16px; color:#11AA23; } 
.label-size-3 a { font-size:18px; color:#588EFF; } 
.label-size-4 a { font-size:22px; color:#DA484B; } 
.label-size-5 a { font-size:26px; color:#3B5998; }

.cloud-label-widget-content {

وهو محدد الصندوق الذي يتضمن روابط التسميات، وفيه قمت بالتوسيط ولك حرية إعطائه أي خصائص أخرى كخلفية مثلاً أو غيرها.

.cloud-label-widget-content a {

روابط التسميات وفيها غيرت نوع الخط وجعلته سميك أما الخاصية white-space بالقيمة nowrap وضعتها لتحكم أفضل في المساحات البيضاء فأنا لا أريد عندما يكون هناك تسميات طويلة أن تظهر في سطرين بسبب ضيق المساحة وهو الأمر الظاهر في جميع المدونات التى تعرض السحابة على وضعها الإفتراضي مما يشوه شكل التسميات وتنسيقها، فهذه الخاصية تجعل كل تسميه مهما كانت طويلة تظهر كاملة في سطر ولا تنكسر حتى وإن أدى ذلك الى خروجها عن مساحة صندوق التسميات.

.cloud-label-widget-content span {

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

.label-size

التسميات تظهر في 5 أحجام مختلفة فكما قلنا أنه إذا زادت عدد التدوينات داخل نفس التسميه تظهر بخط كبير، تبدأ من 1 وهو الأصغر ويطبق على التسميات التى تحتوي على أقل عدد من التدوينات وينتهي بالرقم 5 وهو أكبرهم ويظهر للتسميات التى تحتوى على أكبر عدد، وقد ميزت كل مجموعة بلون مختلف مع تعديل أحجام الخطوط.

وضع الخصائص بالقالب:

إن لم تكن التسميات لديك ظاهرة في شكل سحابة أعد تهيئتها مرة أخرى في لوحة التحكم من عناصر الصفحة واجعلها تظهر كسحابة وفي خانة الفرز تأكد أن الترتيب أبجدي وإحذف العلامة بجوار ’عرض عدد المشاركات لكل تصنيف‘ - بعد ذلك إذهب الى تصميم ومنها الى تحرير HTML ثم قم بالبحث عن الكود التالي وضع خصائص CSS أعلاه مباشرة:

]]></b:skin>

إن لم تجد نتيجة بعد وضعك لخصائص CSS أعد حذفها ثم ضعها مرة أخرى ولكن في أسفل الكود السابق مباشرة وليس أعلاة ولكن هذه المرة تكون بين وسم <style> هكذا:

<style type="text/css">

css properties...

</style>

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

لمزيد من التخصيص:

يمكننا التحكم في عرض عدد التدوينات داخل كل تسميه، بحيث يظهر العدد عند التأشير على الأسم كما بالصورة، وللتطبيق تأكد عند تهيئة الأداه من عناصر الصفحة أنك محدد على ’عرض عدد المشاركات لكل تصنيف‘ ثم توجه وابحث في القالب على الكود -ولا أضمن وجودة بنفس الشكل في قوالبكم المسالة دي لم تعد مضمونة اليومين دول!

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

ثم استبدله بالكود التالي:

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.count + &quot; تدوينة&quot;'><data:label.name/></a>

#3 العلامات الشرطية داخل قوالب Blogger ’التعامل مع التسميات‘

2011-01-03T16:50:00.001+02:00

بعد معرفتك لأنواع الصفحات التى تشكل هيكل المدونة وكيفية استهداف كل منها، موعدنا مع التسميات labels أو الأقسام أو التصنيفات وهي وظيقة داخل blogger مهمة جداً لتسهيل القراءة والبحث عن المعلومة تهدف الى تنظيم التدوينات والمقالات داخل مدونتك في مجموعات كل مجموعة تندرج تحت فئه معينه، كما أنها هامة لربط المحتويات ببعض مما يشجع القرّاء على قراءة المزيد من التدوينات تحت تصنيفات أخرى...

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

1 : الصندوق Label لعرض التسميات بمربعات القائمة الجانبية widget

وهي الأداة الموجودة بلوحة التحكم في عناصر الصفحة، وتظهر جميع التسميات التى أضيفت بأكثر من شكل ’قائمة وسحابه أوسمة‘ - وبعلامة الشرط يمكنك أن تُظهر محتويات أعلى هذا الصندوق أو أسفله أو تتحكم في بقية عناصر الصفحة عن طريق css والشرط كالتالي:

<b:if cond='data:blog.url == data:label.url'>
أظهرني فقط في الصفحات التى تظهر عند الضغط على اي تسميه
</b:if>

رغم أن الشرط السابق يدخل ضمن صفحات الروابط كما تعلمنا سابقاً إلا أنني لم أدرجه معهم لأنه يكون فعال فقط في حاله وضعه ضمن الصندوق Label ويظهر مفعوله في الصفحات التى تعرض النتائج بعد الضغط على أي تسميه.

تذكير: max-results

في حاله تحديدك لعدد التدوينات التى تظهر بالتصنيفات بإضافة الكود max-results والذى يوضع في هاك تعدد الصفحات للروابط فلن تشاهد أي تأثير لعلامة الشرط.

2: داخل التدوينات التى تحمل تسميه معينه

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

<b:if cond='data:label.name == &quot;أحمد&quot;'>
أظهرني فقط في التدوينات التى تحمل التسميه أحمد
</b:if>

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

فكر مثلاً في أن تعرض اعلانات أدسنس لنوع معين من التدوينات لها شعبيه كبيرة، أو حتى لتجنب المخالفة بعدم عرض اعلاناتك في التدوينات التى تخالف سياسه استخدام الخدمة.

الحلقات التكرارية loops

لتطبيق أي من الشرطين السابقين يلزم وضعهم داخل حلقة loops وهي موجودة في كل لغات البرمجة تمكني من تكرار كود معين لعدد من المرات، وتجدها في القوالب بالتعليقات comments والتدوينات post و موجودة أيضا في غالبية مربعات القائمة الجانبية widget ومن بينها الصندوق Label.

لتفعيل الشرط داخل القائمة الجانبية يوضع داخل loop بهذا الشكل:

<b:loop values='data:labels' var='label'>

  <b:if cond='data:blog.url == data:label.url'>
  أظهرني فقط في الصفحات التى تظهر عند الضغط على اي تسميه
  </b:if>

</b:loop>

وداخل التدوينات يوضع في loop آخر بهذا الشكل:

<b:loop values='data:post.labels' var='label'>

  <b:if cond='data:label.name == &quot;أحمد&quot;'>
  أظهرني فقط في التدوينات التى تحمل التسميه أحمد
  </b:if>

</b:loop>

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

#2 العلامات الشرطية داخل قوالب Blogger ’’أنواع الصفحات واستهداف كل منها‘‘

2010-12-31T16:18:00.002+02:00

بعد أن علمت كيف تستخدم الشرط if وما هي التراكيب الشرطية، من المهم أيضا أو الأكثر أهمية أن تعرف كيف تحدد الشروط وما هي الأنواع المختلفة التى تستخدم داخل القالب، فليس كل ما تفكر فيه يمكن أن تضعة في علامة الشرط، ونبدأ التعريف بالصفحات التى تظهر في مدونتك وهما 6 أنواع مختلفة يتم تحديدها عن طريق الإسم وهما...

النوع 1 - صفحات فردية وهي الخاصة بعرض التدوينات و التعليقات.
النوع 2 - صفحات المحتوى وتظهر عند التنقل من خلال المشاركات الأقدم والأحدث.
النوع 3 - صفحات الأرشيف.
النوع 4 - صفحات ثابتة.
النوع 5 - صفحات متغيرة و مُحددة مسبقاً.
النوع 6 - صفحة المدونة الرئيسية.

وبشكل أكثر تفصيلاً نشرح كل نوع كالتالي:

نوع 1 : صفحات فردية لعرض التدوينة والتعليقات item

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
أظهرني داخل صفحة التدوينة فقط
</b:if>

نوع 2 : صفحات المحتوى وتعرض جميع التدوينات index

هذا النوع هو الصفحات التى تشاهدها عند التنقل من الصفحة الرئيسية بواسطة وصلات ’رسائل أقدم و رسائل أحدث‘ أو في حالة إضافة تعدد الصفحات، كما تظهر تلك الصفحات أيضا عند عرض نتائج البحث مثال:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
أظهرني داخل صفحات عرض المحتوى فقط
</b:if>

نوع 3 : صفحات عرض الأرشيف archive

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

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
أظهرني داخل صفحات الأرشيف فقط
</b:if>

نوع 4 : الصفحات الثابتة static_page

وهي من أحدث الوظائف داخل blogger حيث تم إضافتها مؤخراً، حيث يتم إنشاءها من لوحة التحكم، ومن المفيد معرفة هذا الانوع حيث يمكننا تخصيص تلك الصفحات بشكل مختلف أو أظهار محتويات خاصة بها مثال:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
أظهرني داخل الصفحات الثابته فقط
</b:if>

نوع 5 : الصفحة الرئيسية data:blog.homepageUrl

هذا النوع يختلف عمّا سبقه حيث أنه لا يندرج تحت الصفحات المخصصة والمعروفة pageType ولكن يمكن أن نطلق عليه مسمى صفحات الروابط لأنه يتغير مكان تطبيقه حسب الرابط الموجود داخله، وهو نوع مثير جداً للإهتمام وقد ذكرني هذا بتدوينة قديمة ’لسردال‘ والذى يتحدث فيها عن ما يسمي بBlogazine! فهل يمكن أن يجرب أحدكم ويصنع تصميم مميز لكل تدوينة!

هذه الصفحة جعلتها مُحددة لرئيسية المدونة فقط حيث data:blog.homepageUrl يترجم داخل القالب ليعرض عنوان مدونتك الرئيسي مثال:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
أظهرني داخل صفحة المدونة الرئيسية فقط
</b:if>

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

نوع 6 : الصفحات المتغيرة حسب الرابط بعلامة الشرط

هو نفسه النوع السابق ولكن يحدد به الصفحة التي تريد اظهار محتوى أو تنفيذ مثلاً خصائص css معينة داخلها، ومنها يمكن توظيفها كي تصنع تصميم مميز لكل تدوينة على حدة مثال:

<b:if cond='data:blog.url == &quot;URL.html&quot;'>
أظهرني في الصفحة المحددة فقط
</b:if>

انتهينا من عرض جميع أنواع الصفحات داخل القالب، ومن الملاحظ أن جميع علامات الشرط أخذت الوضع أو القيمة يساوي بالرمز "==" وهي تعني كما تعلمنا في الدرس السابق تطبيق ما يوجد داخل علامة الشرط، لكن في بعض الأحيان لا أريد تطبيق علامة الشرط هكذا إنما أريد تطبيقها في حاله عكسيه أي لا تظهر ما يوجد داخل علامة الشرط!

"==" الرمز يساوي يعني التحقق وتطبيق ما داخله علامة الشرط.
"!=" علامة التعجب تعني الإختلاف وعدم تطبيق ما داخل علامة الشرط، ويتضح أكثر من خلال المثال التالي:

<b:if cond='data:blog.url != data:blog.homepageUrl'>
أظهرني داخل جميع الصفحات ما عدا صفحة المدونة الرئيسية
</b:if>

سوف يظهر ما داخل علامة الشرط في جميع الصفحات فيما عدا الصفحة الرئيسية، والجدير بالذكر أن عكس أداة الشرط غير قاصر تطبيقة على الصفحات فقط بل هي قاعدة عامة يمكن أن تطبق على كل الأنواع كما سنعرض لاحقاً

في الدرس القادم بإذن الله نعرض علامات الشرط الخاصة بالتسميات labels

#1 العلامات الشرطية داخل قوالب Blogger

2010-12-31T10:17:00.001+02:00

من أدوات التخصيص الهامة جداً في blogger علامات الشرط Conditional Tags فهي لا غنى عنها عند تعاملك مع القوالب حيث بها تستطيع تطوير طريقة عرض التدوينات وإضافة ميزات جديدة مثل التحكم بظهور وإخفاء المحتويات في صفحات معينة أو وفقاً لتصنيف معين، فأنت لست بحاجه لمعرفة كل شيء عن HTML حتى تصمم قوالب إحترافية ولكن فقط بعض المفاهيم الهامة التى تمكنك من التعامل مع القوالب بشكل سليم.

الشرط b:if>

الشرح سيكون مفهوم جداً لمن لديه خبرة سابقة بأي من لغات البرمجة حيث أن علامات الشرط عبارة عن تعبير منطقي يحدد ناتجه تنفيذ أمر أو عدة أوامر أو عدم تنفيذها، وتستحدم في الشرط الكلمة المشهورة if داخل وسم blogger الذى يبدأ ب<b: > والصورة العامة له:

<b:if ......... >

</b:if>

يكتب الشرط بواسطة الأمر if و يتبع بالشرط ثم يلي ذلك ما يتم تنفيذه إذا تحقق الشرط ويغلق مرة أخرى، كما توجد له عدة صيغ كما سنعرف لاحقاً

<b:if cond='condition == X'>
أظهرني عندما يتحقق الشرط ويساوي القيمة أكس
</b:if>

في الكود السابق إذا كان الشرط يساوي X فأنه يصبح صحيحاً وسينفذ ما بداخله حيث يظهر في هذه الحاله النص المكتوب، أما في حالة عدم تحقق الشرط فإنه سيتجاهل هذا الأمر ويتابع استعراض القالب.

<b:else/>

الصيغة الاخرى لعلامات الشرط تكون بإضافة else وهي تستخدم عندما يكون هناك احتمال آخر مطلوب تنفيذه في حاله عدم تحقيق الشرط الأول وتكون كالتالي:

<b:if cond='condition == X'>
أظهرني عندما يتحقق الشرط أكس

<b:else/>

خلاف ذلك، أظهرني أنا
</b:if>

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

<b:if cond='condition == X'>

    <b:if cond='condition == Y'>
    أظهرني في حال تحقق الشرط واي
    </b:if>
  
<b:else/>

أظهرني في حال عدم تحقق الشرط أكس
</b:if>

ويعني ذلك في حال تحقق الشرط الأول تحقق من الشرط الثاني فإن كان صحيحاً نفذ ما بداخله وإلا تجاهله ونفذ ما بعد else.

في الدرس القادم بإذن الله نبدأ بإستعراض الأنواع المختلفة للصفحات داخل القالب وطريقة استهدافها بعلامة الشرط.

العلامات الشرطية داخل Blogger

2010-12-30T18:07:00.001+02:00

استجابة لبعض الطلبات بعد موضوع التدوين المصغر، بإذن الله سأبدأ سلسلة دروس جديدة عن علامات الشرط داخل بلوجر من 4 أو 5 دروس متتالية خاصة وأنه لا توجد مدونة عربية تحدثت بالتفصيل عنها وكيف تستغلها في تصميم قوالب إحترافية، أول درس بعد قليل.

#12 [Layout التخطيط] الخاصية float، هل جرّبت العوم داخل صفحات الويب

2010-12-28T21:39:00.003+02:00

في درس سابق من دروس التخطيط ذكرت أن Position من أهم الخصائص في css بل وأهمها على الإطلاق، لكني في هذا الدرس أقول لكم أن هناك خصائص اخري مهمه :) فحدينا اليوم عن خاصية مثيرة للجدل! فهناك من يطالب بالإستغناء عنها كلياً، وهناك من ينصح بالإبتعاد عنها تماماً عند تخطيط الموقع Layout أو استخدمها في أضيق الحدود لأنها السبب الأول في عدم توافق المواقع على المتصفحات المختلفة بسبب ما تحدثه من فوضى! ولكن مع ذلك لا يكاد يخلو أي موقع منها فهي موجودة في القوائم والصناديق الجانبية وداخل الصور والأيقونات المختلفة…الخ، بل ويمكن أن تشاهدها أيضا عند تصفحك الصُحف الورقية! لذا أنصحكم قبل القراءة بأخذ نَفَس طويل والمحترفون يمتنعون...

تذكير: float تعني الطفو أو التعويم!

وهو تحويل أو إعادة تعريف العناصر الثابتة وإزاحتها لجهة اليمن أو اليسار خروجاً عن تدفق الصفحة الطبيعي، وتبعاً لذلك يُحدد الجانب الذي سوف تتدفق ناحيته العناصر الأخرى حول هذا العنصر -العائم-.

أممممم! هذا المفهوم هو مشابه تماماً لما تراه في صفحات المجلات حيث تجد الصور والرسومات وقد إنحازت لجهه معينه ومن حولها تنساب النصوص في الجهه الأخرى، وهو ما يطلق عليه ’التفاف النص‘ وقد شرحت سابقاً أحد التطبيقات حول هذا الأمر وكيف تجعل النصوص تلتف حول الصور الدائرية في شكل بديع جداً يطابق ما تراه في المجلات ولكن على صفحات الويب، تصور مثلاً مع الفارق أن أمامك مغناطيس وضع وسط مجموعة من برداة الحديد فكلما ذهبت بجسم المغناطيس لجهه معينة إنسابت من حولة برادة الحديد، أي أن التعويم يمكن أن نصفه بإنه لتحديد الجانب الذي سوف تتدفق ناحيتة المحتويات.. كما أن العنصر العائم نفسه محكوم بالعنصر الأب الحاوي له هو فقط ولا يخرج عنه.

يمكننا استخدام float على كل أوسمة html فقرات <p>، صناديق <div>، قوائم <ul>,<li>، صور </img> أي شيء فيما عدا الوسم الجذر <html>، وطريقة التطبيق واحدة وتكتب على هذا النحو مع وجود 3 قيم للخاصية كما موضح بالجدول:

#content {
 float: right;
}

Property	Value	Description
float:	right	تعويم العناصر إلى اليمين مع تدفق المحتويات جهة اليسار، يسار العنصر.
float:	left	تعويم العناصر إلى اليسار مع تدفق المحتويات جهة اليمين، يمين العنصر.
float:	none	إزالة أي تعويم للعناصر وهو الوضع الإفتراضي، وعادة يستخدم في حالة تجاوز أي تعويم موروث يطبق على عدة عناصر.

نبدأ العوم أولاً مع الصور

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

<!-- CSS -->
#content {
 border: 4px solid #00F;
 background: #FFF;
 width:400px;
}
#content img {
 border: 4px solid #0F0;
}

<!-- HTML -->
<div id="content">

<img src="img.gif" alt="" />
<p>محتويات، نصوص، نصوص، نصوص....</p>

</div>

في الكود السابق html نجد صندوق بإسم content إطار للمحتويات و في داخله صورة و فقرة لإختبار خاصية التعويم، وفي css وضعنا بعض الخصائص للتوضح كخلفية للصندوق مع حدود وتحديد عرض كما تم وضع حدود للصورة، ثم بعد وضع محتوى تجريبي نشاهد النتيجة داخل المتصفح:

تعلمنا سابقأ أن الوسوم التى تنتمي الى عناصر الكتلة Block Elements تظهر في سطر منفصل وبما أن الوسم <p> واحد منهم فظهر منفرداً وأخذ حيز العرض الكامل وأعلاة الصورة حسب تدفق الصفحة رغم أنها لا تنتمي الى نفس الفئه، والإثنين لم يخرجوا عن الصندوق الحاوي لهم بخلفية بيضاء وعرض مُحدد.

الأن سنضع float على الصورة ثم نرى النتيجه:

<!-- CSS -->
#content {
 border: 4px solid #00F;
 background: #FFF;
 width:400px;
}
#content img {
 border: 4px solid #0F0;
 float: right;
}

<!-- HTML -->
<div id="content">

<img src="img.gif" alt="" />
<p>محتويات، نصوص، نصوص، نصوص....</p>

</div>

أها الأن تغير التدفق الطبيعي للصفحة وظهرت الصورة في جهة اليمين وكأنها جزء من الفقرة، في حين أن النص قفز للأعلى وبطبيعة الحال لا توجد أي مسافات فاصلة بينهم فالمساحة الفارغة أسفل الصورة هي طبيعية نتيجة للفرغات بين الأسطر حيث أنها تتغير على حسب حجم الخط ونوعة و هل تستخدم خاصية التباعد بين الأسطر line-height أو لا.

نفس الحال بعد عكس إتجاه التعويم لجهة اليسار ، حيث أن اتجاه العنصر العائم لا يتأثر باتجاه الصفحة و العنصر العائم نفسه -وبما أنه عائم- فهو يطفو ويظهر أعلى جميع العناصر من بعده! يعنى مثلاً في حالة وضعك حدود للفقرة <p> أو خلفية فإن الصورة سوف تظهر أعلى تلك التأثيرات مثال:

<!-- CSS -->
#content {
 border: 4px solid #00F;
 background: #FFF;
 width:400px;
}
#content img {
 border: 4px solid #0F0;
 float: right;
}
#content p {
 border: 4px solid #F00;
 background:#EEE;
}

<!-- HTML -->
<div id="content">

<img src="img.gif" alt="" />
<p>محتويات، نصوص، نصوص، نصوص....</p>

</div>

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

تذكير: العناصر العائمة تطفو على مستوى الكتلة!

نستخلص من هذا وهو ما سيشترك لاحقاً في جميع الحالات القادمة أن العناصر العائمة تطفو على مستوى الكتلة، لتسلك سلوك العناصر المضمنة أو السرد Inline elements وما يليه من محتويات سيتدفق حوله، ومن هنا جاءت التسميه.

مشاكل تعويم الصور

أكثر المشاكل شيوعاً هي التى تتعلق بالمحتويات القليلة والتى بدورها تقلص العنصر الحاوي لها، فكما ذكرنا قبل قليل أن العناصر العائمة تطفو على مستوى الكتله إذن فصندوق المحتويات content يتجاهل العنصر العائم وبالتالي يظهر أن هناك حشو ناقص لعدم وجود محتويات تملأ ذلك الفراغ كما يزداد الأمر سوء لو تكرر صندوق المحتويات حيث تتداخل الصور!

تعويم الكتل والعناصر

وأقصد هنا تخطيط الموقع Layout حيث يتم توزيع عمود المحتويات والقوائم الجانبية ولنأخذ مثال على مُخطط موقع يشمل صندوقين <div> فقط واحد للمحتويات والآخر لقائمة جانبية كما بالكود التالي:

<!-- CSS -->
#content {float:right; width:220px;  background: #FC9;}
#sidebar {float:left;  width:100px;  background: #F33;}

<!-- HTML -->
<div id="content"> </div>
<div id="sidebar"> </div>

وهنا أضفت float فقط على كل من content و sidebar ليظهروا بعد ذلك على المتصفح وقد انحازت كل منها في جهة حسب قيمة float وبس! هذا كل ما يمكن أن يقال في تعويم الصناديق.

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

ليس الأمر بهذا البساطة كما ظهر في المثال السابق فمشاكل التعويم تظهر كلما أضفت عناصر أخرى الى التخطيط فالموقع يحتوي على نهاية footer ورأس header وربما عمود ثالث ورابع بالإضافة الى الصندوق الحاوي لكل هذا وهنا تظهر المشاكل مع المثال التالي وأولها بعد إضافة إطار بالمعرّف main مع بعض الخصائص مثل خلفيه و حدود حينها تكتشف المشكلة:

<!-- CSS -->
#content {float:right;  width:220px;  background: #FC9;}
#sidebar {float:left;   width:100px;  background: #F33;}

#main {
 border: 4px solid #0C0; 
 background:#FFF;  
 padding:10px;
}


<!-- HTML -->
<div id="main">

<div id="content"> </div>
<div id="sidebar"> </div>

</div>

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

كما أن هناك مشكلة أخرى وهي عند إضافة أي عنصر أسفل العناصر التى تم تعويمها مثل نهاية الصفحة footer أو أي شيء آخر:

<!-- CSS -->
#content {float:right;  width:220px;  background: #FC9;}
#sidebar {float:left;   width:100px;  background: #F33;}

#main {
 border: 4px solid #0C0; 
 background:#FFF;  
 padding:10px;
}

#footer { background: #222; padding: 2px; }

<!-- HTML -->
<div id="main">

<div id="content"> </div>
<div id="sidebar"> </div>

</div>

<div id="footer">footer</div>

هنا المشكلة ظهرت مركبة فالصندوق تجاهل التعويم وارتفع الى منطقة الحشو الفارغة، أما النص فقد انساب الى أقرب مساحة فارغة حول العنصر العائم، وفي حاله النصوص الطويلة سوف يستمر الصندوق في الهبوط وفقاً لتدفق الصفحة الطبيعي

تعويم القوائم وأشكالها المختلفة

لا جديد عما سبق ولكن مايهمني في تعويم القوائم هو الإتجاه فعند تعويم البنود li لليمين أو اليسار تبدأ الإزاحة من أول بند الى أسفل:

<!-- CSS -->
li       { float:right; background: #F33; }
li.first { background: #C33; }
  
<!-- HTML -->
<ul>
    <li class="first">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

أول بند هو الأول أيضا جهة اليمين، كما يمكنك أن تجعل بعض البنود تخرج عن ذلك الترتيب بإزحتها في الإتجاه العكسي:

<!-- CSS -->
li       { float:right; background: #F33; }
li.first { background: #C33; float:left; }

li.fourth { float:left; }
  
<!-- HTML -->
<ul>
    <li class="first">1</li>
    <li>2</li>
    <li>3</li>
    <li class="fourth">4</li>
    <li>5</li>
</ul>

الخاصية clear

لا لم أخرج عن موضوع الدرس حول الخاصية float ولكن الحديث عن التعويم لا يخلو من ذكر خاصية هامة جداً لا يمكن أغفالها وهي الخاصية clear يعني تنظيف أو توضيح ووظيفتها إزالة أي تعويم أو بمعنى أخر التحكم في وضع العناصر اللاحقة لأي عنصر تم تعويمه، حيث أنه في الوضع الطبيعي تتحرك العناصر اللاحقة حول العنصر العائم أو لأقرب مساحة فارغة كما ذكرنا، لكن حينها نضع clear ستظهر تلك العناصر مباشرة أسفل العنصر العائم وتشمل الخاصية على 4 قيم مختلفة:

Property	Value	Description
clear:	right	أزله التعويم جهة اليمن.
clear:	left	أزله التعويم جهة اليسار.
clear:	both	أزله التعويم في الإتجاهين.
clear:	none	لا شيء وهو الوضع الأفتراضي، وعداة يستخدم في أزاله الخصائص الموروثة.

حلول مشاكل التعويم

طرق الحل المختلفة الهدف منها هو جعل العناصر اللاحقة للعنصر العائم تتخذ سلوك عناصر الكتله ولا تلتلف حوله كما في حاله إضافة footer، أو جعل الصناديق الحاويةالتى تتضمن عناصر تم تعويمها أن لا تتجاهل ذلك التعويم ويتم استيعابه، وتنقسم إلى:

الحل الأول إضافة وسم <div> فارغ أسفل العناصر العائمة وهو حل قديم لكن مازال مستخدم بكثرة، حيث يفصل ذلك الوسم بين العناصر العائمة وما تحته:

<div id="main">

<div id="content"> </div>
<div id="sidebar"> </div>

<div style="clear: both;"></div>

</div>

الحل الثاني: إضافة Pseudo-elements :after وهي العناصر المزيفة أو الإفتراضية وتستخدم لإدراج محتويات بعد انتهاء محتوى العنصر! وهذا يعني عدم الحاجه الى إضافة أوسمة html زائدة كما في الحاله الأولى، وسوف نطبقها على فئه إضافية خاصة ولتكن بإسم ’clearfix‘ على هذا النحو:

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

اقرأ المزيد عن تلك الطريقة كما أن المتصفحات القديمة يلزمها إضافة خصائص أخرى لتعمل بشكل صحيح:

.clearfix {
  display:inline-block;
}
* html .clearfix { 
  display:block;
  zoom:1;
}

المحتوى الذى تم إدراجه صغير جداً يكاد لا يرى كما تم إضافة خصائص أخرى الغرض منها إخفائه تماماً وطريقة العمل هي بإضافة تلك الفئة المسماه clearfix الى أي صندوق ’وعاء للمحتويات‘ يوجد بداخله عناصر تم تعويمها هكذا:

<div id="main" class="clearfix">

<div id="content"> </div>
<div id="sidebar"> </div>

</div>

الحل الثالث وهو التجاوز وذلك بالإعتماد على الخاصية Overflow بالقيمة outo أو hidden وفيها يتوسع وعاء المحتويات كي يشمل جميع العناصر الطافية داخله، وتضاف تلك الخاصية ضمن خصائص صندوق ’وعاء للمحتويات‘ الذى يوجد بداخله عناصر تم تعويمها مثلاً:

#main {
 border: 4px solid #0C0; 
 background:#FFF;  
 padding:10px;
 overflow:hidden;
}

ويعتبر من أسهل الحلول ومناسب في أغلب الحالات حيث أنه لا يتطلب إضافة أوسمة إضافيه كما انه صالح لجميع المتصفحات، المشكلة الوحيد تظهر في حالة وجود محتويات خارجة عن حدود صندوق المحتويات كصورة كبيرة مثلاً تخطت العرض المحدد ففي هذه الحاله سوف تختفي أو يظهر شريط تمرير يشوه التصميم.

الحل الرابع وهو تعويم صندوق المحتويات نفسه ولكن هذه الطريقة غير مناسبه إلا في حالات معينه ولا تناسب كافة التصمميات، حيث أنه بإزاحتك لصندوق المحتويات سوف يؤثر بدورة على العناصر اللاحقه له.

أتمنى أن يكون الشرح قد أستوفي كل ما يتعلق بالخاصية float وعرض للمشاكل والحلول المتعلقة بها، وأي أسئله أو استفسارات حولها حاضرين.

للتحميل أول قالب من المصنع لمدونات Blogger

2010-05-03T00:39:00.008+03:00

neo قالب كلاسيكي مرَّتب وهادئ مكون من عمودين والقائمة الجانبية في جهة اليسار، مناسب للمدونات الشخصية والإخبارية حيث تم فصل وتقسيم التدوينات والقائمة الجانبية widget في شكل مربعات مستقلة على خلفية موحدة بلون رمادي، كما تم إبراز التصنيفات وإظهارها أعلى كل تدوينة بالإضافة للتدوينات المصغرة...

معاينة تحميل

أهم المميزات:

قائمة علوية منسدلة مع حقل بحث، ,وأيقونات لخدمات متنوعة.
تحسين شكل التعليقات مع تمييز تعليق كاتب التدوينة.
التدوينات المصغرة، وصندوق علوي خاص بالتنبيهات.
تنسيق مربعات القائمة الجانبية widget حسب النوع!

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

وصف المدونة في محركات البحث:

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

<meta content='Add here description' name='Description' />

أيقونة المدونة favicon:

قم بالبحث عن الكود التالي واستبدل favicon.ico بمسار الأيقونة، ويفضل أن يكون بنفس الإسم والإمتداد (أيقونة) أرفعها على حسابك في sites.google.

<link href='favicon.ico' rel='shortcut icon' type='image/vnd.microsoft.icon' />
<link href='favicon.ico' rel='icon' type='image/x-icon' />

القائمة العلوية في رأس الصفحة:

لم أعتمد على widget خاصة بالروبط أو الصفحات تعتمد عليه في التعديل، فهي لا تقبل القوالب المنسدلة المتداخله، لذا سيكون التعديل من خلال القالب html وذلك بالبحث عن الكود بين العلامتين:

<!-- Nav تعديل القائمة برأس الصفحة -->
...
<!-- / Nav تعديل القائمة برأس الصفحة -->

وما يوجد بين العلامتين هي القائمة موضع التعديل ومقسمة على عدة مستويات للقائمة المنسدلة ومستوى رئيسي تظهر به الوصلات وأيقونات الخدمات -الخلاصات وتويتر-

التنبيهات أسفل رأس الصفحة

في القالب يوجد مكان أسفل الهيدر لك حرية استخدامه في التنبيهات أول للإعلان، وهو موجود داخل مربع من نوع HTML للتعديل عليه من عناصر الصفحة بلوحة التحكم، لكن بشرط أن يكون داخل div مخصص حتى يتم التحكم في ظهورة وإخفاءة.

يتم كتابة التنبية بهذا الشكل:

<div class="top-inner">
أكتب هنا...
</div>

لكي تظهر الإيقونة بجانب النص، نضع class ليظهر الكود كالتالي:

<div class="top-inner icon">
أكتب هنا...
</div>

أما إن أردت إخفائة تماماً، أضف class آخر كالتالي:

<div class="top-inner icon hide">
أكتب هنا...
</div>

آخر التعليقات:

وهي إضافة منتشرة لكن ما قمت به هو إعادة تنسيق وإبراز إسم المعلق بشكل واضح، والكود موجود داخل مربع widget من نوع HTML ويعتمد في العرض على جافا سكريبت في جزئين، جزء مضاف بالفعل في رأس القالب داخل الوسم <head> والجزء الأخر هو ما يوضع داخل صندوق العرض من لوحة التحكم -عناصر الصفحة- بهذا الشكل:

<div class='recent-comments'>
<script type="text/javascript">
var a_rc=5;
var m_rc=false;
var n_rc=false;
var o_rc=70; 
</script>
<ul><script src="http://BLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script></ul>
<div style='clear: both;'/>
</div>

قم بتغيير عنوان المدونة BLOG.blogspot.com الى عنوان مدونتك ثم أنسخ الكود داخل صندوق آخر التعليقات، حيث أن الرقم 5 هو لعدد التعليقات الظاهرة و 70 عدد الحروف -سبعون حرف مناسب-

نشر تدوينات مصغرة:

طريقة كتابة تدوينة مصغرة لن تختلف عن كتابة تدوينة عادية سوي أنه يجب أن تكون داخل تصنيف خاص Label - وهو الحقل أسفل مكان كتابة التدوينة بلوحة التحكم بإسم التسميات! - والتصنيف الخاص بالتدوين المصغر هو minipost يوضع هو فقط بغرض كتابة تدوينة مصغرة، كما يمكنك تغيير الإسم الى أي اسم آخر ولكن يستلزم ذلك التعديل على القالب html بالبحث عن الكود التالي وإستبدال minipost بأي اسم آخر للمزيد...

<b:if cond='data:label.name != &quot;minipost&quot;'>

نهاية القالب ’فوتر‘:

ستجد ضمن عناصر الصفحة صندوق Text تكتب فيه نص المدونة لحقوق النشر أو أي جملة أخرى، وأسفلة هناك إشارة للتصميم بواسطة المصنع والمستضيف وتظهر أيضا في عناصر الصفحة، إن لم تعجبك تلك الصيغة وتريد تغيرها إبحث في القالب عن الكود التالي:

<p id='by'>

وهي بداية آخر فقرة موجودة بالقالب و لا تنتمي الي أي صندوق، و داخل هذا الوسم ستجد النص موضع التعديل.

عند ذلك نكون قد أنتهينا من التعديلات، لكن هناك تعديلات أخري وصلتني رسائل عنها من نوعية لون القالب لا يعجبني كيف أغير لون القالب والقوائم؟ لا أعرف شيء عن html ولا عن blogger وكيف يتم تبديل أماكن الأعمدة وكيف يتم وضع أيقونات المشاركة وكيف أضع صور مصغرة...الخ كل هذه الطلبات تختلف من مدون الى آخر وعلى حسب تخصص مدونتة وأغلبها يتوقف على مدي خبرتك في التعامل مع css فمسألة تغير اللون اظن أنها بسيطة جداً لمن لديه حد أدني من الأساسيات!

وبالنظر الى خصائص css داخل القالب ستجد أنها مقسمة بتعلقيات كبيرة في بداية كل جزء من القالب مثلاً جميع الخصائص التى تخص القائمة الجانبية ستجدها أسفل التعليق:

/* [SIDEBAR]

تخطيط القالب تم على هذا الشكل، استخدمه للدلالة إن كنت تريد مواضع أي منهم، مثلاً إن أردت تغير مكان عمود التدوينات من اليمين لليسار والعكس إبحث عن اسمه وغير خصائصة.

تذكير: نسخه إحتياطية

طبعاً لن أوصيكم بأخذ نسخه إحتياطية من قالبك القديم حتى تعود له في حالة حدوث مشاكل، وأعتذر أن واجه أي منكم مشاكل في التركيب أو صعب عليه التعامل مع القالب، وبإذن الله ستكون هناك قوالب أخرى أكثر قابيلية وسهولة وميزات جديدة خاصة بعد أن دعمت blogger HTML5 في القوالب.

شكراً للأخ المقداد لوضعة القالب للتحميل من مدونته وأتمنى ألا يكون قد عانى كثيراً في التعديل عليه! النسخه هنا مختلفة ومعدل عليها نوعيه الخطوط والتعليقات وكذا تعمل بشكل سليم مع Windows Live Writer، من حملها سابقاً يعيد تحميلها.

تحديثات

2010-05-03T00:04:00.001+03:00

تحديث مهم في شرح إضافة التدوينات المصغرة، لحل مشكلة عدم ظهور القالب من خلال برنامج التدوين WLW، كما تم حل مشكلة إختفاء التدوينات التى لا تندرج تحت أي تصنيف labels جميع التدوينات ستظهر الأن.

تحديث آخر في شرح تنسيق عناصر الصفحة، تفصيل لطريقة التطبيق وحل مشكلة القياسات في متصفح IE.

إكسبلورر 6 و 7 و 8 يدعمون خصائص CSS3!!

2010-04-27T03:26:00.007+02:00

لقد صدقت رؤية الرفيق ’إبراهيم الشحات‘ وهو يقول لي أن إكسبلورر 6 لم ولن أبداً أبداً لن يموت، مستحيل أن يموت طالما هناك مخلصين محبين يبذلوا كل الوقت والجهد حتى يظل المتصفح حي يرزق يواكب أحدث التقنيات.

إدعموا تلك الأداه المعجزة وزفوا الخبر الى الجميع لقد أصبح IE6 يدعم خصائص CSS3 الحديثة CSS3 for IE6,7,8.

كيفية تنسيق عناصر الصفحة في لوحة تحكم Blogger

2010-04-14T05:01:00.009+02:00

توفر blogger من لوحة التحكم أداه تسمي عناصر الصفحة وفيها يمكنك أن تشاهد و تتحكم في ترتيب المدونة عن طريق السحب والإفلات لمربعات القائمة الجانبية widget والرأس header والذيل footer وغيرها، لكن المشكلة أن أغلب القوالب المعربة -كلها- لا تراعي ترتيب المظهر على هذه الأداة، فتجدها أحياناً عند المشاهدة في لوحة التحكم تظهر أعرض من اللازم أو تحتوى على روابط وضعت خارج صندوق widget كما يمكنك ان تشاهد مربع البحث في header إن وجد! ولو هناك مربعات إعلانية سوف تشاهدها أيضا!...

والسبب أن هذه الأداه -عناصر الصفحة- تعتمد في التخطيط على خصائص css للقالب، فلو كان العرض الكلي يساوي 960 بكسل تكون هي الأخرى كذلك، أيضا الحال مع الخلفيات والقائمة الجانبية ونهاية الصفحة، ولا يغرك شكل المدونة المرتب عند عرضها ففي الغالب ستكون مثالاً في العشوائية وعدم الترتيب إن حاولت التحكم فيها من عناصر الصفحة!

ظهور مربع البحث مع وصلات الهيدر، عدم تناسق بين widget المختلفة

صورة الإشتراك في الخلاصات أعلى القائمة الجانبية مع ظهور مربع البحث ووصلات

ظهور أماكن للإعلان بالقائمة الجانبية

والحل بسيط، فإن كنت أحد مصممي قوالب blogger أو معرب، يمكنك التحكم في الأداة بسهولة أكثر و تخطيطها بشكل منظم، عن طريق تحديد خصائص css لكي تعمل عليها هي فقط دون التأثير على القالب نفسه أثناء العرض، وذلك بإضافة body#layout قبل أي مُحدد ضمن css، مثال لتخطيط القالب الإفتراضي:

#outer-wrapper   { }
#main-wrapper    { }
#header-wrapper  { }
#sidebar-wrapper { }
#footer          { }

إعطائك خصائص لتك المُحددات سوف يطبق بشكل طبيعي على القالب وأيضا على أداة عناصر الصفحة بلوحة التحكم، لكن إذا أردت التحكم في تخطيط عناصر الصفحة فقط عليك كتابتها بهذا الشكل:

body#layout #outer-wrapper   { }
body#layout #main-wrapper    { }
body#layout #header-wrapper  { }
body#layout #sidebar-wrapper { }
body#layout #footer          { }

لو كان العرض الكلي للقالب 960px مثلاً، يمكنك تحديد عرض جديد يظهر في لوحة التحكم بكتابتها ضمن المحددات السابقة، أيضا لو أحتوى قالب على خلفية متكررة، أزلها بسهولة من لوحة التحكم حتى تستطيع التحكم في الترتيب بسهولة وهكذا...

كيف تطبق ذلك داخل قالب blogger:

في القوالب يتم تطبيق خصائص css داخل وسم خاص يسمى <b:skin> وهو مايتم داخله التعديل وكتابة خصائص css الجديدة، لذا عند الإضافة سوف نبحث عن نهاية هذا الكود كي نضع أعلاه مباشرة خصائص تعديل عناصر الصفحة بحيث تكون هي آخر خصائص موجودة به، أبحث عن:

]]></b:skin>

من المهم قبل التعديل وفي القوالب الأجنبية خصوصاً التى يتم تعريبها أن نعرف جيداً طريقة التوزيع وما هي العناصر الرئيسية التى يُحدد منها عرض القالب أسفل الوسم <body> حتى نتمكن من استهدافها بطريقة صحيحة.

بعد أن عرفت العناصر الرئيسية، نأتي لتعديل العرض الزائد هو بجعله يساوي width:760 هذا مناسب وتقريباً هذا هو العرض الإفتراضي لأنه الذى يظهر بعناصر الصفحة في القوالب الإفتراضية بحيث يتم ضبطه على الأطار، كما يجب أن تراعي أيضا تكرار العناصر التى تأخذ نفس العرض، فمثلاً لو كان العنصر الرئيسي والذى يُحدد منه عرض القالب هو wrapper# وبعرض 960px، ثم هناك عنصر آخر داخله لرأس الصفحة header# بنفس العرض فلا يكفي أن تعدل العرض داخل wrapper فقط لأن هناك header بنفس العرض مما يعني انك لن تشاهد تأثير في عناصر الصفحة:

body#layout #wrapper, 
body#layout #wrapper #header {width:760px; margin:0; padding:0;}

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

body#layout #main    {width:500px; margin:0; padding:0;}
body#layout #sidebar {width:260px; margin:0; padding:0;}

تم توزيع الأعمدة بعرض مناسب على حسب العرض الكلي أو كما تريد حسب تخطيط القالب إن كان أكثر من عمودين -أعتبر تخطيط عناصر الصفحة هو تخطيط مصغر للقالب- لا تستخدم النسب المئوية % أو العرض بقيمة تلقائية auto جربت ذلك ولم يعمل على IE لا أعرف لماذا!!

إن فشلت معك كل الطرق السابقة، جرّب أن تكون خصائص التعديل داخل وسم <style> منفصل عن الوسم الذى تستخدمه blogger ويوضع الوسم الجديد أسفلة مباشرة، مثال..

]]></b:skin>

<style type="text/css">
ضع هنا خصائص css
</style>

تحديث بتاريخ 2 مايو 2010م، لشرح طريقة التطبيق داخل القوالب، وتحديث آخر لتحديد العرض بالبسكل فقط لمتصفح IE بعد أن فشلت المحاولة مع النسب المئوية والعرض التلقائي!

4 مواقع تولد لك خصائص CSS3 جاهزة للإستخدام!

2010-04-10T21:11:00.004+02:00

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

#11 [Layout التخطيط] إخفاء العناصر visibility: hidden و display: none

2010-04-10T15:52:00.003+02:00

ربما مرت عليك تلك الخواص من قبل، سأتحدث عنهم من خلال تلك القيم بالتحديد هل تعرف ماهو الفرق بينهم وما الحالات التى يمكن إستخدامهم فيها؟ يمكن القول أن لكل منهم نفس التأثير وهو إخفاء عنصر معين من الصفحة، ولكن هذا ليس صحيح لأن لكل منهم طريقته المختلفة لتطبيق ذلك...

display: none تلك الخاصية تقوم بإخفاء كامل العنصر من الصفحة، بمعنى لو كان هناك مثلاً نص داخل وسم <p> سوف تقوم بإخفاء الوسم بالكامل وما فيه من محتويات وكأنه غير موجود مما يؤثر على تخطيط الصفحة، ونفس الحال يطبق مع كل الأوسمة الأخرى حتى وإن كنت تراها موجودة في مصدر الصفحة HTML.

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

<div id="welcome">
<p>مرحباً بالعالم..</p>
<p class="test">تجربة إخفاء عنصر من الصفحة</p>
</div>

هذا صندوق يأخذ المعرّف welcome# داخل فقرتين واحدة منهم تأخذ الفئة test.

p {
 font: bold 16px Arial;
 padding: 5px;
 margin: 0;
}
#welcome {
 background: #666;
 color: #FFF;
}
.test {
 background: #FC3;
 color: #333;
}

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

طبيعي جداً ظهور الفقرتين، أضف الأن الخاصية display: none للفقرة الثانية بإسم test. وشاهد مرة أخرى المثال تجدة يظهر بهذا الشكل..

.test {
 background: #FC3;
 color: #333;
 display: none;
}

أختفت الفقرة الثانية بالكامل وبقيت فقط أول فقرة، ولكن ماذا لو غيرت الخاصية الى visibility: hidden وشاهدت المثال مرة أخرى..

.test {
 background: #FC3;
 color: #333;
 visibility: hidden;
}

أهاا أختفت ثاني فقرة فعلاً ولكن بقي الحيز الذى كانت تشغلة فارغاً من دون محتويات.

هناك أمثلة أخرى هنا بالمدوّنة من دروس سابقة هل تذكر القائمة المنسدلة كان علي إستخدام الخاصية display حتى أقوم بإخفاء كامل القائمة الفرعية <ul> ومن ثم إظهارها مرة أخرى بنفس الخاصية، وفي مثال قائمة البيانات المتحركة سوف تلاحظ بعد التحميل إستخدام الخاصية visibility حتى يتم المحافظة على حيز تعرض داخلة البيانات عند التنقل و تم إيضا استدعائها مرة أخرى بنفس الخاصية.

قائمة بنمط التصميم ’Breadcrumbs‘ أو الوصلات المتتابعة

2010-04-09T18:46:00.005+02:00

Breadcrumbs شكل من أشكال القوائم يطلق عليه ’فتات الخبز‘ على هيئة وصلات متتابعة توضح للزائر موقع الصفحة التى يشاهدها الأن حيث أنها تعتمد على التسلسل الهرمي للصفحات ’’على سبيل المثال: الرئيسية » قسم » قسم فرعي » منتج‘‘، وهي تستخدم كوسيلة مساعدة ثانوية للزائر ولكن لا يتم الإعتماد عليها فقط في تصفح الموقع، في هذا الدرس سوف نتعلم كيفية تصميم قائمة تعتمد على هذا النمط تشبه الموجودة في الموقع اللذيذ delicious بس طبعاً قائمتي أفضل (:...

حمل مثال للمعاينة...مرفق ملف psd للخلفية بأحجام مختلفة.

أنا استخدم تلك القائمة بقالب المدونة في عرض التسميات داخل كل تدونية طبعاً ربما يكون مكانها غير مناسب لوظيفتها التى صممت لها بس آمل أن تستخدمها أنت في مكانها المناسب (: وهنا راجع المزيد من المعلومات حول نمط التصميم breadcrumb navigation و بالعربية من مدونة قابلية الإستخدام.

بنية القائمة html

<ul>
<li><a href="#">الرئيسية <span></span></a></li>
<li><a href="#">قسم <span></span></a></li>
<li><a href="#">قسم فرعي <span></span></a></li>
<li><a href="#">قائمة الدروس <span></span></a></li>
<li><a href="#">دروس css <span></span></a></li>
<li class="last"><a href="#">أنت هنا الأن تشاهد الدرس <span></span></a></li>
</ul>

قائمة <ul> عادية تم تضمين الوسم <span> فارغ في الوصلات <a> بجانب الاسم بغرض توزيع الخلفية كما سيوضح لاحقاً ثم في البند الأخير أو موقع الصفحة الحالي أضفت class جديد بإسم last.

تصميم الخلفية وتكرارها

على أي برنامج لتحرير الصور قم برسم خلفية الوصلات وهي هنا على شكل سهم، والمهم هو طريقة توزيعها وتكون على النحو التالي في جزئين الجزء الأكبر سيكون من نصيب الوسم <a> وهو نهاية وجسم السهم، أما الجزء المدبب البداية سيكون خلفية للوسم <span> الموجود داخل الوسم <a>.

نكرر تلك الخلفية 3 مرات وفقاً للحالات التالية:

تنسيق CSS

نبدا مع تنسيق القائمة أولاً مع البنود:

ul                       {
 list-style:none;
 padding:0;
 margin:0;
}
ul li                    {
 display:inline;
}

ثم الوصلات داخل البنود ووضعها عند التأشير hover حددنا نوع الخط وحجمه ثم الصورة مع عدم تكراها و مكان وضعها وهو الجزء الإيمن الموجود به نهاية السهم كما سبق بالصورة الموضحة ثم هامش داخلي مناسب وآخر خارجي نفرّق به بين كل وصلة وأخرى، إزاحة أو تعويم لجهه اليمين مع ضبط العرض الى block، والملاحظ هنا هو إستخدام الخاصية position بالوضع relative وذلك بغرض إمكانية التحكم في الوسم الداخلي <span> كما سيأتي في الخطوة التالية -أقرأ عن الوضع relative-، أما عند التأشير يكفي أن نحدد مكان الصورة الجديد نزولاً للأسفل بقيمة 20 بكسل كي تظهر الحالة الثانية!:

ul a                     {
 font: bold 15px/16px Arial, Helvetica, sans-serif;
 background-image: url(bg.png);
 background-repeat: no-repeat;
 background-position: 100% 0;
 padding:2px 13px 2px 2px;
 text-decoration: none;
 margin:0 0 3px 3px;
 position:relative;
 color: #F0F0F0;
 display:block;
 float:right;
}
ul a:hover               {
 background-position: 100% -20px;
 color:#FFF;
}

بعد ذلك تنسيق الوسم <span> الموجود داخل الوصلات <a>، وقد أضفنا نفس صورة الخلفية مع تحديد موضعها كي تظهر الجانب الأخر من الخلفية وهو رأس السهم، ثم ارتفاع وعرض ذلك الجزء، و للتحكم فيه كان الوضع absolute بالقيمة صفر للأعلي وخروجاً عن الوسم <a> بقيمة سالبه جهة اليسار تمثل نفس قيمة العرض -معقد أنا ها!-

ul a span                {
 background-image: url(bg.png);
 background-repeat: no-repeat;
 background-position: 0 0;
 position:absolute;
 height:20px;
 left:-9px;
 width:9px;
 top:0;
}
ul a:hover span          {
 background-position: 0 -20px;
}

يبقى أخر بند وهو المفروض الصفحة الحالية بالبند <li> مع الفئة last والخصائص فيها عبارة عن تغيير لموضع الخلفية التى وضعت مسبقاً وذلك لتمييزه عن بقية الوصلات.

/*/// Last item ///*/
ul li.last a             { background-position: 100% -40px; }
ul li.last a:hover       { background-position: 100% -20px; }
ul li.last a span        { background-position: 0 -40px; }
ul li.last a:hover span  { background-position: 0 -20px; }

حمل مثال للمعاينة...مرفق ملف psd للخلفية بأحجام مختلفة.

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

معارض تصميم Blogger

2010-04-06T17:53:00.007+02:00

لم أكن أعرف أن هناك معارض تصميم خاصة لعرض قوالب blogger على غرار معارض التصميم العادية، للمهتمين فقط يمكنكم تصفح تلك المعارض في مواقع BloggerShowcase وWeLoveBlogger ولاحظوا أن هذه المعارض هي مدونات داخل blogger أيضاً تم تنسيقها لتناسب تلك الوظيفة.

التدوين المصغر داخل مدونات Blogger!

2010-04-05T20:22:00.011+02:00

نعرف جميعاً ما هو التدوين المصغر المنتشر حالياً والذى عُرف مع إنطلاق خدمة تويتر رسمياً وهو عبارة عن تحديثات كتابية تصف الأحداث التي تعاصرها في يومك علي مدار الساعة، فإذا كان التدوين من خلال تويتر هو للإجابة على السؤال ’’ماذا تفعل الان؟‘‘ فالتدوين المصغر داخل blogger هو لكتابة أفكار صغيرة وتلميحات وأسئلة لا تحتمل كتابة مواضيع طويلة ونقاشات لنفس التخصص...

وهو ما يضمن لنا بشكل أو بآخر عدم الإنقطاع عن التدوين لفترات طويلة في إنتظار كتابة مواضيع طويلة تتطلب بحث وتنسيق - يبقى القول أن التدوين المصغر داخل blogger ليست ميزة جاهزة مضافة داخل القالب بل هي طريقة جديدة نتعلمها سوياً عن طريق تخصيص القالب بطريقة احترافية وبالإعتماد على أدوات الشرط المختلفة لتحديد تصنيف معين Label تظهر داخله تلك التدوينات دون غيره.

تنبيه: جميع الأكواد مأخوذة ومعتمده على القالب الإفتراضي

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

الخطوات..

التدوينات داخل blogger يتم تنسيقها داخل includable خاص يحمل الإسم post وفي هذا الجزء يتم ضم كل المحتويات التى تعرض داخل التدوينة ’’العنوان، الأوسمة، محتوى التدوينة، وصلة التعليق والتاريخ..الخ‘‘، وما يهمنا هو بداية هذا الوسم ف قم بالبحث عن الكود التالي:

<b:includable id='post' var='post'>

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

<b:includable id='minipost' var='post'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div class='minipost'><a expr:name='data:post.id'/>
    <div class='entry'><data:post.body/></div>
    <p class='meta'><a expr:href='data:post.url'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a><b:if cond='data:post.allowComments'> /<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'> أضف تعليق<b:else/><b:if cond='data:post.numComments == 1'> تعليق واحد<b:else/><b:if cond='data:post.numComments == 2'> تعليقان<b:else/><b><data:post.numComments/></b> تعليق</b:if></b:if></b:if>&#8230;</a><b:else/></b:if><b:include data='post' name='postQuickEdit'/></p>
</div>

<b:else/>

<div class='minipost'><a expr:name='data:post.id'/>
    <h2 class='title'><a expr:href='data:post.url'><data:post.title/></a></h2>
    <div class='entry'><data:post.body/></div>
    <p class='meta'><a expr:href='data:post.url'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a><b:if cond='data:post.allowComments'> /<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'> أضف تعليق<b:else/><b:if cond='data:post.numComments == 1'> تعليق واحد<b:else/><b:if cond='data:post.numComments == 2'> تعليقان<b:else/><b><data:post.numComments/></b> تعليق</b:if></b:if></b:if>&#8230;</a><b:else/></b:if><b:include data='post' name='postQuickEdit'/></p>
</div>

</b:if>
</b:includable>

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

<b:include data='post' name='post'/>

واستبدله بالكود التالي:

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<b:if cond='data:label.name != &quot;minipost&quot;'>

<b:include data='post' name='post'/>

<b:else/>

<b:include data='post' name='minipost'/>

</b:if>
</b:if>
</b:loop>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

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

<b:if cond='data:label.name != &quot;minipost&quot;'>

الأن وبما أننا فصلنا التدوينات المصغرة عن العادية، فعن طريق css يمكنك تنسيقها بشكل مميز بالإعتماد على المحددات التالية:

.minipost { }
.minipost h2.title { }
.minipost div.entry { }
.minipost p.meta { }

من هنا يمكنك القراءة عن Includes وأدوات الشرط في تخطيط قوالب blogger.

تحديث بتاريخ 2 مايو 2010م، لحل مشكلة عدم ظهور القالب في برنامج التدوين من سطح المكتب Windows Live Writer، كما أن التدوينات التى لا تندرج تحت تصنيف معين لا مشكلة في ظهورها الأن بعد أن كانت تختفى.

تدوين مصغر

2010-04-05T16:08:00.002+02:00

التدوين المصغر، ميزة جديدة داخل blogger، معها لن تنقطع عن التدوين أبداً وربما تجعلك تتخلى عن تويتر هه!

ضبط عدد التعليقات في قوالب Blogger وجعلها أكثر تفاعلية!

2010-03-22T22:19:00.010+02:00

في قوالب blogger هناك كلمة واحدة فقط للدلالة على عدد التعليقات ’’0 تعليقات، 1 تعليقات, 27 تعليقات... الخ‘‘ نفس الكلمة في كل مرة -تعليقات- هي المتاحة والتى يمكنك تغييرها من لوحة التحكم، في هذا الدرس سوف نغير تلك الكلمة لتكون أكثر تفاعلية وفقاً لعدة حالات...

تنبيه: الأكواد الإفتراضية

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

ابحث في القالب عن الكود:

<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 cond='data:post.allowComments'>

<span class='comments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='&quot;عدد التعليقات في &quot; + data:post.title'>
<b:if cond='data:post.numComments == 0'> أضف تعليق
<b:else/>
<b:if cond='data:post.numComments == 1'> تعليق واحد
<b:else/>
<b:if cond='data:post.numComments == 2'> تعليقان
<b:else/>
<data:post.numComments/> تعليق
</b:if>
</b:if>
</b:if>
</a>
</span>

<b:else/>

<span class='comments'>التعليقات مغلقة</span>

</b:if>

في حالة عدم وجود تعليقات سوف تظهر ’أضف تعليق‘.
عند وجود تعليق واحد فقط سوف تظهر ’تعليق واحد‘.
عند وجود عدد 2 تعليق سوف تظهر ’تعليقان‘
اكثر من تعليقان سوف تظهر ’x تعليق‘ حيث x تساوي عدد التعليقات.

تعديل عدد التعليقات أعلي صندوق الرد وأسفل التدوينة

مكان آخر تظهر فيه التعليقات بنفس الأسلوب، وهو أعلي صندوق الرد أو في أسفل التدوينة، أبحث عن الكود التالي في قالبك:

<h4>
<b:if cond='data:post.numComments == 1'>
 1 <data:commentLabel/>:
<b:else/>
 <data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

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

<b:if cond='data:post.numComments == 0'>
<b:else/>

<h4>
<b:if cond='data:post.numComments == 1'> تعليق واحد على 
<data:post.title/>
<b:else/>
<b:if cond='data:post.numComments == 2'> تعليقان على 
<data:post.title/>
<b:else/>
<data:post.numComments/> تعليق على 
<data:post.title/>
</b:if>
</b:if>
</h4>

</b:if>

في حالة عدم وجود تعليقات سوف يختفي تماماً نص الإشارة الى عدد التعليقات.
عند وجود تعليق واحد تظهر ’تعليق واحد على y‘ حيث y تساوي عنوان التدوينة.
عند وجود عدد 2 تعليق تظهر ’تعليقان على y‘ حيث y تساوي عنوان التدوينة.
عند وجود أكثر من تعليقان تظهر ’x تعليق على y‘ حيث x تساوي عدد التعليقات و y تساوي عنوان التدوينة الحالية.

لك حرية تغير الكلمات الدالة على التعليقات كما تحب على حسب كل حالة.

متى يجب عليك استخدام class أو استخدام ID عند توزيع الصفحات؟

2010-03-18T15:33:00.006+02:00

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

الإستخدام المتكرر داخل الصفحات

و نقصد هنا العناصر المستهدفه التى تأخذ نفس المحُدِّدات selector أكثر من مرة داخل الصفحة مثلاً <div> أو <ul> أو غيرها من الاوسمة، و في أحد دروس الأساسيات شرحت selector التى نصف بها المحتويات داخل الأوسمة مباشرة -محدد نوعي- ينطبق على كل عنصر من نوع معين وكان على الوسم <p>، لكن هناك متطلبات داخل التصميم لا يمكن الحصول عليها فقط بواسطة المحددات النوعية، لذا كانت الحاجة الى استخدام كل من class و ID لإستهداف عناصر محددة بعينها داخل الصفحات.

<p class="error"> نص </p>

<div id="content"> صندوق محتويات </div>

<ul class="listtop"> قائمة </ul>

ولو أخذنا مثال على العناصر المتكررة في تصميم المدونات تجد أن التدوينات تكتب داخل صندوق <div> يأخذ نفس الشكل مع كل تدوينة جديدة، وكذا الحال مع التعليقات داخل <li> وأيضا في صناديق القائمة الجانبية كل هذه تُسمى عناصر متكررة:

<div class="post"></div>
<div class="post"></div>
<div class="post"></div>

إذا احتاج تصميميك الى تكرار عنصر معين أكثر من مرة في الصفحة وله نفس المحدد فالفئات classes هو أفضل خيار لك، ليس هذا فقط حيث أن اختيارك للـ class يضمن لك الإستفادة من ميزة خطيرة جداً لا توجد في المعرفات IDs وهي تعدد الفئات داخل العنصر الواحد:

<div class="post author ahmed"></div>

ويمكنك استهداف العناصر بهذا الشكل بدون مسافات بين كل class وآخر:

.post              { color:green; font-weight:bold; }
.post.author       { color:red;  }
.post.author.ahmed { color:blue; }

كل class يرث نفس الخصائص من سابقه، وفي الخصائص المتشابهه الأخير دائما له أولوية التطبيق -إذن فاللون الظاهر هنا هو الأزرق وبخط سميك كما ورثة- أما في حالة كتابة class الأخيرة منفردة لن يكون لون النص أزرق كما في آخر class بل أحمر وبخط سميك!

.post        { color:green; font-weight:bold; }
.post.author { color:red;  }
.ahmed       { color:blue; }

هل تحتاج الى وجود عناصر فريدة لا تتكرر داخل الصفحات؟

ربما هنا تأتي المشكلة مع كل مبتدئ، فما الفائدة من عدم تكرار نفس المُحدِّد selector لأكثر من عنصر داخل الصفحة؟ والجواب ببساطة لأنها بمثابه عناوين داخل الصفحات -أماكن تواجد- هل يمكن أن تكون في أكثر من مكان بنفس الوقت! أكيد لا، وهذا ما يحدث عندما تقوم بمحاولة تصحيح تصميمك وفقاً لمعايير الويب القياسية ياتي لك الخطأ الشهير عندما يرى المصحح وجود نفس المعرف ID في أكثر من مكان.

وجود العنصر في مكان واحد فقط ميزة لا تتوفر في الفئات classes، لذا فالمتصفح يفهم IDs على أنها عناوين محددة للعناصر، فلو وضعت إسم المعرف وبجوارة علامة هاش # تماماً مثل ما يوضع كمحدد ضمن css ولكن بجانب رابط الصفحة هكذا http://site.com/#content سيقوم المتصفح بتحدد موضعة داخل الصفحة و تلقائياً يتم تمرير الصفحة لإظهار ذلك العنصر.

رأس الصفحة header هو عنصر فريد لا يتكرر أكثر من مرة في نفس الصفحة كذلك القائمة الجانبية sidebar وشريط التنقل العلوي الروابط navigation وبالتأكيد نهاية الصفحة footer وغيرها... و عموماً فالمعرفات IDs تستخدم مع العناصر الرئيسية داخل الصفحة.

ماذا عن توزيع الصور؟

منتشر حالياً توزيع الإطارات والصور والتصاميم المختلفة عن طريق css داخل الأوسمة، ولا داعي أن ترتبك في اختيار كل من class أو ID فمكان التصميم هو ما يحدد ذلك، فإن كانت اطارات لصناديق القائمة الجانبية فالـ class هو سيد الموقف، أما جسم الصفحة إن كان له تصميم خاص يمكنك الإستفادة من العنصر ID الرئيسي وجعله أحد أطراف التوزيع.

الجمع بين ميزات كل من class و ID داخل العناصر

بعد أن تعرفت علي ميزات استخدامك لكل واحدة يمكنك أيضا الدمج بينهم لتحصل على عنصر جبار داخل الصفحة :) ، للتوضيح أكثر تابع المثال التالي:

<!-- CSS part: -->
#post           { color: red;  font-weight:bold; }
.firstpost      { color: green; }


<!-- HTML part: -->
<div id="post">
سطر واحد لعنصر يحتوى على معرف ID.
</div>

<div class="firstpost">
سطر اثنين يحتوى على فئة class.
</div>

<div id="post" class="firstpost">
سطر ثلاثة يجمع بين الإثنين.
</div>

لل ID درجة أعلي من class لذا في حالة وجودهم داخل نفس العنصر ف الأولوية تكون لل ID بالنسبه للخصائص المتشابهة على class داخل العنصر، لذلك فقط ظهر آخر سطر باللون الأحمر متجاهلاً اللون الأخضر.

لكن سيحدث العكس إن جمعت الإثنين في محدد واحد selector بدون مسافات بينهم، الهيمنه تكون لل class الأخير وستكون له أولويه تطبيق الخصائص المتشابهة كما تشاهد هنا:

<!-- CSS part: -->
#post           { color: red;  font-weight:bold; }
.firstpost      { color: green; }

#post.firstpost { color: blue; }


<!-- HTML part: -->
<div id="post">
سطر واحد لعنصر يحتوى على معرف ID.
</div>

<div class="firstpost">
سطر اثنين يحتوى على فئة class.
</div>

<div id="post" class="firstpost">
سطر ثلاثة يجمع بين الإثنين.
</div>

الجمع بين ميزات class و ID شائعة جداً ويمكن أن تلاحظها في قوالب المدونات والمنتديات فكل تعليق يحتوى على ID خاص حتى تتمكن من الوصول إليه مباشرة داخل الصفحة، كما أن له أيضا class متكرر يتم تنسيق المظهر من خلالة.

قائمة منسدلة متعددة المستويات أفقية ورأسية, CSS مع تأثيرات jQuery

2010-03-09T13:11:00.007+02:00

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

100% CSS، دون إي إضافات، فقط القليل من جافاسكريبت من أجل تأثيرات jQuery.
متعددة المستويات، تصل الى 3 مستويات -كل مستوى يمكن أن يكون بلون مختلف-
توزيع القائمة بشكل طبيعي عن طريق الوسم الأوسمة <ul>, <li>.
سريعة وخفيفة الوزن، تظهر مباشرة بمجرد تحميل الصفحات.
توافق كامل ودعم جميع المتصفحات بما في ذلك IE6!! بخطوة إضافية.

حمل مثال للمعاينة...يحتوى المجلد على ملفات css منفصلة لكل قائمة على حدة.

بنية القائمة html

<ul>
<li><a href="#">Root Link</a></li>
<li><a class="popup_down" href="#">Root Link</a>
 <!-- المستوى الأول -->
 <ul>
 <li><a href="#">Sub Link</a></li>
 <li><a class="popup" href="#">Sub Link</a>
  <!-- المستوى الثاني -->
  <ul>
  <li><a href="#">Sub Link</a></li>
  <li><a class="popup" href="#">Sub Link</a>
   <!-- المستوى الثالث -->
   <ul>
   <li><a href="#">Sub Link</a></li>
   <li>...</li>
   </ul>
   <!-- / المستوى الثالث -->
  </li>
  </ul>
  <!-- / المستوى الثاني -->
 </li>
 </ul>
 <!--  / المستوى الأول -->
</li>
</ul>

كل بند <li> يتفرع منه قائمة فرعية أخرى <ul>، وهناك فئة مخصصة بإسم popup_down توضع مع وصلات بنود القائمة الرئيسية بغرض عرض صورة للسهم جهة الأسفل، وفئات أخري بإسم popup لنفس الغرض لوصلات البنود الداخلية، سوف تساعدك في حالة رغبتك بتغيير التصميم.

إضافة مكتبة jQuery

من موقع jQuery نحصل على آخر إصدار من المكتبة لربطها برأس الصفحة، وإن كنت من مستخدمي blogger يمكنك إيجاد رابط مباشر لعرض المكتبة دون تحميلها بالدخول على Google AJAX Libraries وأحصل على وصلة لآخر إصدار من المكتبة لربطها برأس الصفحة داخل الوسم <head> هكذا:

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

إضافة تأثيرات jQuery

داخل وسم <script> جديد في رأس الصفحة وضعنا فيه الشفرة التالية، أو أربط الشفرة في ملف خارجي واستدعيها داخل الصفحة.

$(document).ready(function () {

// Effect
$("#nav-h li,#nav-v li").hover(
function () {
// التأثيرات التى تظهر عند التأشير لفتح القائمة
$(this).find('ul:first').css({visibility: "visible",display: "none"}).toggle('fast');
}, 
function () {
// التأثيرات عند الإفلات
$(this).find('ul:first').css({visibility: "hidden"});
}
);

});

بخبرتك في Jquery يمكنك التحكم في شكل حركة فتح القائمة، لكن في نفس الوقت وضعك للشفرة من عدمة غير مسئول عن ظهور القائمة، فهي تظهر مباشرة من خلال خصائص css والشفرة هي مجرد تأثير إضافي.

تصحيح العرض داخل IE 6

ولو إننا مش هانكون أحسن من جوجل لكن للأسف أضيف هذا الجزء حتى لا تأتيني ردود تطلب دعمه كما يحدث دائماً، متصفح IE6 لا يدعم pseudo-classes مثل: hover: وذلك على كل الأوسمة بإستثناء الوسم <a> فالحلول مع Jquery أسهل وذلك بإضافة فئه calss خاصة لهذه الغرض بإسم iehover لكي تستخدم وتظهر القائمة عند التأشير عليها، وبمعاينك لخصائص css سوف تلاحظ وجود تلك الفئة متكررة لهذا الغرض...

$(document).ready(function () {

// Effect
$("#nav-h li,#nav-v li").hover(
function () {
// التأثيرات التى تظهر عند التأشير لفتح القائمة
$(this).find('ul:first').css({visibility: "visible",display: "none"}).toggle('fast');
}, 
function () {
// التأثيرات عند الإفلات
$(this).find('ul:first').css({visibility: "hidden"});
}
);


// Fix IE
$("#nav-h li,#nav-v li").hover(
function () { 
$(this).addClass("iehover"); 
},
function () { 
$(this).removeClass("iehover");
}
);

});

حمل مثال للمعاينة...

كيف تزيل فعلاً الشريط العلوي في مدونات Blogger

2010-02-15T01:57:00.009+02:00

اطمئن لن أعيد عليك شرح الطريقة التقليدية التى تعرفها جيداً والمنتشرة في كل مكان عن إزالة الشريط العلوي في blogger، هنا أتحدث عن طريقة جديدة ومختلفة لنفس الغرض، حيث أن الطريقة المنتشرة لا تزيل الشريط العلوي فعلاً ولكنها فقط تخفيه عند العرض بالمتصفح بواسطة خصائص css التى يتم وضعها في رأس القالب ضمن وسم <style>...

إذن فالشريط العلوي سيتم تحميله كل مرة ولكنه لا يعرض، وإذا نظرت إلي مصدر الصفحة ستلاحظ أنه لا يزال هناك وهذا ما لا أريده في رحلة البحث عن قالب blogger مرتب ونظيف!

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

هذا الكود يولد تلقائيا في القالب أسفل الوسم <body> ولن تجده عند التحرير والملاحظ فيه أن الشريط هو عبارة عن Widget مثله مثل الصناديق في القائمة الجانبية ورأس الصفحة Header يمكن إزالته مباشرة دون إخفاءه وتجده أيضا بنهاية القالب.

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

إذهب الى تخطيط >> تحرير HTML ثم إبحث ضمن أكواد القالب عن الوسم...

<body

وأستبدله بالتالي ثم احفظ القالب...

<!-- <body> --> <body

سوف تظهر لك رسالة تنبيه تطلب منك التأكيد على حذف الشريط العلوي المسمى Navbar1 اختر حذف الأدوات للإستمرار...

هذا كل شيء! وبالنظر الى مصدر الصفحة بعد التعديل ستجد أن كود Navbar تم حذفه بالفعل وما بقى هو مجرد تعليق html صغير، هذه خدعة نحن تحايلنا على القالب بتكرار كتابه الوسم <body> داخل تعليق وهذا يعني أنه غير مفعل ومن ثم أخفى هو بدورة كود الشريط الذى يولد تلقائياً أسفله مباشرة.

لكي تظهر الشريط مرة أخرى أعد الوسم <body> كما كان.

للعلم: هل الوضع قانوني؟

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

للمزيد حول مشروعية إزالة الشريط العلوي، راجع الإجابة على هذا السؤال من أحد أعضاء فريق عمل blogger.

إذن اطمئن فهم لن يعاقبوا من يحذف الشريط ولكن من باب العرفان بالجميل والإمتنان والشكر لخدمة blogger فهذا الأمر غير مستحب، ولحسن الحظ هناك طرق بديلة يمكنك بها رد الجميل لblogger إن أردت ذلك مثل إضافة الشعار في مكان مناسب، وهي أداة سهلة متوفرة من لوحة التحكم تتيح لك الإختيار من مجموعة شعارات.

تحديث الشرح بتاريخ 12 يوليو 2010. تغير شكل الوسم <body> في نظام القوالب الجديد -النماذج- لذا سيتم البحث عن بداية الوسم فقط من دون رمز الإغلاق و استبداله بنفس الطريقة.

صورة واحدة فقط تكفي لصنع غلاف محتويات مميز بتوزيع css

2010-02-08T02:44:00.006+02:00

في درس سابق شرحت طريقة عمل غلاف لصندوق محتويات بدون عنوان وذلك بالإستعانة بثلاث صور مجمعة، وما يميزه أنه قابل للتمدد لأي عرض دون مشاكل و صالح أكثر في الصناديق الكبيرة إطار كلي لمنتدى أو مدونة بعرض مفتوح.. لكن رغم ذلك أرى الطريقة غير عملية لو فكرت في استخدامه لصناديق القائمة الجانبية مثلاً فأوسمه HTML المستخدمة كثيرة جداً بالمقارنة مع كونه مجرد صندوق لعرض البيانات!...

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

حمل مثال للمعاينة...مرفق ملف PSD لتصميم الإطار.

البداية مع أي برنامج لتحرير الصور قم بتصميم الإطار كما تحب أن يكون، أنا صممت هذا الإطار داخل برنامج فوتوشوب وهو مكون من 3 أجزاء رئيسية جزء علوي مخصص لكتابة عنوان للصندوق وجزء بالوسط للمحتويات على خلفية تكرر نفسها على حسب طول المحتوى ثم جزء سفلي، والإطار بالكامل به تدرج خلفي -ظل- يتجه قليلاُ جهة اليمين...

بعد الإنتهاء من التصميم تأتي مرحلة التقطيع وتكون على النحو التالي في 3 أجزاء رئيسية كما ذكرنا...

قم بقص وتجميع الجزء العلوي والسفلي في صورة والجزء بالوسط في صورة أخرى...

ثم سنقوم بجمعهم مرة أخرى متجاورين، لينتج لنا في النهاية صورة واحدة فقط وهي التى سنقوم بضبط خصائص css على أساسها...

تنبيه: الفرغات الزائدة بين الصور المجمعة تشوه التصميم

لا تترك أي مساحات زائدة في الصور التى تتكرر عمودياً -في الإتجاة Y- فهذه المسافات تحسب كجزء من الصورة وتظهر عند العرض بالمتصفح في شكل فراغات متكررة.

المرحلة الثانية كتابة أوسمة HTML للصندوق وهي في أبسط صورها كالتالي:

<div class="box">
 <h3>عنوان صندوق البيانات</h3>
 <div class="content">
  محتويات...
 </div>
</div>

صندوق بالوسم <div> يأخذ الفئة box داخله العنوان بالوسم <h3> ويمكنك تغييره على حسب أهميه العنوان، <h3> مناسب جداً للصناديق الجانبية، ثم المحتويات داخل <div> بالفئة content.

أخيراً خصائص css وهي للثلاثة أجزاء الرئيسية كما يلي:

.box {
 background: url(bg.gif) no-repeat left bottom;
 padding-bottom: 22px;
 width: 308px;
} 
.box h3 {
 background: url(bg.gif) no-repeat left top;
 padding: 5px 22px 11px 15px;
 font-weight: bold;
 font-size: 12px;
 color: #FFF;
} 
.box .content {
 background: url(bg.gif) repeat-y right top;
 padding: 4px 22px 0px 10px;
}

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

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

صندوق المحتويات الداخلي ويظهر فيه الجزء الأوسط من التصميم الذى يتكرر رأسياً بإستمرار، والصورة في جهة اليمين ومتكررة رأسياً، ثم أضفت هوامش مناسبه. ودمتم!

تذكير: فكرة أخرى لتوزيع التصميم إن كنت لا تهوى القص واللصق

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

خصائص css في الطريقة الجديدة كما يلي:

.box {
 background: url(bg.gif) no-repeat left bottom;
 padding-bottom: 22px;
 width: 308px;
} 
.box h3 {
 background: url(bg.gif) no-repeat left top;
 padding: 5px 22px 11px 15px;
 font-weight: bold;
 font-size: 12px;
 color: #FFF;
} 
.box .content {
 padding: 4px 22px 0px 10px;
}

هل وجدت إختلاف؟! كم عدد الإختلافات بالمقارنة بالطريقة السابقة :)

حمل مثال للمعاينة...مرفق ملف PSD لتصميم الإطار.