.:: ط£ط±ظˆط¹ طھط§ط«ظٹط± ط¹ظ„ظ‰ ط§ظ„ط§ط·ظ„ط§ظ‚ ظ„طھطµط§ظ…ظٹظ…ظƒ ::.


بــــسم الله الرحـــــــمن الرحيم
السلام عليكم ورحمة الله وبركاته



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




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

بالصورة



بالمثال الحي

اضغط هنا




,,الشرح طريقة،،

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

اضغط هنا

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

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

اتبع الصورة





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




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

كود code:
<a class=&quot;zebarh&quot; href=&quot;#&quot;></a>
ملاحظة : سوف يتم شرح طريقة جميع الأكواد في نهاية الموضوع

وفي اخر اكواد الهيدر header


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

رمز Code:
كود code: <script type=&quot;text/javascript&quot; src=&quot;jquery-1.3.2.min.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;menus.js&quot;></script>
ملاحظة : سوف يتم شرح طريقة جميع الأكواد في نهاية الموضوع
ثم اعمل حفظ




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





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

فاذهب الى ثاني فراغ والصق فيه هذه الأكواد
رمز Code:
كود code: .zebarh{float:right;position:relative;display:bloc k;width:89px;height:44px;background:url(images/zebarh.jpg) no-repeat; cursorointer;background-position:top;} .zebarh span.hover{float:right;position:absolute;display:b lock;width:89px;height:44px;background:url(images/zebarh.jpg) no-repeat; cursorointer;background-position:bottom;}
ملاحظة : سوف يتم شرح طريقة جميع الأكواد في نهاية الموضوع



واعمل حفظ







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

أول كود code ضفناه في أول هيدر وهو
رمز Code:
<a class=&quot;zebarh&quot; href=&quot;#&quot;></a>
مثلاً تريد تضيف شعار مثل المثال في أعلى الموضوع
أو صورة معينة
فنعمل
رمز Code:
<a class=&quot;xxx&quot; href=&quot;ooo&quot;></a>
xxx = الاي دي فسميها كما تحب مثلا لو تريد شعار فنسميها logo
ooo = الرابط وهذا معروف

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

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

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

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


كود code:
<script type=&quot;text/javascript&quot; src=&quot;jquery-1.3.2.min.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;menus.js&quot;></script>


واتينا الى اخر كود code وهي كود code الـ جي اس اس وهي الأهم في هذا الشرح طريقة
[CODE]
رمز Code:
.zebarh{float:right;position:relative;display:bloc k;width:89px;height:44px;background:url(images/zebarh.jpg) no-repeat; cursorointer;background-position:top;} .zebarh span.hover{float:right;position:absolute;display:b lock;width:89px;height:44px;background:url(images/zebarh.jpg) no-repeat; cursorointer;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; cursorointer;background-position:top;} .zebarh span.hover{float:right;position:absolute;display:b lock;width:89px;height:44px;background:url(images/zebarh.jpg) no-repeat; cursorointer;background-position:bottom;}[/CODE
لو تريد تعمل نفس حركة المثال الموجود في الأعلى وهو انك تعمل شرح طريقة هذا الموضوع على شعار منتداك
فلازم تصمم شعار بهذا الشكل



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


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

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

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


[CODE]
رمز Code:
.zebarh{float:right;position:relative;display:bloc k;width:89px;height:44px;background:url(images/zebarh.jpg) no-repeat; cursorointer;background-position:top;} .zebarh span.hover{float:right;position:absolute;display:b lock;width:89px;height:44px;background:url(images/zebarh.jpg) no-repeat; cursorointer;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; cursorointer;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; cursorointer;background-position:bottom;};}

top = يعني انه ينزل من فوق الهيدر header كم بكسل ؟ وتقدر تغيرها بتغير قيمة 11

left = يعني يجي من اليسار كم بكسل
لو تريد يكون جاي من اليمين فعليك بتغير left الى right
وتتحكم بقيمتها وهي 11


الان انتهينا من الشرح طريقة تقريباً
وباقي شيء واحد وهي

انه لو انت غيرت اسم الديف المؤشر بالأحمر
كود code:
رمز Code:
<a class=&quot;zebarh&quot; href=&quot;#&quot;></a> الى اي اسم مثلا logo او image او hdr اي اسم اخر
فلازم تعدل على ملف الجيكوري المسمى بـ menus.js
ويوجد فيها مكان لتغير الديف وهذه صورة توضيحية



فقط عدل عليها باسم اللي سميتها الديف واعمل حفظ




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


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






w w w . z e b a r h . c o m




التعديل الأخير كان بواسطة زيبار; 03 - 04 - 2014 الساعة 00:23




©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©