1. VB_Dev

    VB_Dev Developer

    الأنتساب:
    ‏21 أكتوبر 2014
    المشاركات:
    48
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    6
    [​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]
    مجلد الايقونات

    [DOWNLOAD]https://hostr.co/UTzZZM9nrWhw[/DOWNLOAD]

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

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


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

    GoЯαN Developer

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

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

    Sуя!ησ Developer

    الأنتساب:
    ‏21 نوفمبر 2012
    المشاركات:
    69
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    6
    الإقامة:
    Sуя!σ
    رد: كود المواقع الاجتماعية بخاصية css بطريقة مميزة وبدون هاكات

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

    Ramadan Developer

    الأنتساب:
    ‏28 مايو 2013
    المشاركات:
    44
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    6
    الإقامة:
    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 = الصوره

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

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