كيف توسع عرض ارشيف المدونة - بنمط القائمة المنسدلة ؟

قراءة للموضوع

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

الصورة رقم ( 1 ) توضح الاشكال الثلاثة للارشيف

الصورة رقم ( 2 ) توضح عرض الارشف قبل التوسيع (الافتراضي ) 

الصورة رقم (3 ) توضح عرض ارشيف المدونة بعد توسيعة

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

والان اسمحولي ان ابدا بالخطوات :  ( قم بعمل حفظ نسخة احتياطية لقالب مدونتك  ) 

1 - ادخل على لوحة تحكم المدونة .

2 - من من لوحة التحكم انقر على ( قالب ) ثم ( تحرير HTML ) ثم متابعة .

3 - ضع علامة صح في مربع توسيع قوالب عناصر واجهة المستخدم  .


4 - ابحث على الكود التالي وذلك بواسطة مفتاح البحث  ( Ctrl - F ) :

<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>

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

الكود الافتراضي في المدونة قبل التعديل

5 - قم بمسح الكود اعلاه خطوة ( 4 ) ثم استبدلة بالكود التالي :

<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;' style='width:100%'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>

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

كود ارشيف المدونة بعد التعديل

6 - اعمل معاينة ( Preview ) للمدونة للتأكد من تطبيق العملية ثم قم بعمل حفظ ( Save ) .

* طبعا في الحقيقة الكودين في الشرح اعلاة خطوة 4 + 5 متشابهان ، فقط غيرنا جزءبسط جدا وهو اظافة الكود الذي يشير باللون الاحمر style='width:100%'  في كود خطوة رقم 5 تغيير نسبة العرض الى 100% ....

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