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

الحالة
مغلق و غير مفتوح للمزيد من الردود.
  • بادئ الموضوع
  • الإدارة
  • #1

! ωαнαм !

رفيق ردب
إنضم
2017 - 8 - 6
المشاركات
263
النقاط
27
الإقامة
Riyadh
الموقع الالكتروني
hr7xx.net
علم الدولة
الكود اكثر من رائع وبعمل بتاثير متحرك جميل وجدته فى احد المنتديات والمواقع فنقلته لكم التركيب ضعه فى اى مكان تريده

الطريقة
  • قم بتحميل الصور المرفقة بالملف المضغوط
  • فك الضغط عن الفولدر social
  • قم برفع مجلد social داخل مجلد صور منتداك وهو images

كود HTML

HTML:
<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

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;
}
الشكل النهائى

t2dMGB8.gif
 

المرفقات

الحالة
مغلق و غير مفتوح للمزيد من الردود.

جميع المواضيع والمشاركات المكتوبة تعبّر عن وجهة نظر صاحبها ,, ولا تعبّر بأي شكل من الاشكال عن وجهة نظر إدارة المنتدى .

أعلى أسفل