2010/07/07

عمل مساطر لعناصر الاطار الجانبي بمدونتك


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

وكما تلاحظ ان اسماء العناصر التي تضعها موجود بالترتيب مثل (اكتب سؤالك هنا – أقسام المدونة -  أخر التعليقات) ولكن نحن لا نريد تلك الاسماء بل نريد الاسم الذي يتواجد في أول الكود من كل عنصر يعني مثلا إذا اخترنا العنصر الذي اسمه "أقسام المدونة" سوف نجد في اول الكود الذي يتبعه هذا الجزء widget id='Label1' locked='false ومن هذه النقطة نجد ان الاسم الذي يميز هذا العنصر "أقسام المدونة" والذي نريده هو Label1 الموجود بالون الاخضر ، وسوف تلاحظ أيضا أن لكل عنصر من العناصر اسم مختلف عن الأخر وقد تتشابه ولكن تختلف في الارقام مثل هذه الأسماء (HTML12 - HTML6 - HTML4 - Feed2 - Label1 - Feed1 ) ولكن دائما سوف تجد الاسم بعد كلمة widget id=' مباشرتا وهو عنوان الـ id .
3.      نأخذ اسم كود العنصر الذي اخترناه مثل "اقسام المدونة" وهو في هذا المثال Label1 ونضعه في هذا الكود :
/* Sidebar Content */
#
ضع هنا اسم القطعة{
height:200px;
overflow:auto;
}
ملاحظة : هذه الكلمة height تستخدم لتحديد الطول المناسب الذي إذا زاد عليه طول العنصر يطبق المسطره علية تلقائيا يمكنك تغييره كما تريد عبر تغيير القيم الموجودة بعده مثلما هنا 200 .
أما بالنسبة لتلك الكلمة overflow:auto تعني تطبيق المسطر فقط في حالة زيادة طول العنصر عن الطول المطلوب الذي تم تحديده .
أو بمعنى أخر ان تلك الكلمة auto تعني (أوتوماتك او تلقائي) اي ان خاصية المسطرة سوف تظهر فقط عند تخطي طول العنصر القيمة المحددة له ، أما إذا أردنا ان تظهر المسطره دائما نغير كلمة auto بكلمة scroll وفي هذه الحالة سوف تظهر المسطره في كل الحالات ولكنها سوف تكون غير فعالة "اي لا تعمل" عند عدم تخطي الطول المحدد وتفعل عند تجاوز العنصر هذا الطول مثل بتلك الصورة :
مثال على مسطره من نوع scroll

4.      ثم خذ الكود بعد وضع به اسم العنصر "أقسام المدونة : Label1 " ليصبح مثل هذا الكود :
/* Sidebar Content */
#
Label1{
height:200px;
overflow:auto;
}
ثم ضع هذا الكود في اي مكان في القالب بشرط بعد تلك العلامة } وهي عبارة عن قوس وجهه إلى اليسار ، يعني ابحث على تلك العلامة } "في اي مكان في القالب" التي سوف تجده في سطر منفرد وضع تحتها الكود مثل بتلك الصورة :
أماكن وضع كود المسطرة في قالب المدونة

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

ثانيا : لتطبيق هذه السطره على جميع عناصر الاطار الجانبي للمدونة
1.      اذهب ايضا إلى قالب المدونة "تحرير HTML"
2.      أبحث عن منطقة sidebar بالضغط على Ctrl+f في لوحة المفاتيح لديك ثم ابحث عن sidebar .widget }  وسوف تجدها مثل بتلك الصورة :
كود Sidebar في قالب المدونة

3.      ضع بها هذا الكود في أسفل الكود sidebar .widget :
height:250px;
width:200px;
overflow:auto;
ليصبح مثل هذه الكود بالصورة :
مكان وضع كود المساطر في قالب المدونة

ملاحظة : لقد ذكرنا في المثال السابق معاني تلك الكلمات (overflow:auto height) , أما الكلمة الجديدة التي نجدها في هذا الكود وهي width تعني : إذا زاد عرض العناصر عن القيمة المحدده "200" سوف يتم تطبيق المسطرة تلقائيا ولكن هذه المرة بعرض العنصر ، ويمكنك تغيير قيمة عرض العنصر بالقيمة التي تناسبك
4.      ثم أضغط "معاينة" لمشاهدة التغيير وستجدها إضافة جميلة بأذن الله وسوف تلقى إعجابك ومن ثم أحفظ التغيرات التي أجريتها
أرجو ان يكون الموضوع أفادكم وهو مهدى للأخ "محمد الغمراوي" الذي طلب مني شرح طريقة تطبيق تلك المساطر على عناصر المدونة في قسم أسئلة الزوار

هناك 14 تعليقًا:

  1. شكرا لك اخي الكريم وجعلك زخرا لنا

    ردحذف
  2. شكرا لك اخي الكريم على الاضافة المفيدة

    ردحذف
  3. بسم الله الرحمن الرحيم
    السلام عليكم ورحمة الله وبركاته

    أعزك الله وظلك يوم لا ظل الا ظله
    شكرا لك اخي الكريم وأنتظار مزيد من الدروس
    أخوك محمد الغمراوي

    ردحذف
  4. محاسب/ محمد الغمراوي :
    وعليكم السلام ورحمة الله وبركاته
    وشكرا لدعائك الجميل (وجميع المسلمين أمين يا رب العالمين)
    وأرجو ان اكون قد وفقت في شرح ما تريده بشكل سهل
    وتمنياتي لك بالتوفيق أخي الفاضل

    ردحذف
  5. Ayoub :
    أهلا بك أخي الكريم وشكرا لمرورك الطيب

    ردحذف
  6. و الله اخي تسلم ايد سعادتك
    دروسك مفيده جدا
    و زي ما الاجانب بيقولوا
    hit 4 u

    ردحذف
  7. isaacasad :
    شكرا لكلامك الجميل اخي الفاضل
    وأتمنى ان اكون دائما عند حسن ظنك

    ردحذف
  8. اخى الغالى السلام عليكم ورحمة الله وبركاته اولا الله يفتح عليك على هذه المعلومات والكم الهائل من الإفادة ولى سؤال ارجو ان تفيدنى فيه وهو هل من الممكن تحويل المدونة الى منتدى ووضع كل محتوياتها بالمنتدى كيف افادك الله اخيك بيل البغدادى من مصر ام الدنيا وهذه مدونتى المتواضعة وكم ارجو ان تفيدنى بما يكون من اللممكن التعيل عليهاalnobalaa786.@blogspot.com

    ردحذف
  9. ♥√شـــذا ♥ روحــــي♥√
    لا أعلم أن كان هذا عيب من القالب أم لا ولكن يمكنك المحاوله مره أخرى أختي الكريمه وإذا لا قدر الله لم تظهر المسطرة أرجو التوضيح لي ما يحدث معك لعلى استطيع مساعدتك لإجاد حل لهذه المشكلة
    وشكرا لمرورك الطيب

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

    ردحذف
  11. السلام عليكم معلش يمان انا عندى مشكلة ومش عارف اعمل معاة اية

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

    تم العثور على أكثر من عنصر واجهة مستخدم واحد يحمل المعرف: HTML4. يجب أن تكون معرفات عناصر واجهة المستخدم فريدة.
    Error 5

    ومش عارف اعمل اية ؟؟؟؟

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

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

    ردحذف

يسعدنا تعليقك