الكود اكثر من رائع وبعمل بتاثير متحرك جميل وجدته فى احد المنتديات والمواقع فنقلته لكم التركيب ضعه فى اى مكان تريده
الطريقة
كود HTML
كود CSS
الشكل النهائى
تحميل الصور
أو المرفقات
الطريقة
- قم بتحميل الصور المرفقة بالملف المضغوط
- فك الضغط عن الفولدر social
- قم برفع مجلد social داخل مجلد صور منتداك وهو images
كود 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
كود:
#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
أو المرفقات