إنشاء قوائم أفقية منسدلة بأكثر من 15 شكل مختلف الأذواق لمدونات بلوجر

عدد مشاهدات الموضوع:

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

  • ◄لاضافة اكواد الCSS نبحث(CTRL+F) عن هذا الوسم ]]></b:skin> ونضع اكواد الCSS فوقه مباشرة(قبله)
  • ◄اما اكواد الHTML اضافتها حسب رغبتك ولنفرض انك ستضعهم في اعلى مدونتك
  • ◄قم بالدخول الى تعديل HTMl ثم قم بالبحث(CTRL+F) عن هذا الوسم <div id="header-wrapper"> وضع اكواد الHTML تحته مباشرة وهنا تختلف الاوسمة والاكواد من قالب لاخر لذا لا استطيع تحديد طريقة محددة لكل القوالب ولكن يمكنك وضع تعليق برابط مدونتك اسفل التدوينة وسأخبرك باين تضع الكود بالضبط 
  • ◄قم باستبدال  كلمة تعديل بالاسم الذي تريد ان يظهر في القائمة 
  • ◄قم باستبدال ال# بالرابط الذي تريد التوجه اليه عند الضغط على القائمة
الان سنقوم بطرح مجموعة من القوائم مرفقة بالاكواد والمعاينة لكل قائمة حتى تتمكن من اختيار افضلها بالنسبة لك
1- قائمة افقية بلون ذهبي يمكن تقسيمها داخليا للمعاينة من هنا
اكواد الCSS

اكواد HTML
2- قائمة سوداء للمعاينة من هنا
اكواد الCSS


اكواد الHTML
3-قائمة زرقاء للمعاينة من هنا
اكواد CSS

اكواد HTML

4-قائمة برتقالبة مبومة للمعاينة من هنا
اكواد الCSS

اكواد الHTML

5-قائمة حمراء متعددة المستويات للمعاينة من هنا
اكواد الCSS

اكواد الHTML


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

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

  1. شكراً لك اخي الكريم على المقال الرائع

    ردحذف
  2. السلام عليكم
    al-etqan.blogspot.com
    هاذ رابط مدونتي ممكن تكلي شنو افضل قائمه مع اللون والقالب...وكيفيه الاضافه
    وشكرا ...
    وممكن اتكلي كيف اضيف كتابه اسفل التدوينه مثلك المكتوب بيهة تنبيه ........ الخ

    ردحذف
  3. @ali alyaseri
    وعليكم السلام
    القائمة السوداء مناسبة لمدونتك
    اتبع الخطوات المشروحة في الاول
    اما بالنسبة لكود الhtml فقم بحذف القائمة الموجود في قالبك عن طريق البحث عن هذا الكود
    <ul id="dzpro-menu">
    واستبدالها باكودا الhtml الخاصة بالقائمة السوداء اعلاه
    ..
    بالنسبة لكيفية اضافة كتابة اسفل التدوينة ممكن تشوف هاي التدونية
    http://www.sweup.com/2014/05/widget-share-facebook-Google-Plus-Twitter-Linkedin.html

    ردحذف
  4. اخي شكرا لك عندما ادخل الى الرابط الذي وضعتهة لكي اعرف كيف اكتب تحت التدوينة تضهر شاشه سوداء فاتحة وبها انتضار وتبقى لا تفتح ابدا

    ردحذف
  5. مشكور أخي على الموضوع
    تفضلو بزيارة مدونتي المتواضعة
    http://amirchark.blogspot.com/
    www.youtube.com/user/laary2009
    مدونة خاصة بالموسيقى وبرامج التوزيع الموسيقى وأخبار الموسيقى
    ارجو ابداء ارائكم ونصاحئكم لنا للرقي بعملنا ليكون في مستوى تطلعاتكم وشكرا لكل من زار هذه الصفحة

    ردحذف
  6. أخي والله اعذرني انا اسف ما فهمت شي من الشرح لاني مبتدا على وضع الاقسام هل ممكن ان تساعدني واكون شاكر لك

    ردحذف
  7. @ali alyaseri
    اخي المدونة فيها خاصية التحميل لكي يكتمل عناصرها يمكن ان يكون الانترنت بطي اصبر عليها قلبلا

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

    ردحذف
  9. أحتاج لمساعدة انا مبتدئ

    ردحذف
  10. شكرا جزيلا على هذا الموضوع المميز ولكن للاسف هذا الوسم غير موجود عندى فى القالب
    الخاص ب ال html

    ردحذف
  11. شكراً لك

    http://abueltezam.blogspot.com/

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

    ردحذف
  13. جميل , سلمت يداك , الله يعطيك عافيه

    ردحذف
  14. تحياتي اخي .. اين يمكن وضع الكود الذي قصدته الخاص بالـ HTML .... شكرا

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية