عيد الاضحى المبارك


مواضيع تهمك

ركن تطوير منتديات vb3.8.0 القسم خاص بتطوير منتديات الجيل الثالث ويمنع منعاً باتاً.. كتابة اي موضوع يهتم بمشاكل المنتديات (( يمنع وضع نسخ vBulletin ))

كود رائع للمواقع الاجتماعية بخاصية css

الكود اكثر من رائع وبعمل بتاثير متحرك جميل وجدته فى احد المنتديات والمواقع فنقلته لكم التركيب ضعه فى اى مكان تريده الخطوات قم بتحميل الصور ستجدها مضغوطة فك الضغط عن الفولدر social قم برفع مجلد...

احصائياتى

الردود
0

المشاهدات
823
اليوم السابع
.:: عضو مشارك ::.
  • اليوم السابع is on a distinguished road

  • اليوم السابع غير متواجد حالياً

المشاركات
63

+التقييم
12

تاريخ التسجيل
Jul 2018

الاقامة

نظام التشغيل
windows 8.1

رقم العضوية
1722
09-21-2018, 01:15 PM
المشاركة 1
09-21-2018, 01:15 PM
المشاركة 1
افتراضي كود رائع للمواقع الاجتماعية بخاصية css
الكود اكثر من رائع وبعمل بتاثير متحرك جميل وجدته فى احد المنتديات والمواقع فنقلته لكم التركيب ضعه فى اى مكان تريده
الخطوات
  • قم بتحميل الصور ستجدها مضغوطة
  • فك الضغط عن الفولدر social
  • قم برفع مجلد social داخل مجلد صور منتداك وهو images

كود الهاتمل
كود:
<div id="socialbdrssliding">
    <ul>
        <li class="bdrs-gplus">
        <a href="رابط جوجل بلس" rel="nofollow" target="_blank" title="جوجل بلس">
        <div class="bdrs-thumb">
        </div>
        <div class="bdrs-title">
            جوجل بلس</div>
        </a></li>
        <li class="bdrs-facebook">
        <a href="رابط الفيس بوك" rel="nofollow" target="_blank" title="فيس بوك">
        <div class="bdrs-thumb">
        </div>
        <div class="bdrs-title">
            فيس بوك</div>
        </a></li>
        <li class="bdrs-twitter">
        <a href="رابط تويتر" rel="nofollow" target="_blank" title="تويتر">
        <div class="bdrs-thumb">
        </div>
        <div class="bdrs-title">
            تويتر</div>
        </a></li>
        <li class="bdrs-rss">
        <a href="رابط التغذية" 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="رابط قناة اليوتيوب" rel="nofollow" target="_blank" title="يوتيوب">
        <div class="bdrs-thumb">
        </div>
        <div class="bdrs-title">
            يوتيوب</div>
        </a></li>
    </ul>
</div>
كود css
كود:
#socialbdrssliding a {
    font-family: 'Open Sans', Helvetica, 'Exo 2', 'Droid Arabic Kufi', tahoma, 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('images/social/FACEBOOK.png') no-repeat 0 -40px;
}
#socialbdrssliding li.bdrs-gplus a {
    background-color: #d94a39;
}
#socialbdrssliding li.bdrs-gplus .bdrs-thumb {
    background: url('images/social/googleplus.png') no-repeat 0 -40px;
}
#socialbdrssliding li.bdrs-twitter a {
    background-color: #3CF;
}
#socialbdrssliding li.bdrs-twitter .bdrs-thumb {
    background: url('images/social/TWITTER.png') no-repeat 0 -40px;
}
#socialbdrssliding li.bdrs-rss a {
    background-color: #F88F16;
}
#socialbdrssliding li.bdrs-rss .bdrs-thumb {
    background: url('images/social/rssbd.png') no-repeat 0 -40px;
}
#socialbdrssliding li.bdrs-youtube a {
    background-color: #BD3518;
}
#socialbdrssliding li.bdrs-youtube .bdrs-thumb {
    background: url('images/social/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;
}
الشكل النهائى


تحميل الصور
كود:
arabsharing.com/do.php?id=179737
او
كود:
up.top4top.net/downloadf-994z4luc1-zip.html


اضافة رد

العلامات المرجعية

كود رائع للمواقع الاجتماعية بخاصية css



الانتقال السريع
المواضيع المتشابهه للموضوع: كود رائع للمواقع الاجتماعية بخاصية css
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
مطلوب | كود اعلان بخاصية غلق الكود ramez5 ركن مشاكل وطلبات المنتديات 0 01-05-2023 01:59 PM
وضع الايقونات الاجتماعية في معلومات الاعضاء safwan khazraji ركن تطوير منتديات vb3.8.0 2 01-18-2020 08:33 PM
[blogger] طريقة نشر الصور المتحركة GIF فى موقعك بخاصية Click to preview هيلبرنت ركن تطوير المواقع 1 04-25-2019 10:12 PM
[WhatsApp] "واتساب" يفاجئ مستخدميه بخاصية جديدة في المحادثات الجماعية هيلبرنت ركن مواقع التواصل الإجتماعي 1 11-18-2018 11:01 PM
تطبيق Amasion الدمج أكثر من صور في صورة واحدة. يصلح للمواقع الاجتماعية هيلبرنت Apple ابل 0 01-06-2016 12:40 AM




الساعة الآن 10:28 PM
RSS 2.0XML Site MapTAGS SiteInfo SiteRSS FeedMap SectionsvB MapsMap TagSitemap ForumMaps Forum