1. أهلا وسهلاً بكم في :: IQ-TeaM FORUM :: .
    إذا كانت هذه الزيارة الأولى أو لديك الرغبة بالانضمام لأعضاء شبكة عراق تيم فيجب الاطلاع على خصوصية الشبكه فربما بقائك زائر افضل لك من الانضمام بحيث أن قوانين شبكة عراق تيم لا تتناسب مع اهتماماتك .
    • للأطلاع على الخصوصية وسياسة الاستخدام - التفاصيل
    • بعد الاطلاع على سياسة الموقع وقوانين شبكة عراق تيم يمكنك التسجيل معنا - تسجيل عضو جديد
    إستبعاد الملاحظة
الكاتب : VB_Dev | المشاهدات : 291 | الردود : 3
  1. VB_Dev Developer

    الأنتساب:
    ‏21 أكتوبر 2014
    المشاركات:
    48
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    20
    نظام التشغيل:
    windows 7
    اللغة البرمجية:
    HTML5
    [​IMG]

    ... الصلاة و السلام على اشرف المرسليـن ...
    ... الحمد لله وحده نحمده و نشكره و نستعينه و نستغفره و نعود بالله من شرور أنفسنا و من سيئات أعمالنا ...
    ... من يهده الله فلا مظل له و من يظلل فلن تجد له ولياً مرشدا ...
    ... و أشهد ألا إله إلا الله وحده لا شريك له و أن محمداً عبده و رسوله صلى الله عليه و سلم ...

    [​IMG]
    شلونكم شخبآركم [ آعضآء IQ-TeaM ] بخير آن شآء آلله !

    [ً#ٌ5oًًًُ.] ! نبدآء على بركة آلله سبحآنه ! [ً#ٌ5oًًًُ.]

    شرح أضافة [ كود المواقع الاجتماعية بخاصية CSS بطريقة مميزة وبدون هاكات [​IMG] ]

    الناتج بعد التطبيق

    [​IMG]


    [​IMG]
    الكود :

    [HTML CODE]<div id="socialbdrssliding">
    <ul>
    <li class="bdrs-gplus">
    <a href="رابط%20جوجل%20بلس" rel="nofollow" target="_blank" title="جوجل بلس">
    <div class="bdrs-thumb">
    </div>
    <div class="bdrs-title">
    جوجل بلس</div>
    </a></li>
    <li class="bdrs-facebook">
    <a href="رابط%20صفحة%20فيس%20بوك" rel="nofollow" target="_blank" title="فيس بوك">
    <div class="bdrs-thumb">
    </div>
    <div class="bdrs-title">
    فيس بوك</div>
    </a></li>
    <li class="bdrs-twitter">
    <a href="رابط%20تويتر" rel="nofollow" target="_blank" title="تويتر">
    <div class="bdrs-thumb">
    </div>
    <div class="bdrs-title">
    تويتر</div>
    </a></li>
    <li class="bdrs-rss">
    <a href="رابط%20التغذية%20فيدبورز" rel="nofollow" target="_blank" title="rss feed">
    <div class="bdrs-thumb">
    </div>
    <div class="bdrs-title">
    RSS</div>
    </a></li>
    <li class="bdrs-youtube">
    <a href="رابط%20قناة%20يوتيوب" rel="nofollow" target="_blank" title="يوتيوب">
    <div class="bdrs-thumb">
    </div>
    <div class="bdrs-title">
    يوتيوب</div>
    </a></li>
    </ul>
    </div>[/HTML CODE]

    CSS

    [CSS]#socialbdrssliding a {
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    width: 40px;
    transition: width 0.4s;
    -webkit-transition: width 0.4s;
    -moz-transition: width 0.4s;
    overflow: hidden;
    }
    #socialbdrssliding a:hover {
    width: 100px;
    overflow: hidden;
    }
    #socialbdrssliding {
    float: right;
    position: relative;
    height: 40px;
    }
    #socialbdrssliding ul {
    margin: 0;
    }
    #socialbdrssliding li, #socialbdrssliding li a, #socialbdrssliding li .bdrs-thumb, #socialbdrssliding li .bdrs-title {
    display: block;
    position: relative;
    width: 40px;
    height: 40px;
    }
    #socialbdrssliding li, #socialbdrssliding li a, #socialbdrssliding li .bdrs-title {
    float: left;
    width: auto;
    overflow: hidden;
    }
    #socialbdrssliding li a {
    width: 40px;
    line-height: 40px;
    color: #E9E9E9;
    font-size: 11px;
    font-weight: bold;
    text-shadow: 1px 2px 2px #000;
    text-decoration: none;
    }
    #socialbdrssliding li .bdrs-thumb {
    float: left;
    }
    #socialbdrssliding li.bdrs-facebook a {
    background-color: #3B5998;
    }
    #socialbdrssliding li.bdrs-facebook .bdrs-thumb {
    background: url('FACEBOOK.png') no-repeat 0 -40px;
    }
    #socialbdrssliding li.bdrs-gplus a {
    background-color: #d94a39;
    }
    #socialbdrssliding li.bdrs-gplus .bdrs-thumb {
    background: url('googleplus.png') no-repeat 0 -40px;
    }
    #socialbdrssliding li.bdrs-twitter a {
    background-color: #3CF;
    }
    #socialbdrssliding li.bdrs-twitter .bdrs-thumb {
    background: url('TWITTER.png') no-repeat 0 -40px;
    }
    #socialbdrssliding li.bdrs-rss a {
    background-color: #F88F16;
    }
    #socialbdrssliding li.bdrs-rss .bdrs-thumb {
    background: url('rssbd.png') no-repeat 0 -40px;
    }
    #socialbdrssliding li.bdrs-youtube a {
    background-color: #BD3518;
    }
    #socialbdrssliding li.bdrs-youtube .bdrs-thumb {
    background: url('youtube.png') no-repeat 0 -40px;
    }
    #socialbdrssliding li.bdrs-facebook a:hover, #socialbdrssliding li.bdrs-youtube a:hover, #socialbdrssliding li.bdrs-rss a:hover, #socialbdrssliding li.bdrs-twitter a:hover, #socialbdrssliding li.bdrs-gplus a:hover {
    background-color: #666;
    } [/CSS]

    [​IMG]
    مجلد الايقونات



    [​IMG]
    وفي نهاية الموضوع

    اتمنى ان اكون قد وفقت في طرح نموذج ل
    كود المواقع الاجتماعية بخاصية CSS :{14}:


    [​IMG]
    [​IMG]
     
  2. GoЯαN Developer

    الأنتساب:
    ‏21 سبتمبر 2014
    المشاركات:
    22
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    5
    الوظيفة:
    Student
    الإقامة:
    KuRdIstaN, SLeMaNi
    نظام التشغيل:
    windows 8.1
    اللغة البرمجية:
    Java
    Facebook:
    رد: كود المواقع الاجتماعية بخاصية css بطريقة مميزة وبدون هاكات

    شکرا لک ... بس من اين
    مكان وضع المجلد أيقونة ؟
     
  3. Sуя!ησ Developer

    الأنتساب:
    ‏21 نوفمبر 2012
    المشاركات:
    71
    الإعجابات المتلقاة:
    1
    نقاط الجائزة:
    30
    الإقامة:
    Sуя!σ
    نظام التشغيل:
    windows 7
    رد: كود المواقع الاجتماعية بخاصية css بطريقة مميزة وبدون هاكات

    مشكككور
    بارك الله فيك
     
  4. Ramadan Developer

    الأنتساب:
    ‏28 مايو 2013
    المشاركات:
    44
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    20
    الإقامة:
    vBulletin
    رد: كود المواقع الاجتماعية بخاصية css بطريقة مميزة وبدون هاكات

    جزاك الله كل خير VB_Dev

    اتبع مسار الصور في css مثال

    background: url('FACEBOOK.png') no-repeat0-40px;

    FACEBOOK.png = الصوره تقدر تخليها في مجلد معين مثال

    background: url('img/FACEBOOK.png') no-repeat0-40px;

    img = المجلد

    FACEBOOK.png = الصوره

    اتمنى وصلت الفكره
     

مشاركة هذه الصفحة