كيفية عمل قالب متعدد الألوان ( HTML – CSS – JQUERY )

كتب يوم : 15 يونيو 2013 - تصنيف : تصميم مواقع انترنت - مشاهدات 367

multi-color-templates

السلام عليكم زواري الكرام

أدون اليوم عن كيفية عمل قالب موقع متعدد الألوان بلغات الـ html + css + jquery

ويكفي أن يكون لديك معرفة بسيطة لتتعرف على الأكواد التي سنذكرها تباعاً

أولاً / لماذا قالب متعدد الألوان :

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

ثانياً / الأكواد والشرح

تحتاج أولا أن تضمن ملف الجي كويري إلى موقع في الهيدر بين وسمي الهيد <head></head> باستخدام الكود التالي :

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

تخيل معي أن الزائر يقوم بتغيير قالب الألوان في كل صفحة يقم بزيارتها …. ممل فعلاً …أليس كذلك ؟

قم بتضمين الملف بعد ملف الجي كويري عن طريق الكود التالي :

قم بتحميل الملف في آخر التدوينة

نقم الآن بعمل روابط للتنقل بين قوالب الألوان ، ولنفترض انها روابط ولدينا ملفين ستايل style1.css & style2.css

يكون كود الروابط لقوالب الألوان كالتالي

هل لاحظت ان روابط القوالب موجده في rel وليس href  ? تنبه لذلك

الآن كود الجي كويري الخاص بالنقل بين القالبين عند الضغط على الرابط داخل القائمة التي تحمل آي دي ID = nav

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

 

أعجبتك التدوينة ، أترك تعليق 🙂

  • أحمد رجائى محروس

    الموضوع رائع ويستحق التجربة

    • مشكور أخي أحمد على كلماتك الراقية … جزاك الله خيرا 🙂

  • أحمد سمير

    تسلم يا بشمهندس

    • مشكور على مرورك وتعليقك المهذب أخي أحمد .. أتمنى لك الفائدة 🙂

  • إبراهيم أمين إبراهيم

    معلومات قيمة و شرح بسيط
    شكرا جزيلا

    • جزاك الله خيراً أخي الكريم … شكراً لتعليقك الراق 🙂

  • منير حامد منير

    تسلم على المجهود الرائع فى الدرس
    بجد الدرس قيم جدا وممتاز
    تنسلم ياهندسه

    • حفظك الله … جزاك الله خيرا أخي منير 🙂

  • مها

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

  • MaSter

    لم ينجح معي
    ورابط التنزيل غير متاح

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

  • MaSter

    شكراً

  • MaSter

    حاولت ادمجه مع قالب وررد بريس بس ماصار ما اعرف ليش
    فاستخدمته لصنع الكوكيز فقط
    الموقع
    http://techtopweb.tk/
    صفحة آختيار التصميم
    http://techtopweb.tk/TechTopColor/

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

  • وضعته مع الوور بريس
    http://techtopweb.tk/
    كود التنقل موضوع في السايد بار
    Demo
    1
    2
    ـــــــــــــــــــــــــــــــــــــــ
    عندي سؤال هل تعرف كيف تصمم القالب ليكون متوافق مع جميع الأجهزة الهواتف….
    القالب المستخدم حاليا في موقعي من تصميمي اريده يكون متوافق مع الهواتف هل لديك شرح في مدونتك لهذا
    وشكراً

    • راجعت موقعك ووجدت الصيغة المستخدمة لعرض الروابط تختلف عن الجافا سكريبت

      استخدم
      ul id=”nav”
      li a href=”#” rel=”style1.css” class=”yellow” rel=”nofollow” /a /li
      li a href=”#” rel=”style2.css” class=”blue” rel=”nofollow” /a /li
      /ul

      وتأكد من أن روابط الإستايل صحيحة

      بالنسبة لطريقة تصميم قالب متوافق مع جميع الأجهزة سيتم عمل تدوينة خاصة بها قريباً إن شاء الله 🙂

  • شرح جميل

    شكرا لك

  • noor_ali

    فكرة رائعة .. جزاكم ربي خيراً