جعل القوائم قابلة للعمل على الأجهزة الذكية

هل لديك قائمة او تريد تركيب قائمة على قالبك لكنها ليست متجاوبة, هل تريد جعل اى قائمة قابلة للعمل على الاجهزة الذكية ؟

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

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

قد تجد الوسم مكتوب بهذا الشكل مثلا

ما يهمنا ان يكون هذا الوسم به معرف id
هكذا

ان وجدت المعرف وهو الكلمة بعد id تستبدلها بالكلمة الصفراء
ان لم تجد اضف معرف فقط تكتب بعد ul
id="word" واستبدل word باى كلمة تناسبك
هذا كل شئ طيب ماذا يخص الكلمة الخضراء تخص فقط ان لو لديك قائمتين وستكرر الكود ان تستبدل الرقم 2 فيها بالرقم 3


تنسيقات

ما هو معلم باللون الوردي حجم ونوع الخط
الرقم 100 عرض القائمة
الأرقام الحمراء هي الهوامش الخارجية للقائمة
2 اعلى - 4 يمين - 5 اسفل - 3 يسار
نفس الأمر للأرقام الزرقاء لكنها للهوامش الداخلة للقائمة

قائمة منسدلة احترافية بتقنية Ajax

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

معاينة

يمكنك تركيب القائمة في آداة HTML/JavaScript

• تعديل


• 
  قائمة منسدلة
  
  
  
  • #/search/label/name">القسم
  
  
  • القسم
  
  
  • القسم
  
  
  • القسم
  
  
  • القسم
  
  
  
  


• تعديل


• تعديل


• 
  
  
  
  
  
  
  
   

التنسيق

هذا tahoma هو نوع الخط الإفتراضي للقائمة يمكنك تعديله
لتغير اللون الأزرق في القائمة ابحث عن اللون التالي #00a7fb وعدله بكود اللون الذي تريد ملاحظة ستجده متكرر عدة مرات
هذا #fff هو لون خلفية القائمة في حالة تعديله بلون غامق كالأسود مثلا ستعدل اللون التالي #2c2c2c وهو لون الروابط لكي تظهر
وهذا #e6e6e6 هو لون الإطار السفلي والرقم 1 هو حجمه
كما نرى القائمة ظاهر بالأعلى لو اردناها تظل ثابتة عند التمرير  نستبدل هذه الكلمة absolute  بهذه fixed
في حالة كانت القائمة تغطي جزء عام من المدونة في المنطقة العلوية يمكن تجنب هذا بإضافة الكود التالي فوق الوسم ]]>

body {margin-top: 50px !important;}

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

-bottom
position: absolute;
right: 0;
top: 0;

الإستخدام

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

قائمة منسدلة

• #/search/label/name">القسم


• القسم


• القسم


• القسم


• القسم

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

رمز # هو رابط مدونتك أما كلمة name هي اسم القسم كما هو موجود في مدونتك اما كلمة  القسم هي الكلمة التي سيظهر بها في القائمة مثال لو لديك قسم بإسم Design ستضيفه بدل كلمة name لكن مثلا ان كنت تريد ان يظهر في القائمة بإسم عربي تصميم فتضيف كلمة تصميم بدلا من كلمة القسم

هذه اهم التنسيقات وأبسط شرح للإستخدام وبقليل من الخبرة يمكنك عمل الكثير من تلك القائمة

دمتم في امان الله

شرح انشاء قائمة التبويبات المنسدلة

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

معاينة

كما لاحظنا في المعاينة هناك روابط وهناك اضافة يمكنك تخصيص الآداة كما تريد والآن لشرح التركيب والتعامل مع الإضافة

هذا هو كود الإضافة يمكنك استخدامه في آداة HTML/JavaScript أو حتى داخل موضوع

• 
  
  
  
  • button">القائمة الاولى
              
  
  • 
    
    
    
    • 1. تعديل القائمة الأولى
    
    
    • 2. تعديل القائمة الأولى
    
    
    • 3. تعديل القائمة الأولى
    
    
    
    
  
  
  
  



• menu">
  
  
  
  • button">القائمة الثانية
              
  
  • 
    
    
    
    • 1. تعديل القائمة الثانية
    
    
    • 2. تعديل القائمة الثانية
    
    
    • 3. تعديل القائمة الثانية
    
    
    • 4. تعديل القائمة الثانية
    
    
    • 5. تعديل القائمة الثانية
    
    
    
    
  
  
  
  

 الكود المعلم بالأحمر يمكنك ازالته ان كانت لديك مكتبة جي كويري في قالبك

طبعا الكلمات العربية يمكنك تعديلها كما تشاء

ورمز الـ # بجوار كل كلمة هو الرابط أيضاً يمكنك تعديله ما عدا الخاص بالزر الاساسي لكل قائمة وهو المعلم بالأزرق

لعمل قائمة إضافية كل ما عليك فعله هو تكرار الكود الاخضر كاملا

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

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

يمكنك تعديل هذا اللون #0480d9 لتغير لون أزرار القائمة

وهذا لتغيير اللون #e7f3fc عند تمرير الماوس على الروابط

وهذا هو لون الإطار #7dc2f3

الرقم 300 هو عرض القائمة يمكنك تعديله
بالنسبة لطريقة اضافة آداة بدلا من الرابط كما في المثال أضفت صندوق الفيس بوك

بدلا من ان تكرر القائمة الخضراء كاملة كرر فقط الكود التالي

• القائمة الثانية
            

• 
  
  
  
  • هنا كود الآداة
  
  
  
  

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

وبهذا انتهى موضوعناً وبالتوفيق

قائمة منسدلة خفيفة فقط CSS

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

أولا عاين الإضافة من هنا

بالنسبة لطريقة التركيب فقط أضف الكود التالي في آداة HTML/JavaScrupt

• العنصر الأول


• العنصر الثاني
  
  
  
  • رابط فرعي 1
  
  
  • رابط فرعي 2
  
  
  • رابط فرعي 3
    
    
    
    • ثانوي 1
    
    
    • ثانوي 2
    
    
    • ثانوي 3
    
    
    
    
  
  
  • رابط فرعي 4
  
  
  • رابط فرعي 5
  
  
  
  


• العنصر الثالث


• العنصر الرابع

والآن مع شرح التنسيق

هذا #222222 هو لون الخلفية الاساسية للقائمة غيره بما يعجبك أو استبدله بـ transparent إن أردت عدم وجود خلفية
هذا #fff  هو لون الخط
أما الرقم 15هو حجم الخط
هذا #ccc هو لون الخلفية عند تمرير الماوس
وهذا #000 هو لون الخط عند تمرير الماوس
هذا #000 هو لون خلفية القائمة المنسدلة
 وهذا #bbb هو لون الفاصل بين كل سطر

وهذا هو شرح إضافة روابط أو قوائم جديدة

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

طريقة إنشاء القوائم المنسدلة للفديو والروابط

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

نبدأ بقائمة الروابط

وهذا مثال للمعاينة

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

يمكنك إستخدام الإضافة داخل المواضيع بتحويل وضع صندوق كتابة المواضيع من وضع التأليف الى وضع HTML أو أن تضيف الكود الى آداة HTML/JavaScript وهذا هو الكود

auto; padding:0 10px 0 0;margin:5px 0 5px 0;background:#CB3A00;box-shadow: 0 1px 2px #999;-moz-box-shadow: 0 1px 2px #999;-webkit-box-shadow: 0 1px 2px #999;border:2px solid #777;border-radius:15px;-webkit-border-radius:15px;-moz-border-radius:15px;">

17px; width:100%;border:0; background:transparent; color:#fff;border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;">
عنوان القائمة
Name
Name
Name
Name
Name

كل ما عليك فعله هو تغيير رمز # بالرابط وكلمة Name بالكلمات التي تريدها
ولزيادة عدد الروابط فقط قم بتكرار السطر الموضح بالأخضر فكل سطر يساوي رابط جديد
لتعديل لون القائمة غير هذا اللون #CB3A00
ولتعديل لون الخط غير هذا اللون #fff
ولتعديل حجم الخط غير الرقم 17 بالزيادة أو النقصان
ملحوظة هذا الكود width:auto; معناه أن حجم القائمة ستتوافق مع عرض المكان فلو وضعتها بموضوع ستأخذ عرض الموضوع لو وضعتها بآداة ستأخذ عرض الآداة في حالة الرغبة بتحديد عرض محدد فقط غير كلمة auto بهذا الكود 300px وغير الرقم 300 بالرقم الذي تريد

ننتقل الى قائمة الفديو

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

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

 طريقة الإضافة نفس الطريقة المتبعه مع الآداة السابقة

auto; padding:7px 10px 8px 10px;margin:5px 0 5px 0;background: #969595;background: -moz-linear-gradient(top,#969595,#000);background: -webkit-linear-gradient(top,#969595,#000);border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;box-shadow: 0 1px 2px #999;-moz-box-shadow: 0 1px 2px #999;-webkit-box-shadow: 0 1px 2px #999;border-top:4px dashed #fff; border-bottom:4px dashed #fff; border-right:4px solid #fff; border-left:4px solid #fff;">
17px; width:100%;">
عنوان القائمة
Name
Name
Name
Name
Name

في حالة اضافة فديوهات أخرى نفس السابق أيضا تكرار السطر الأخضر

لكن بدلا من VID سنستبدله بمعرف الفديو

مثال هذا رابط الفديو من اليوتيوب

http://www.youtube.com/watch?v=buq3jJ31fOs

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

http://www.youtube.com/watch?feature=player_embedded&v=sO-XDhBoLTA

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

الرقمين 300 و 230 هما عرض وإرتفاع الفديو

بالنسبة لتنسيق شكل القائمة

الكود الأحمر هو تدرج لوني مكون من لونين #969595,#000  عليك تغيير كل لون في عدد المرات المتكرر فيها
هذا اللون #fff  والمكرر أربع مرات هو لون الإطار الخاص بالقائمة غيره بما تحب
وأيضا الرقم 17 هو حجم الخط
ونفس مبدأ تعديل عرض القائمة كما ذكرنا في الكود السابق بتعديل كلمة auto
 أتبرأ من أى شخص يستخدم قوائم الفديو في عرض ما يخالف الشريعة الإسلامية ويغضب رب العالمين

وبالتوفيق للجميع