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

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

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

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

  • fouertrerty

    غفاغاغا

  • fouertrerty

    غغ

  • fouertrerty

    افافغافاف

  • fouertrerty

    فافغغاغا

  • fouertrerty

    افاغاغ

  • fouertrerty

    غافغاغا

  • fouertrerty

    غاغاغ

  • fouertrerty

    tyhyhy

  • fouertrerty

    hy

  • fouertrerty

    ththyh

  • fouertrerty

    hthyhyh

  • fouertrerty

    yhyy

  • fouertrerty

    hytyhyhyh

  • fouertrerty

    tyhyh

  • fouertrerty

    hythyh

  • fouertrerty

    hththtyhy

  • fouertrerty

    hthyh

  • fouertrerty

    hyyytht

  • fouertrerty

    hththythth

  • fouertrerty

    htth

  • fouertrerty

    thyhth

  • fouertrerty

    thehyth

  • fouertrerty

    hythtyhuju

  • fouertrerty

    jujyjuy

  • fouertrerty

    uyujyjhgjg

  • fouertrerty

    gjghjhgj

  • fouertrerty

    hhghjjjjjjjjj

  • fouertrerty

    hhghjjjjjjjjjh

  • fouertrerty

    hdghghgj

  • fouertrerty

    hg

  • fouertrerty

    hhhg

  • fouertrerty

    ghgh

  • fouertrerty

    ghghhgggghggggggggggggg

  • fouertrerty

    ggggggggggggg

  • fouertrerty

    gngnnhhhhhhhhhh

  • fouertrerty

    htrtrh

  • fouertrerty

    hhhhtr

  • fouertrerty

    ththt

  • fouertrerty

    htrhtht

  • fouertrerty

    thtrt

  • fouertrerty

    hrtrthhh

  • fouertrerty

    trhrtrhrhhhhhhh

  • fouertrerty

    hdhghnhn

  • fouertrerty

    ghnghndn

  • fouertrerty

    nhngg

  • fouertrerty

    gnnnhgnn

  • fouertrerty

    nghnhg

  • fouertrerty

    hngnhnnnnnn

  • fouertrerty

    nnnnn

  • fouertrerty

    gnghhn

  • fouertrerty

    nnhh

  • fouertrerty

    nnhnnhnnnn

  • fouertrerty

    gnhgngnnnn

  • fouertrerty

    hnhgng

  • fouertrerty

    hnhg

  • fouertrerty

    hnhnhnhhhhhhhh

  • fouertrerty

    hhhhhh

  • fouertrerty

    hhnhhhhhh

  • fouertrerty

    hnnhnnh

  • fouertrerty

    hhhhhhhhhhhhhhhhh

  • fouertrerty

    hhhhhhhhh

  • fouertrerty

    hhhhhhhhhh

  • fouertrerty

    hhhhhhhhhhh

  • fouertrerty

    hhhhhhhh

  • fouertrerty

    hhhhhhhhhhh

  • fouertrerty

    hhhhhh

  • fouertrerty

    hhhhhhh

  • fouertrerty

    hhhhhhhhhhh

  • fouertrerty

    hhhhhhhh

  • fouertrerty

    hhhhhhhhhhhh

  • fouertrerty

    hhhhhhhhh

  • fouertrerty

    hhhhhhhhhhhh

  • fouertrerty

    hhhhhhhhhhh

  • fouertrerty

    hhhhhhhhhhhhhhhhhhhhhhh

  • fouertrerty

    hhhhhhhhhh

  • fouertrerty

    hhhhhh

  • fouertrerty

    hhhhhhh

  • fouertrerty

    hhhhhhhhh

  • fouertrerty

    hhhhhhhhhhhhh

  • fouertrerty

    hhhhhhhhhhggg

  • fouertrerty

    gggg

  • fouertrerty

    ggggggggggggggggggggg

  • fouertrerty

    gggggggggggg

  • fouertrerty

    gggggggg

  • fouertrerty

    gggggggggggggggg