[تومبيلات] اجعل روابط فوق احصائيات بطريقة احترافية جديدة اكتشفها بنفسك Yassine Bablil

اذهب الى الأسفل

[تومبيلات] اجعل روابط فوق احصائيات بطريقة احترافية جديدة اكتشفها بنفسك Yassine Bablil Empty [تومبيلات] اجعل روابط فوق احصائيات بطريقة احترافية جديدة اكتشفها بنفسك Yassine Bablil

مُساهمة من طرف Yassine Bablil الجمعة 15 مايو 2015 - 22:41

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

اليوم وبطريقة جديدة من عملي الشخصي وبرمجتي

سنجعل الروابط التي فوق احصائيات المنتدى بطريقة جميلة وراائعة مطورة

صورة توضيحية قبل تركيب الكود

[تومبيلات] اجعل روابط فوق احصائيات بطريقة احترافية جديدة اكتشفها بنفسك Yassine Bablil 120
https://i.servimg.com/u/f19/18/04/55/46/120.png

وهده صور بعد تركيب الكود طبعا يظهر على الشكل التالي

[تومبيلات] اجعل روابط فوق احصائيات بطريقة احترافية جديدة اكتشفها بنفسك Yassine Bablil 220
https://i.servimg.com/u/f19/18/04/55/46/220.png

وعند وضع الماوس على زر روابط مهمة يظهر على الشكل التالي

[تومبيلات] اجعل روابط فوق احصائيات بطريقة احترافية جديدة اكتشفها بنفسك Yassine Bablil 31710
https://i.servimg.com/u/f19/18/04/55/46/31710.png


ابتكار متميز جديد مطور للمنتديات

=== الآن مع الكود وطريقة التركيب طبعا ====

نتوجه الى : لوحة الإدارة > مظهر المنتدى > التومبيلات و القوالب > إدارة عامة 


لنسخة الثالثة phpBB3:

لنسخة PunBB:


لنسخة المطورة Invision:


لنسخة التانية phpBB2:


هكدا انتهينا من المرحلة الاولى لتعديل على التومبيلات

الآن نبدأ المرحلة التانية

لوحة الإدارة > مظهر المنتدى > الوان > ورقة تصميم css

ونضيف الكود التالي :

الكود:
/* --- Yassine Bablil --- */
#menu ul {
padding:0;
margin:0;
list-style:none;
position:relative; //مهمة
}
#menu > ul > li {
float:right;
padding:0;
margin:0;
}
 #menu > ul > li > a {
display:block; //مهمة
font:normal bold 14px tahoma;
background:#3f4040;
min-width:100px;
text-align:center;
padding:10px 15px 10px 15px;
text-decoration:none;
color:#FFF;
border-top:4px solid #FFF;
border-bottom:4px solid #00B4FF;
transition:background 500ms,color 500ms,border-color 500ms;
}
#menu > ul > li > a:hover {
background:#666;
border-top-color:#00B4FF;
color:#00B4FF;
}
 #menu > ul > li > ul {
position:absolute;
top:45px; //إرتفاع القائمة
right:0;
display:none;
}

 #menu > ul > li > ul > li > a {
background:#666;
display:block; //مهمة
font:normal normal 12px tahoma;
padding:5px 10px 5px 10px;
text-decoration:none;
color:#FFF;
border-bottom:1px solid #FFF;
min-width:130px;
}
#menu > ul > li > ul > li > a:hover {
background:#777;
}


انتهيت عملية تركيب الكود واستمتعو بطريقة الجديدة المتميزة المطورة

ملاحظة : يمكنك تغيير كلمة : روابط مهمة من خلال تعديل
الكود:
<li><a>روابط مهمة</a>

داخل الكود

بالتوفيق للجميع
فريق الدعم و المساعدة
Yassine Bablil

يمنع النقل نهائيا دون دكر : اسم المبرمج + المصدر


عدل سابقا من قبل Yassine Bablil في السبت 16 مايو 2015 - 21:24 عدل 1 مرات
Yassine Bablil
Yassine Bablil
 
 

ذكر
عدد المساهمات : 7313
معدل النشاط : 11641
السُمعة : 167

https://mostadaf.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة

- مواضيع مماثلة

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى