http://www.dzbatna.com/images/icons/iconrote.gif .:: ط£ط±ظˆط¹ طھط§ط«ظٹط± ط¹ظ„ظ‰ ط§ظ„ط§ط·ظ„ط§ظ‚ ظ„طھطµط§ظ…ظٹظ…ظƒ ::.
بــــسم الله الرحـــــــمن الرحيم
السلام عليكم ورحمة الله وبركاته
http://www.zebarh.com/up/uploads/13333855841.png
اليوم سوف اشرح طريقة لكم كيفية اضافة تأثير جميل جداً لموقعك / منتداك / مدونتك.. جميع السكريبت scriptات في العالم , وهذا التاثير تقدر تضيفه للـ شعار , الهيدر header , الأزرار , الأيقونات , الصور ..http://www.zebarh.com/devomm/images/smilies/smug.png..
http://www.zebarh.com/up/uploads/13333855841.png
,,مثال التأثير،،
بالصورة
http://www.zebarh.com/up/uploads/13333838181.gif
بالمثال الحي
اضغط هنا
http://www.zebarh.com/up/uploads/13333855841.png
,,الشرح طريقة،،
أولاً حمل ملفات هذا الشرح طريقة كاملة ( يوجد فيها الأكواد و الشرح طريقة و والخ.. )
اضغط هنا
الان نأتي للشرح طريقة المصور
لاضافتها في المنتدى forum
اتبع الصورة
http://www.zebarh.com/up/uploads/13333838182.gif
ثم اذهب الى اعدادات الاستايل style / ثم / القوالب الشاسعة.
http://www.zebarh.com/up/uploads/13333838183.gif
ثم ضف هذا الكود code في بداية الهيدر header
كود code:
ملاحظة : سوف يتم شرح طريقة جميع الأكواد في نهاية الموضوع
وفي اخر اكواد الهيدر header
http://www.zebarh.com/up/uploads/13333838902.gif
ضف هذه الأكواد
رمز Code:
كود code:
ملاحظة : سوف يتم شرح طريقة جميع الأكواد في نهاية الموضوع
ثم اعمل حفظ
http://www.zebarh.com/up/uploads/13333838903.gif
وبعدها اذهب الى خيارات الاستايل style مرة اخرى وثم الى css الرئيسية للاستايل style
http://www.zebarh.com/up/uploads/13333838195.gif
واذهب الى أخر الصفحة وسوف ترى فراغان بأحجام كبيرة
فاذهب الى ثاني فراغ والصق فيه هذه الأكواد
رمز Code:
كود code: .zebarh{float:right;position:relative;display:bloc k;width:89px;height:44px;background:url(images/zebarh.jpg) no-repeat; cursor:pointer;background-position:top;} .zebarh span.hover{float:right;position:absolute;display:b lock;width:89px;height:44px;background:url(images/zebarh.jpg) no-repeat; cursor:pointer;background-position:bottom;}
ملاحظة : سوف يتم شرح طريقة جميع الأكواد في نهاية الموضوع
http://www.zebarh.com/up/uploads/13333838901.gif
واعمل حفظ
http://www.zebarh.com/up/uploads/13333838903.gif
http://www.zebarh.com/up/uploads/13333855841.png
انتهينا من تركيب install الاكواد و الاضافات
الان شرح طريقة الأكواد
أول كود code ضفناه في أول هيدر وهو
رمز Code:
مثلاً تريد تضيف شعار مثل المثال في أعلى الموضوع
أو صورة معينة
فنعمل
رمز Code:
xxx" href="ooo">
xxx = الاي دي فسميها كما تحب مثلا لو تريد شعار فنسميها logo
ooo = الرابط وهذا معروف
ونحن سميناها zebarh
والكود code الثاني اللذي ضفناها في أسفل الهيدر header وهي اننا عملنا اضافة لملفات الجيكوري ( سكريبت script )
وملفات التاثير موجودة في رابط التحميل الذي وضعناها في أعلى الموضوع
كود code:
رمز Code:
ملفات الجيكوري ( السكريبت script )
ارفعها على ملف الاستايل style أو ملف منتداك الرئيسي
ومع مراعاة تعديل الرابط المؤشر بالأحمر الى الرابط الذي موجود فيه ملفات الجيكوري
واذا رافع ملفات الجيكوري لمجلد منتداك الرئيسي فما لازم تغير الرابط
كود code:
واتينا الى اخر كود code وهي كود code الـ جي اس اس وهي الأهم في هذا الشرح طريقة
[CODE]
رمز Code:
.zebarh{float:right;position:relative;display:bloc k;width:89px;height:44px;background:url(images/zebarh.jpg) no-repeat; cursor:pointer;background-position:top;} .zebarh span.hover{float:right;position:absolute;display:b lock;width:89px;height:44px;background:url(images/zebarh.jpg) no-repeat; cursor:pointer;background-position:bottom;}[/CODE
أولاً يجب تعديل رابط الصورة الى شعارك الخاص مثل المثال الموجود في الأعلى
ويمكنك تعديل الشعار من خلال تغير هذا الرابط الى رابط المكان الموجود فيه الشعار
مؤشر بالأحمر
[CODE] رمز Code:
.zebarh{float:right;position:relative;display:bloc k;width:89px;height:44px;background:url(images/zebarh.jpg) no-repeat; cursor:pointer;background-position:top;} .zebarh span.hover{float:right;position:absolute;display:b lock;width:89px;height:44px;background:url(images/zebarh.jpg) no-repeat; cursor:pointer;background-position:bottom;}[/CODE
لو تريد تعمل نفس حركة المثال الموجود في الأعلى وهو انك تعمل شرح طريقة هذا الموضوع على شعار منتداك
فلازم تصمم شعار بهذا الشكل
http://www.zebarh.com/up/uploads/13333887031.png
يعني تصمم شعارك و تعمل نسخة منها وتحطها للاسفل وتحط فيها التاثير للتغير اليها اثناء مرور مؤشر الماوس عليها
وبعد الانتهاء من تصميم الشعار احفظها وارفعها الى مجلد استايل styleك أو مجلد صور المنتدى forum
وطبعاً مع مراعاة تغيير رابط الصورة
بعد تصميم الصورة و تعديل رابطها
يجب ان نضع مقاس الشعار الأعلى لوحده
ونضعها في مكان المؤشر بالأحمر
[CODE]
رمز Code:
.zebarh{float:right;position:relative;display:bloc k;width:89px;height:44px;background:url(images/zebarh.jpg) no-repeat; cursor:pointer;background-position:top;} .zebarh span.hover{float:right;position:absolute;display:b lock;width:89px;height:44px;background:url(images/zebarh.jpg) no-repeat; cursor:pointer;background-position:bottom;}[/CODE
الأن انتهينا من الشعار و ضبط الكود code و المقاس ..الخ
واذا تريد ان تتحكم بمكان الشعار بنسبة بكسولية
فيجب عليك اضافة كود code الى كود code التاثير الجي اس اس التالي لتصبح هكذا
رمز Code:
.zebarh{float:right;position:relative;display:bloc k;width:89px;height:44px;background:url(images/zebarh.jpg) no-repeat; cursor:pointer;background-position:top;top:11px;left:11px;} .zebarh span.hover{float:right;position:absolute;display:b lock;width:89px;height:44px;background:url(images/zebarh.jpg) no-repeat; cursor:pointer;background-position:bottom;};}
top = يعني انه ينزل من فوق الهيدر header كم بكسل ؟ وتقدر تغيرها بتغير قيمة 11
left = يعني يجي من اليسار كم بكسل
لو تريد يكون جاي من اليمين فعليك بتغير left الى right
وتتحكم بقيمتها وهي 11
الان انتهينا من الشرح طريقة تقريباً
وباقي شيء واحد وهي
انه لو انت غيرت اسم الديف المؤشر بالأحمر
كود code:
رمز Code:
zebarh" href="#"> الى اي اسم مثلا logo او image او hdr اي اسم اخر
فلازم تعدل على ملف الجيكوري المسمى بـ menus.js
ويوجد فيها مكان لتغير الديف وهذه صورة توضيحية
http://www.zebarh.com/up/uploads/13333894041.jpg
فقط عدل عليها باسم اللي سميتها الديف واعمل حفظ
http://www.zebarh.com/up/uploads/13333855841.png
ويمكنكم تطبيق هذا التاثير لصفحات الويب او المدونات سهلة جدا فقط عليكم بنسخ الاكواد ولصقها في المكان المناسب و رفع الملفات اللازمة
http://www.zebarh.com/up/uploads/13333855841.png
انتهينا الحمدلله تعالى من الشرح طريقة
وأتمنى انكم فهمتم الشرح طريقة و التاثير الجميل هذا .
وأي استفسارات أو اسئلة أو المشاكل الذي يواجهكم ان شاء الله تلقون الحل .
دمتم في حفظ الملك القدوس السلام ..
http://www.zebarh.com/up/uploads/13333855841.png
w w w . z e b a r h . c o m
التعديل الأخير كان بواسطة زيبار; 03 - 04 - 2014 الساعة 00:23
https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©
