حالة الموضوع:
مغلق
  1. ZEBARH

    ZEBARH Developer

    الأنتساب:
    ‏6 ابريل 2012
    المشاركات:
    7
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    1
    الإقامة:
    تركيا/اسطنبول
    بــــسم الله الرحـــــــمن الرحيم
    السلام عليكم ورحمة الله وبركاته
    [​IMG]


    اليوم سوف اشرح لكم كيفية اضافة تأثير جميل جداً لموقعك / منتداك / مدونتك.. جميع السكريبتات في العالم , وهذا التاثير تقدر تضيفه للـ شعار , الهيدر , الأزرار , الأيقونات , الصور ..&:"..

    [​IMG]


    ,,مثال التأثير،،

    بالصورة

    [​IMG]


    [​IMG]


    ,,الشرح،،

    أولاً حمل ملفات هذا الشرح كاملة ( يوجد فيها الأكواد و الشرح و والخ.. )

    اضغط هنا

    الان نأتي للشرح المصور

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

    اتبع الصورة

    [​IMG]



    ثم اذهب الى اعدادات الاستايل / ثم / القوالب الشاسعة.

    [​IMG]


    ثم ضف هذا الكود في بداية الهيدر

    كود PHP:
    <class="zebarh" href="#"></a
    ملاحظة : سوف يتم شرح جميع الأكواد في نهاية الموضوع

    وفي اخر اكواد الهيدر
    [​IMG]

    ضف هذه الأكواد

    كود PHP:
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="menus.js"></script>
    ملاحظة : سوف يتم شرح جميع الأكواد في نهاية الموضوع
    ثم اعمل حفظ

    [​IMG]


    وبعدها اذهب الى خيارات الاستايل مرة اخرى وثم الى css الرئيسية للاستايل


    [​IMG]


    واذهب الى أخر الصفحة وسوف ترى فراغان بأحجام كبيرة

    فاذهب الى ثاني فراغ والصق فيه هذه الأكواد

    كود PHP:
    .zebarh{float:right;position:relative;display:block;width:89px;height:44px;background:url(images/zebarh.jpgno-repeat;
    cursor:pointer;background-position:top;}
    .
    zebarh span.hover{float:right;position:absolute;display:block;width:89px;height:44px;background:url(images/zebarh.jpgno-repeat;
    cursor:pointer;background-position:bottom;}
    ملاحظة : سوف يتم شرح جميع الأكواد في نهاية الموضوع
    [​IMG]


    واعمل حفظ

    [​IMG]

    [​IMG]



    انتهينا من تركيب الاكواد و الاضافات
    الان شرح الأكواد

    أول كود ضفناه في أول هيدر وهو

    كود PHP:
    <class="zebarh" href="#"></a>
    مثلاً تريد تضيف شعار مثل المثال في أعلى الموضوع
    أو صورة معينة
    فنعمل

    كود PHP:
    <class="xxx" href="ooo"></a>
    xxx = الاي دي فسميها كما تحب مثلا لو تريد شعار فنسميها logo
    ooo = الرابط وهذا معروف

    ونحن سميناها zebarh

    والكود الثاني اللذي ضفناها في أسفل الهيدر وهي اننا عملنا اضافة لملفات الجيكوري ( سكريبت )

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

    كود PHP:
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="menus.js"></script>
    ملفات الجيكوري ( السكريبت )
    ارفعها على ملف الاستايل أو ملف منتداك الرئيسي
    ومع مراعاة تعديل الرابط المؤشر بالأحمر الى الرابط الذي موجود فيه ملفات الجيكوري
    واذا رافع ملفات الجيكوري لمجلد منتداك الرئيسي فما لازم تغير الرابط

    كود PHP:
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="menus.js"></script>
    واتينا الى اخر كود وهي كود الـ جي اس اس وهي الأهم في هذا الشرح

    كود PHP:
    .zebarh{float:right;position:relative;display:block;width:89px;height:44px;background:url(images/zebarh.jpgno-repeat;
    cursor:pointer;background-position:top;}
    .
    zebarh span.hover{float:right;position:absolute;display:block;width:89px;height:44px;background:url(images/zebarh.jpgno-repeat;
    cursor:pointer;background-position:bottom;}
    أولاً يجب تعديل رابط الصورة الى شعارك الخاص مثل المثال الموجود في الأعلى
    ويمكنك تعديل الشعار من خلال تغير هذا الرابط الى رابط المكان الموجود فيه الشعار
    مؤشر بالأحمر

    لو تريد تعمل نفس حركة المثال الموجود في الأعلى وهو انك تعمل شرح هذا الموضوع على شعار منتداك
    فلازم تصمم شعار بهذا الشكل

    [​IMG]

    يعني تصمم شعارك و تعمل نسخة منها وتحطها للاسفل وتحط فيها التاثير للتغير اليها اثناء مرور مؤشر الماوس عليها


    وبعد الانتهاء من تصميم الشعار احفظها وارفعها الى مجلد استايلك أو مجلد صور المنتدى

    وطبعاً مع مراعاة تغيير رابط الصورة


    ويمكنكم تطبيق هذا التاثير لصفحات الويب او المدونات سهلة جدا فقط عليكم بنسخ الاكواد ولصقها في المكان المناسب و رفع الملفات اللازمة
    [​IMG]

    انتهينا الحمدلله تعالى من الشرح
    وأتمنى انكم فهمتم الشرح و التاثير الجميل هذا .
    وأي استفسارات أو اسئلة أو المشاكل الذي يواجهكم ان شاء الله تلقون الحل .
    دمتم في حفظ الملك القدوس السلام ..

    بعد تصميم الصورة و تعديل رابطها
    يجب ان نضع مقاس الشعار الأعلى لوحده
    ونضعها في مكان المؤشر بالأحمر




     
  2. D 1 r k

    D 1 r k DeveloPer Plus

    الأنتساب:
    ‏9 ابريل 2012
    المشاركات:
    141
    الإعجابات المتلقاة:
    5
    نقاط الجائزة:
    18
    الوظيفة:
    Currently Student
    الإقامة:
    United States
    رد: أروع تاثير على الاطلاق لتصاميمك

    تسلم لي يـ الغلا .. *:"
     
  3. MR.RAZOR

    MR.RAZOR Developer

    الأنتساب:
    ‏30 مارس 2012
    المشاركات:
    34
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    6
    الإقامة:
    sʏяїα .. ♥
    رد: أروع تاثير على الاطلاق لتصاميمك

    برنس يا عم الحج&:":
     
  4. вαиɒєя

    вαиɒєя DeveloPer Plus

    الأنتساب:
    ‏17 ديسمبر 2011
    المشاركات:
    142
    الإعجابات المتلقاة:
    1
    نقاط الجائزة:
    18
    الوظيفة:
    طآلب
    الإقامة:
    k.s.a
    رد: أروع تاثير على الاطلاق لتصاميمك

    الله يعطيك العافيه
     
  5. محترف هكر

    محترف هكر DeveloPer Plus

    الأنتساب:
    ‏2 أغسطس 2012
    المشاركات:
    109
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    16
    الإقامة:
    || تونس ~
    رد: أروع تاثير على الاطلاق لتصاميمك

    آلسلآم عليكم ورحمة آلله وبركآته
    يعطيكَ آلعآفيه عَ آلموضوعَ
    / [​IMG]
     
حالة الموضوع:
مغلق

مشاركة هذه الصفحة