أهلا وسهلا بك زائرنا الكريم، إذا كانت هذه زيارتك الأولى للمنتدى، فيرجى التكرم بزيارة صفحة التعليمـــات، بالضغط هنا.كما يشرفنا أن تقوم بالتسجيل بالضغط هنا إذا رغبت بالمشاركة في المنتدى، أما إذا رغبت بقراءة المواضيع والإطلاع فتفضل بزيارة القسم الذي ترغب أدناه.
موضوع: [تومبيلات] اجعل روابط فوق احصائيات بطريقة احترافية جديدة اكتشفها بنفسك
تم النشر فى :05 - 02 - 2024
.
[تومبيلات] اجعل روابط فوق احصائيات بطريقة احترافية جديدة اكتشفها بنفسك
1
[تومبيلات] اجعل روابط فوق احصائيات بطريقة احترافية جديدة اكتشفها بنفسك Yassine Bablil
السلام عليكم ورحمة الله وبركاته
اليوم وبطريقة جديدة من عملي الشخصي وبرمجتي
سنجعل الروابط التي فوق احصائيات المنتدى بطريقة جميلة وراائعة مطورة
صورة توضيحية قبل تركيب الكود
تكبير الصورة معاينة الأبعاد الأصلية. https://i.servimg.com/u/f19/18/04/55/46/120.png
وهده صور بعد تركيب الكود طبعا يظهر على الشكل التالي
تكبير الصورة معاينة الأبعاد الأصلية. https://i.servimg.com/u/f19/18/04/55/46/220.png
وعند وضع الماوس على زر روابط مهمة يظهر على الشكل التالي
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