منتدى الدعم و المساعدة لأحلى المنتديات
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

[css] كود خطير لوضع صورة بجانب روابط معينة بطريقة روعة

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

[css] كود خطير لوضع صورة بجانب روابط معينة بطريقة روعة Empty [css] كود خطير لوضع صورة بجانب روابط معينة بطريقة روعة

مُساهمة من طرف A7medvirus الخميس 15 ديسمبر 2011 - 21:19

السلام عليكم ورحمة الله وبركاته
اقدم لكم الكود الحصري الذي قد قمت بعمله
الاعضاء احلي منتدي الكرام.

وظيفة الكود
يضع صورة بجانب كل امتداد تحدده مثل هذه الصيغ مثلا
zip - rar - txt - mp3 - png - 3gp وغيرها
ويمكنك تغير الصورة علي حسب رغبتك
يمكنك وضع وضع صورة خاضة لكل امتداد.

مثال علي الكود

قبل وضع الكود

[css] كود خطير لوضع صورة بجانب روابط معينة بطريقة روعة Uou_br10
بعد وضع الكود

[css] كود خطير لوضع صورة بجانب روابط معينة بطريقة روعة Affter10

الكود
الكود:
a[href$=".png"] ,a[href$=".jpg"] ,a[href$=".gif"] {
    padding-right: 26px;
    background:url(http://i47.servimg.com/u/f47/17/07/42/77/image-10.jpg) no-repeat right ;
    padding-bottom:2px;
    }
    a[href$=".mp3"] ,a[href$=".wma"] ,a[href$=".m4a"] {
    padding-right: 26px;
    background:url(http://i47.servimg.com/u/f47/17/07/42/77/image-11.jpg) no-repeat right ;
    padding-bottom:2px;
    }
        a[href$=".mp4"] ,a[href$=".3gp"] ,a[href$=".mpg"] {
    padding-right: 26px;
    background:url(http://i47.servimg.com/u/f47/17/07/42/77/image-12.jpg) no-repeat right ;
    padding-bottom:2px;
    }
            a[href$=".pdf"] ,a[href$=".txt"] ,a[href$=".doc"] {
    padding-right: 26px;
    background:url(http://i47.servimg.com/u/f47/17/07/42/77/image-13.jpg) no-repeat right ;
    padding-bottom:2px;
    }
            a[href$=".swf"] ,a[href$=".FLV"]  {
    padding-right: 26px;
    background:url(http://i47.servimg.com/u/f47/17/07/42/77/swf1010.png) no-repeat right ;
    padding-bottom:2px;
    }

يمكنك اضافة المزيد من الامتدادت وهذا كود فارغ
الكود:
a[href$=".اسم الامتداد"]  {
    padding-right: 26px;
    background:url(رابط الصورة) no-repeat right ;
    padding-bottom:2px;}
   

طريقة التركيب
لوحة الادارة ==> مظهر المنتدي ==> الالوان ==> ورقة تصميم css


الشرح فيديو : المشاهدة علي اليوتيوب مباشر !



ملحوظة هذا الكود يعمل مع الاصدارات الجديدة من المتصفحات التي تدعم
css3

والسلام عليكم ورحمة الله
اخوكم في الله احمد المصري

A7medvirus
A7medvirus
 
 

ذكر
عدد المساهمات : 8146
معدل النشاط : 12792
السُمعة : 46

http://www.fm63.net/t1458-topic#5564

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

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

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

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